Latest Entries

particlesense
- my first openFrameworks
experiment

It’s been a while since my last post, a lot has happened since then. One of the things i have been busy with is starting to explore new languages to code from, that deliver more computer power to rendering. I stubbled across openFrameworks, and saw  an incredible set of installations created by this c++ framework. The creators of this framework, Zach Lieberman and Theo Watson, wanted to make c++ more accesible for creative coders, often familiar with languages like java/processing, flash etc.

Have a look at my first experiment:


So I started to do some tutorials and read a few books on c++ and the book Programming Interactivity: A Designer’s Guide to Processing, Arduino, and openFrameworks . I highly recommend that book if you are new to c++, but you should read up on a little c++ in any case. I found Practical C++ Programming a good read.

This program uses the ofxOpenCV and ofxVectorMath addons. The program detects motion, and determines the particle system’s gravitation point accordingly. This is the first stage of an idea im working on, but I’m very happy with what i have so far.

Popularity: unranked [?]

BasicFLAR.as
- FLARToolKit made easy

A while ago i posted my first fidlings with FLARToolkit, and promised to show more. Well since I was going to do a presentation at FUGN, I though I might as well write is down here.

FLARToolKit for me has been made possible from three sources. Saqoosha is the guy that ported the ARToolKit to ActionScript 3, and has a number of examples of his creative work at his site. Mikko Haapoja’s blog has been a fantastic resource, and Lee Brimelow’s tutorial was what kick-started me.

Here is an example of BasicFLAR.as in use, by yours truly:


The prerequisites for using my BasicFLAR class can be met by following the step called “Step 1: Download” written down by Mikko Haapoja here. Much of this post will be summarizing alot of what Mikko writes in his post, so if you have the time, you should read up on his post before continuing. Anyways, let’s get started.


The Marker

First of all, what we need to do is make a marker, for the FLAR to detect. You can either download mine here and print it out on thick paper, or build one yourself. To build it yourself you need to need to draw it first, using the guidelines Mikko Haapoja points out in his post, and print it out. When this is done you need to create a pattern file that we will later load into the FLARToolKit library. Saqoosha made an air app that creates this file for us. Simply download and install it from here. Start the app, hold your marker infront of the camera, and click “save pattern” when you see the read box forming round your pattern. Make sure you add the “.pat” extension when you save it.


The Camera Parameters

There is one more ting the FLAR is dependent on, and that is a camera parameters file. This file is a binary file that contains information that corrects lens distortion of your webcam. Mikko Explains this more in detail in his post. Just use the “camera_para.dat” file that comes with FLARToolKit, and you should be sorted.


The BasicFLAR.as

Now on to the code. Using my BasicFLAR class lets you just start doing the 3D stuff and let the FLAR stuff be taken care of by the class. Simply extend the class, and start coding, like this:



       // Import the class
       import com.perkstoveland.flar.BasicFLAR;

       public class FLARExample extends BasicFLAR
       {
              /**
              *    Constructor.
              **/
              public function FLARExample()
              {
                     // Feed the two files that FLARToolKit requires to work
                     super( "camera_para.dat", "perkmarker.pat" );
              }
       }


Now the first time you compile FLARToolKit and Papervision3D, you most likely will get an error. Mikko Haapoja, again, explains this very well here. Since the issue can result in a head-scratcher, i’ve quoted what he says about the issue:


The very first time you try to compile FlarToolkit after getting Papervision even the examples will not compile and you will get this error message:

Error: Attempted access of inaccessible property _projection through a reference with static type org.libspark.flartoolkit.pv3d:FLARCamera3D.

To fix this just go into the class-

org.papervision3d.cameras.Camera3D

And change the line-

private var _projection:Matrix3D;

to

protected var _projection:Matrix3D;

This will not break Papervision however it will just allow FlarToolkit’s FlarCamera3D to use the projection matrix of the Camera3d class.


Ok, so we go the FLARToolKit going, what we need to do now is start adding 3D objects to the stage. Since we need to load the files before BasicFLAR is ready to receive 3D objects, in our example here we override the BasicFLAR’s onInit() function, and feed the Papervision3D container with objects. Let’s create a cube that sits on the marker:

      

       import org.papervision3d.materials.ColorMaterial;
       import org.papervision3d.materials.utils.MaterialsList;
       import org.papervision3d.objects.primitives.Cube;

       //   We store the cube as a class variable,
       //   so we can manipulate it later.

       private var _cube:Cube;

       //   Next we override the onInit function, note that
       //   we  do not need to call the super's onInit() method
       //   as that method doesn't really do anything. It's
       //   there for you to override and implement.

       override protected function onInit():void
       {
              //   Create the cube materials
              var mat:ColorMaterial = new ColorMaterial();
              var matList:MaterialsList = new MaterialsList( { all: mat } );

              //   Create the cube.
              _cube = new Cube( matList, 30, 30, 30 );

              //   Since the cube's center point will be in the middle
              //   of the marker, we just want to lift it up half its
              //   height, so it is "standing" on the marker.
              _cube.z = 15;

              //   Finally we add it to BasicFLAR's container property.
              container.addChild( _cube );
       }


Finally, if we want, we can manipulate and animate the 3D objects that we just added. Again this is done by overriding an existing method in BasicFLAR, namely onFrameTick(). But this time we need to be sure to call the superclass’s method we are overriding. This method takes care of the 3D rendering and marker detecting. This is the way to do it:



       override protected function onFrameTick( $e:Event ):void
       {
              //   Roll the cube by 2 degrees each frame.
              _cube.roll( 2 );

              //   Call the super's method, and pass the event to it.
              super.onFrameTick( $e );
       }


Thats is, you should now be seeing an animated cube following the moves you make on the marker through you web cam. Below are downloads and source code for you to dig into. I’d love to see what you do with it. Enjoy!


The Downloads

  • BasicFLAR.as
    – This is the class i explain in this post, authored by me.
  • Papervision3D
    – There is loads of documentation on papervision out there, just google it :)
  • FLARToolKit
    – You can get a start-up guide here, as well as the FLARToolKit library.
  • MarkerGenerator
    – The AIR app built by saqoosha, generates a marker file.
  • Popularity: 20% [?]

    Using multiple
    AS2 YouTube Chromeless
    players in AS3

    Since YouTube still haven’t made a player for AS3, and a project I have been working on demanded the use of multiple players in the same AS3 context, I had to sit down and create my own solution. I of course did some google’ing first to see if this problem had been solved already. All I found of importance was TubeLoc and *drawlogic’s players. Both of them use either LocalConnection or ExternallInterface calls to communicate with the AS2 player. None of them however can use multiple players since the communication breaks when the second one is instantiated.

    They way i solved it was using Grant Skinner’s SWFBridge classes. I first made an AS2 wrapper swf, which uses the SWFBridgeAS2 class, and exposes the YouTube chromeless player api so that we can call all the YouTube method calls from the SWFBridgeAS3 class. But for the possibility of using multiple instances of the player, the LocalConnection used in Grant’s classes need a unique id for each player. The Display class i made takes care of this behind the scenes. All you need to do is supply the url to the AS2 youtube wrapper when you instantiate the class, and you’re good to go:

    
           // Import the class
           import com.perkstoveland.youtube.Display
    
           // Create the player
           var wrapperURL:String = "http://www.domain.com/youtubewrapper.swf";
           var youtubeDisplay:Display = new Display( wrapperURL );
    
           // Lets do something with the player
           youtubeDisplay.cueStartUpVideoById( "XtCW-axRJV8" );
           addChild( youtubeDisplay );
    

    Thats all the code you need. You can instantiate as many times as you want, the same way. All you need to do now is create the GUI. You can see an example here (updated 16.05.09), and download the source for it here (updated 16.05.09).

    Last month i had a talk at FUGN where i presented this. You can download the keynote as pdf here (in norwegian only).



    Update 16.05.09

    I finally got round to adding to the player functionality. Now it is wrappiing all the functions of the AS2 player. You use the same api calls as the AS2 version, but the way the getter methods work is slightly different. Since LocalConnection is asynchronous, meaning AS2 can’t return values directly to AS3, we instead add a listener before you make the call as normal, and the result will come back through the listener handler. Here is an example:

    
           // Import classes.
           import com.perkstoveland.youtube.Display;
           import com.perkstoveland.youtube.events.DisplayEvent;
    
           var wrapperURL:String = "http://www.domain.com/youtubewrapper.swf";
           var youtubeDisplay:Display = new Display( wrapperURL );
           youtubeDisplay.addEventListener(
                              DisplayEvent.VIDEO_BYTES_LOADED_RECIEVED,
                              onBytesLoadedReceived );
    
           youtubeDisplay.getVideoBytesLoaded();
    
           function onBytesLoadedReceived( $e:DisplayEvent ):void
           {
                  trace( $e.bytes );
           }
    

    Keep in mind that there are now some public methods in Display.as that aren’t ment for you to call. These are public so that the wrapper is able to return the requested information by method calls via LocalConnection. As a rule of thumb, stay away from all public methods that start with “on” in their name. My next project will be to create a GUI for the player and at the same time encapsulate the off-limit public methods i just mentioned. When i get the time…

    You can get the updated version here.

    After request i have put up a link where you can download the fla file for the AS2 youtube wrapper. You shouldn’t need to modify it to make you app work, as most likely the fault would be outside the wrapper. Anyways, you can download it here

    Popularity: 100% [?]

    Flash Augmented Reality
    demo

    The last couple of months i have been meaning to read up on the FLARToolkit created by Saqoosha. I never got around to doing much with it until Lee Brimelow posted a very helpful tutorial on the basics of using the tool kit. There is quite a few things to keep in mind when doing this, so i wanted to create a class that took care of the FLAR stuff, which i then could just extend and start adding some Papervision3D objects to the stage. What you see below is a rough demo to show that is works, and i will be releasing the code as soon as it is ready. My goal is to make a class that people can just extend and never have to touch any FLAR code, but rather start creating the 3D objects that are to be manipulated.

    Stay tuned!

    Popularity: 13% [?]

    AS3 Sound Spectrum
    Analyzer

    A couple of weeks ago i wanted to try out working with sound. I done little more with sound other than loading mp3s and playing them. I wanted to make a sound visualizer…

    ..well I did! And id like to share it with you. Getting the actual snap shot data of the sound spectrum was the easy part. The tricky part was in fact making some cool graphics. Below you can see a screenshot of the visualizer, and here is the link to the actual visualizer.

    Download source files here.

    Popularity: 8% [?]

    Scrollbar class for AS3

    I have recently been working with a lot of display objects that needed scroll bars. Previously i have often used the scrollbar component in the Flash IDE, but i wanted a lightweight and slicker looking way to scroll through content. I made a class that is very simple to use, that i would like to share with you. This is the class in action:


    You can download the source files here.

    The class is very easy to use, below i will give two usage examples. One which is more of a Flash IDE approach where code is written in timeline, and the other where the object that is to be scrollable is created programatically. But first of all you need to add the Scroller class to you class path. In the Flash IDE, you can add the classes folder ( in the zip file ) to you list of classpaths in Preferences -> ActionScript -> ActionScript 3.0 Settings…



    Now the code. First off, the timeline version. Lets say you have a MovieClip you need a scrollbar on, where the viewable area should be 250 pixels high, and has a red color. The content of this MovieClip can be anything, an image, graphic, text etc. We place it onto the stage where you want the scrolling MovieClip to be, and give it an instance name of “myClip” in the properties panel. Finally we write this code on the timeline:

    
          // Import the class.
          import com.perkstoveland.utils.Scroller;
    
          // Create the scrollbar
          var scroller:Scroller = new Scroller( myClip,  250, 0xFF0000 );
    

    This will create a scrollbar and place it next to the MovieClip on the stage.



    This class can used without using the timeline too, lets create a TextField that uses the Scroller all programatically. Like this:

    
          // Import the class.
          import com.perkstoveland.utils.Scroller;
    
          // Create the TextField, asume we have stored the text to
          // show in a variable "theTextToShow", which is a string
          // with a few paragraphs of text.
          var txt:TextField = new TextField();
          txt.multiline = true;
          txt.wordWrap = true;
          txt.autoSize = TextFieldAutoSize.LEFT;
          txt.width = 300;
          txt.text = theTextToShow;
    
          // Lastly we create the scroller, position it, and add it
          // to the display stack.
          var scroller:Scroller = new Scroller( txt, 350, 0x333333 );
          scroller.x = 20;
          scroller.y = 20;
          addChild( scroller );
    

    Thats it, hope you use it, and like it. Enjoy!

    Popularity: 7% [?]

    Introduction to
    scripting and OOP
    in ActionScript

    It’s been a long time since my last post. But that means i have been busy, so I guess that would be a good thing. Anyways, last week i was asked to teach a well-versed timeline Flash designer some scripting, in AS3. My would-be “pupil” has some years under his belt of flash use, pre-dominantly AS2, and has only been using the Flash IDE to add basic actions like, stop(), gotoAndPlay(), and placing button actions directly on the movieclip. Now, my first thought when asked about this, was “where do I start?”. So, I write this post for him and any other who can benefit from from it.


    Variables & functions

    First off i want to explain some scripting basics. When you code you will de dealing with variables and functions is some form or way, 99% of the time spent. So ill start by explaining the concept of these two things first.



    A variable is a reference to an object. A variable can be anything, it could be a number, a string of text, a MovieClip, a text field, a list… you get the idea. But to be able to use a variable you must first declare it. The way to declare is by deciding a descriptive name of what the variable represents, and add the declaration syntax var in front of it. Like this:

    
           var address = "123 Anystreet, 01234 Cooltown";
    

    We have now created a reference to the a string of text, and can access that it by referencing to the address variable. Like this:

    
           trace( address );
    

    This will print “123 Anystreet, 01234 Cooltown” without the quotes, to the Flash IDE output panel. This is all neat ‘n’ cool, but you cant actually do anything with variables without using functions. So on to that.



    A function is an action. A function is a block of code that will be executed every time the function has been called. Lets first create a function that will trace a message to the output panel. Like variables you have to create ( declare ) a function much in the same way, you think of a descriptive name for the function ( usually a verb ). Lets say we want to greet the world, the function would look like this:

    
           function greet()
           {
                  trace( "Hello World, I'm alive!" );
           }
    

    First we write function then the name, add “()” and place the code implentation of the function between the two curly brackets ( “{” and “}” ). Now that we have declared a function, we can now call it:

    
           greet();
    

    This will run the code inside our function, and print “Hello World, I’m alive!” to the output panel.


    Arguments & data typing

    Now on to arguments. A function can have arguments sent to it when the function is called. This is useful since we then can process different objects through the same code block ( the function ). Lets make a function that tells me what time it is in the output panel. Imagine the code for determining the time is somewhere else, and we are going to write the function that does the actual tracing to to output panel. So each time the new time has been determined, it will call our function and pass the new time as an argument. Like this:

    
           function displayTime( time )
           {
                  trace( "The time now is: " + time );
           }
    

    Now let’s try this out:

    
           displayTime( "10:24" );
           displayTime( "14:51" );
    

    When the code is executed, you will get to lines printed to the output panel “The time now is: 10:24″, and “The time now is: 14: 51″. We have now centralized the code for displaying the time in one function, and can call that function with different time arguments.



    The last basic concept i want to discuss is data typing. I think the easiest way to explain this is by first giving an example of a function that take two numbers as arguments, add them together and trace them to the output panel:

    
           function add( firstNumber, secondNumber )
           {
                 var total = firstNumber + secondNumber;
                 trace( "The total is " + total );
           }
    
           add( 5, 4 );         // Will output "The total is 9"
           add( 2, 3 );         // Will output "The total is 5"
    

    Ok, so we have a function that adds to numbers together. The way this function is written can open up for some weird results since we have not data typed anything. Imagine this scenario:

    
           var num1 = 5;
           var num2 = "Two";
    
           add( num1, num2 );   // Will output "The total is 5Two"
    

    Now, since we are tracing the result we can catch the error quite quickly, but imagine that our add() function is being used in some other code as part of a bigger operation. Since we have not data typed it, finding the error in a larger block of code can start to be quite hard. This is where data typing comes in. When you data type a variable you make certain that the variable only references one sort of object. You data type a variable by adding “:” and the class name of the data type you want that variable to contain, to the variable name. Here are a few examples:

    
           var num:Number = 5;
           var text:String = "this is some text";
           var list:Array = new Array();
    

    All these are legal declarations, however the next block of code will generate some errors ( and thus making you aware that you have a fault in your code):

    
           // Error: Array is not a Number
           var num:Number = new Array();
    
           // This is legal
           var text:String = "some text";
           // But this isn't
           var list:Array = text;
    
    

    In the same way you data type a variable, you can also data type an agrument to a function like this:

    
           function add( firstNumber:Number, secondNumber:Number )
           {
                 var total:Number = firstNumber + secondNumber;
                 trace( "The total is " + total );
           }
    

    Now the above function is much less prone to silent errors. If you at anytime pass any other type of data than a Number as an argument to the function you will get an error and you will be informed exactly where the error is occuring. Makes you a happier coder, trust me…



    There is one more type of data typing, and that is data typing a functions return value. Some functions can me set to return some data. When you use the keyword return the function will end executing its code and deliver the value of the object you wish to return. You declare the data type of a functions return value, by adding “:” and the class name of the data type before the first curly bracket. Like this:

    
           function add( firstNumber:Number, secondNumber:Number ):Number
           {
                 var total:Number = firstNumber + secondNumber;
                 return total;
           }
    
           var sum:Number = add( 5, 4 );
           trace( sum );
    

    Very often you will have functions that are not supposed to return anything, in this case you can omit data typing it’s return value, but if you don’t data type it, a person reading your code won’t know right away if the function was meant to not have a return value, or you simply forgot to data type it. Therefore it is a good practice to data type a non-returning function with :Void (AS2) and :void (AS3). Like this:

    
           // ActionScript 2.0
           function greet():Void
           {
                  trace( "Hello World, I'm alive!" );
           }
    
           // ActionScript 3.0
           function greet():void
           {
                  trace( "Hello World, I'm alive!" );
           }
    

    Thats it for the basics, now on to OOP.


    Object Oriented Programming ( OOP )

    Now that the basics of programming in ActionScript has been discussed, i would like to introduce the basics of OOP. Instead of me writing an essay on OOP, i want to direct you to a site which I used to introduce myself into the concept. This site, which has been created by Colin Moock takes you through the concepts of classes, methods, accessors and more, in a very easy-to-understand way. This tutorial example code is in ActionScript 2.0 but the main concepts are the same in both AS2 and AS3

    Here is the link: www.moock.org

    Popularity: unranked [?]

    TubeTheVote.com

    I mentioned in a previous post that I have been working on a new project, and TubeTheVote is finally up and running! This is the new direction Blogform is taking in presenting content.

    What is TubeTheVote you say? Well, TubeTheVote is a product that utilizes the new Blogform platform and is focused on the historic 2008 American Election. Tube The Vote is a unique compilation of the best content and debate on the internet about the 2008 election – blogs, videos, debates – presented in a single location. The publication is non-partisan and pays equal attention to – and pokes fun equally at – both John McCain and Barak Obama. Blogform has created partnerships with journalism departments at Michigan State University, Florida A&M and Texas University, where students are providing editorial content that is updated on a daily basis from now until the election in November. Try it out: www.tubethevote.com

    The opening page


    Now to the bit more geeky stuff :P Basically what you see here is our new AS3 magazine engine. This engine has been built from scratch by my former colleague Paulo Fierro in Flex, using the Cairngorm framework. What you see on tubethevote.com doesn’t look much like a magazine, but the only actual difference between our standard page-flipping principle we have been using up until now, and the “cover-flow” -like presentation used in tubethevote.com is just one class. Thats it! The enigne loads a renderer class depending on the setting in the backend.

    Now the renderer displaying the pages of a magazine in the cover-flow manner has been built from scratch by yours truly, using PaperVision3D. This is the first time I’ve actually used PaperVision3D in production, and it was GREAT fun. If you haven’t already noticed, the arrows aren’t the only way to navigate the site. You can actually navigate by clicking and dragging the background just like in the PicLens addon for Mozilla Firefox. Coding this was quite a hassle as my math skills have been deteriorating since high school, hehe, but i managed to pull it through in the end.

    Each page in the magazine has a few cool features, which I either built or helped build. Features like streaming youtube videos, displaying twitter feeds from search, quiz, and blog. Below is a selection of clickable screenshots of pages in tubethevote.

    Top Flop: Shows a set of videos for each day, one for Obama and one for McCain. The videos are either a “top” as in a favorable video about the candidate, or a “flop”.


    Twitter: Searches though twitter feeds, with a search term specified for that day.


    Well, i think that is it for now. As you might gather, I am very proud of this product, I have a lot of hours logged on the renderer, pages and updating and upgrading our new fabulous MagWerk Engine. Our clients will hopefully be using this great way of navigating through content in the future.

    Popularity: unranked [?]

    ActionScript 3.0 API’s

    Although i said my next post would be about Blogform’s new development path, i happened to stumble across a page containing list of 22 different ActionScript 3.0 API’s today. So since I often forget important links, and maybe someone out there would find this link helpful, here it is: List of 22 ActionScript 3.0 API’s. Basically this page lists up 22 useful API’s like the Adobe API’s, Away3d, Papervision3D, ebay API etc, enjoy!

    Popularity: unranked [?]

    New York, Barcelona
    & back!

    Been a long time since last post, but this summer has been very eventful, both personally and business related. Blogform has just expanded to the US of A, more precisely New York. Since most of our clients are american corporations, the company found it necessary to hire people in the states, so the time difference to the clients wouldn’t have such an impact on our workflow. We hired two new designers / actionscripters along with a PM and a few others, so my colleague Eirik and I where sent to New York in the beginning of August to show the people there the ropes.

    The view from my hotel room, at 22nd floor:

    I can describe very much of New York with one word: BiG! Everything there was big. Avenues with four lanes (and all one-way!), the normal size Starbucks coffee was half a liter, buildings with less than 20 floors are considered “small” etc. However, i was surprised to see a lot fewer big people than expected, hehe. Anyways, we had 6 nights there and alot of work to be done. Not only was i going to teach the new guys, but at the same time we had to finish of a few client projects before i was going on my week long vacation in Barcelona with my wife. Ergo i didn’t get as much time to explore NYC as i had hoped. But i know there will be a trip or two back there, in the near future.

    After the week in New York i flew via Oslo and picked up my wife for some shopping, eating and beach style RnR in Barcelona. A fantastic city. It has everything. Beachlife, nightlife, excellent cuisine, shopping streets, culture and history. Definitely going back there again.

    The entrance to our hotel room, spooky no?

    Comming back to work we had alot to be done, among a new project we have been working on named “tube the vote”. My next post will be more about this new direction of digtal based magazines we are undergoing. Very exciting!

    Lastly, I was at the first meeting of FUGN (Flash User Group Norway) this season, and it was good to see all the regulars attend. I was elected to the board (yay!) among a few others. Looking forward to spending some geek time with you all at Flash On The Beach this year.

    Well that’s it for now, will post again soon. :)

    Popularity: unranked [?]