Ben McChesney's Blog » Interactive

Helios Multitouch Table Top Now Available

Ben — Mon, 19 Dec 2011 04:04:05 +0000

I’m very pleased to announce that today Helios Interactive is releasing it’s first Open Source project ! Since I started at Helios Interactive one of my main initiatives from the beginning was to open source as many projects as possible to give back to the community. The Table Top project open sourced was originally an informational touch table . It is more conservative than a lot of openFrameworks apps but I learned a lot making it and I hope that it will prove useful to anyone learning Multitouch that wants to use openFrameworks. You can get the full source on github

Currently there are only Xcode project files but I will add windows code::blocks files soon.

This video makes use of a small library ofxPixelHitTest that works by drawing a separate input map to an frame buffer object and comparing pixel values to unique hexadecimal values stored inside each interactive object.

Some areas covered in this code that might be useful to others includes :

Scale / Rotate / Drag multitouch objects
Basic CMS system using XML
Custom Events and custom event arguments to handle interaction
Cross Fade class to easy handle cross fading ofImages
Heavy use of ofxTweenzor and sequencing animations for UI

Thanks so much for the awesome OF community for providing the following addons that make this possible :

OF libs:

 ofxNetwork

 ofxOsc

 ofxXmlSettings

Memo's libs ( https://github.com/memo )

 ofxMSAInteractiveObject

 ofxMultiTouch

 ofxMultiTouchObject

 ofxSimpleGuiToo

Arturo's libs ( https://github.com/arturoc/ )

 ofxTuioWrapper

Nick's Libs ( https://github.com/NickHardeman/)

 ofxTweenzor

Ben McChesney's Libs: ( https://github.com/benMcChesney/ )

 ofxPixelHitTest

SmallFly's Libs :

 ofxMultiTouchActions ( http://code.google.com/p/smallfly/downloads/list

FFT Visuals in Open Frameworks

Ben — Sun, 18 Sep 2011 23:42:29 +0000

I had been wanting to do some sound driven animations and visualizers for a while but had always managed to put it off for one thing or another. I had looked at some options and ended up using ofxFFT addon by Kyle McDonald. After quickly looking through his example was able to create some of my own visuals and customize the visualizer settings at runtime. Below is the result of my first stable iteration :

The video allows you to see the animation http://vimeo.com/29234695

But how does it work? There are several options you can take for sound analysis. The simplest example would be the audio input example provided with openFrameworks 007 which provides you with stereo channels of audio and the scaled average.

But this wasn’t enough information. Sure both input channels and the average values are good starting point, but I wanted to be able to have bass control one animation, and have the higher registers control another graphic. I kept looking and came across this post on the openFrameworks forums, which detailed the ofxFFT addon created By Kyle McDonald ( http://kylemcdonald.net/ ) available here : http://code.google.com/p/kyle/downloads/list

This was a solution I could use! I looked at Kyle’s example and started to play. The addon uses FFT method or the Fast Fourier Transform. This process ( which is more detailed here : http://www.dspguru.com/dsp/faqs/fft ) allows a large set of data, like waveform sound data, into a smaller set of data which we can work with. One of the first issues I ran into was that lots of music I tested did not have a high range. I needed a way to limit my visuals to only work within certain ranges. Below you can see that the ranges of each circle animation are clearly marked making it easy to setup on site, tweak settings to music, and save them for the show.

Through testing I found that classical music like Gustav Holst : http://grooveshark.com/s/Mars+The+Bringer+Of+War/1t79vR?src=5 or Dubstep such as Dodge +& Fuski : http://grooveshark.com/s/Guettastep/3Hi4WY?src=5 worked really well for testing out sound and ranges. Rock and pop seemed to be very limited to the bottom register. This is just a first iteration but I’ll continue to work on it and improve the tool. I included project files and tested it for CodeBlocks on Windows and xCode on OSX Snow Leopard. All the source code is available on my github at : https://github.com/benMcChesney/ofFFtPlayground

Attraction / Repulsion Pixels in Open Frameworks

Ben — Mon, 04 Jul 2011 07:42:25 +0000

As part of learning Open Frameworks I’ve been porting over simple examples from other languages such as actionscript or processing. This example is inspired from the post the RGB Sinks and Spring post from flashAndMath.com. The code is actually much simpler in open frameworks because of overloaded operators.

Short example I made as part of learning open frameworks. I will post a video tutorial detailing through my process. Code is available on m github : https://github.com/benMcChesney/PixelForces

I’ll be using xCode OSX FAT Release 0062. I use xCode because I find it much easier to use over Visual Studio Express for importing external addons and libraries. If you are new to open frameworks development I strongly recomment visiting http://www.openframeworks.cc/setup for a detailed view on how to get setup with your IDE of choice. The Open Frameworks forums are excellent for solving almost any compiler specific problem you might be having.

First we’ll need to create a new example to work with. Copy the “emptyExample” inside YOUR_OF_Directory/apps/examples/emptyExample and rename it to something cooler sounding like : “PixelForces” . Next step is to find a picture to use as your the color for particles. Any picture will do, kittens, godzilla, you name it! The resolution of the picture I chose was 512 × 391. Once acquired place this file inside bin/data so that the app will be able to find it easily.

Create a new header file and call it Particle. To start out we will create a basic empty constructor and give it three properties.

1 ) OfColor color – to know what color to draw

2 ) ofPoint position – for where to draw it.

3) ofPoint velocity – the speed that each particle will move every frame.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//
// Particle.h
// PixelForces
//
// A Simple Particle Class
//
#ifndef _PARTICLE
#define _PARTICLE

#include "ofMain.h"

class Particle
{
public :
Particle() ;
Particle( ofPoint _position , ofColor _color )
{
position = _position ;
color = _color ;

}

ofPoint position , velocity ;
ofColor color ;
};
#endif

Now navigate to the testApp.h and be sure to include Particle.h at the top of the file.

1	#include "Particle.h"

Then we will have to add in the variables needed for this example.

1
2
3
4
5
6
7
8
9
10
11

ofImage image ; //image to load
int sampling ; //pixels to skip
vector particles ; //vector to store pixels
int numParticles ; //Number of particles

//Spring and Sink Factors
bool springEnabled ; //toggle whether particles return to their origin
float forceRadius ; //radius of repellent/attraction force
float velocityDampingFactor ; //damping factor to slow the particles down
float springFactor ; //how much the particle "springs" back to origin
int cursorMode ; //whether the cursor is attracting or repelling

Now if we navigate to testApp::setup( ) inside testApp.cpp we can see how we load in and image and get the pixels we need. This code is from an article by Daniel Shiffman on the processing learning site http://processing.org/learning/pixels/ . Be sure to check it out and lots of other great lessons that are great examples to play with. The image is stored as an array of unsigned chars for the RGB channels of each pixel and occupies 3 indicies per pixel. If our image had transparency it would be RGBA and each pixel would take up 4 indices.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

void testApp::setup()
{
//Set the background to black
ofBackground( 0 , 0 , 0 ) ;
//load our image inside bin/data
image.loadImage ( "grandTetons_small.jpg" ) ;
//if the app performs slowly raise this number
sampling = 4 ;

//Retrieve the pixels from the loaded image
unsigned char * pixels = image.getPixels() ;
//store width and height for optimization and clarity
int w = image.width ;
int h = image.height ;

//offsets to center the particles on screen
int xOffset = (ofGetWidth() - w ) /2 ;
int yOffset = (ofGetHeight() - h ) /2 ;

//Loop through all the rows
for ( int x = 0 ; x < w ; x+=sampling )
{
//Loop through all the columns
for ( int y = 0 ; y < h ; y+=sampling )
{
//Pixels are stored as unsigned char ( 0 255 ) as RGB
//If our image had transparency it would be 4 for RGBA
int index = ( y * w + x ) * 3 ;
ofColor color ;
color.r = pixels[index] ; //red pixel
color.g = pixels[index+1] ; //blue pixel
color.b = pixels[index+2] ; //green pixel
particles.push_back( Particle ( ofPoint ( x + xOffset , y + yOffset ) , color ) ) ;
}
}
ofSetFrameRate( 30 ) ;

numParticles = ( image.width * image.height ) / sampling ;
}

Next we have to change the draw( ) function to loop through a vector of particles. In c++ vectors are stored as a linked list which is a very quick way to iterate through a list of items.

Coming from Actionscript it took me a while to wrap my head around pointers. You can read more about them here http://www.cplusplus.com/forum/articles/9621/ . For now just know that pointers are used to reference a location in memory similar to how an object works in OOP.

1
2
3
4
5
6
7
8
9
10
11
12
13

void testApp::draw(){

//Create an iterator to cycle through the vector
std::vector::iterator p ;
for ( p = particles.begin() ; p != particles.end() ; p++ )
{
//access the color via the pointer p
//when using pointers you have to use "->" syntax instead of "."
ofColor color = p->color ;
ofSetColor ( color.r , color.g , color.b ) ;
ofCircle ( p->position.x , p->position.y , 1 ) ;
}
}

Next let’s create a simple update( ) function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

void testApp::update(){

//Create an iterator to cycle through the vector

std::vector:iterator p ;

for ( p = particles.begin() ; p != particles.end() ; p++ )

{

p->position += p->velocity ;

}

}

When you run the example it should look like this !

Now we have particles but they aren’t moving! Let’s add a variable of type ofPoint velocity to our particle class.
Inside the constructor let’s set it to a random number like so

1	velocity = ofPoint ( ofRandom ( -5 , 5 ) , ofRandom ( -5 , 5 ) ) ;

Now our particles are moving but sort of all over and it’s not very cool. But this is a starting point! Let’s add two more ofPoint variables to our Particle class

1
2
3

ofPoint acceleration ; //smoothing applied to velocity

ofPoint spawnPoint ; //original location to line up the picture

Inside the constructor set spawnPoint to the argument ofPoint _position. This will be used for the particles to seek back and realign after some time. Inside testApp::setup( ) we can now set the other variables for the forces.

1
2
3
4
5
6
7
8
9
10
11

//Set spring and sink values

cursorMode = 0 ;

forceRadius = 45 ;

velocityDampingFactor = 0.85 ;

springFactor = 0.12 ;

springEnabled = true ;

Next we will have to make some changes to our update function. For simplicity we’ll use the mouseX and mouseY as the center point of our force. The first step is to create three variables to use for checking values within looped values.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

ofPoint diff ; //Difference between particle and mouse
float dist ; //distance from particle to mouse ( as the crow flies )
float ratio ; //Ratio of how strong the effect is calculated by: 1 + (-dist/maxDistance) ;
const ofPoint mousePosition = ofPoint( mouseX , mouseY ) ; //Allocate and retrieve mouse values once.

//Create an iterator to cycle through the vector

std::vector;::iterator p ;

for ( p = particles.begin() ; p != particles.end() ; p++ )

{

ratio = 1.0f ;

p->velocity *= friction ;

//reset acceleration every frame

p->acceleration = ofPoint() ;

diff = mousePosition - p->position ;

dist = ofDist( 0 , 0 , diff.x , diff.y ) ;

//If within the zone of interaction

if ( dist < forceRadius ) { ratio = 1 - dist / forceRadius ; p->;acceleration -= ( diff * ratio) ;

}

if ( springEnabled )

{

//Move back to the original position

p->acceleration.x += springFactor * (p->spawnPoint.x - p->position.x);

p->acceleration.y += springFactor * (p->spawnPoint.y - p->position.y) ;

}

p->velocity += p->acceleration * ratio ;

p->position += p->velocity ;

}

Now the for loop has gone through a fairly drastic change. There’s a default ratio of 1.0f so that particles outside of the zone of influence do not get affected by the mouse. Then we are applying friction to slow down the particles’ velocity for a more lifelike and settling effect. The desired velocity of moving away for each particle is calculated by subtracting the mouse’s X,Y with the particles X ,Y and getting the distance. By adding these same two vectors we gain the desired vector to steer toward the mouse. We adjust the ratio based on how far away the particle is and then if springs are enabled we add the desired velocity to the acceleration. The overall acceleration is then modified by the ratio and we offset the position.

Let’s add some debugging output text to keep track of the application. Skipping down to the bottom of testApp::draw( ) ;

1
2
3
4
5
6
7
8
9
10
11

ofSetColor ( 255 , 255 , 255 ) ;

string output = "S :: Springs on/off : " + ofToString(springEnabled) +

"\n C :: CursorMode repel/attract " + ofToString( cursorMode ) +

"\n # of particles : " + ofToString( numParticles ) +

" \n fps:" +ofToString( ofGetFrameRate() ) ;

ofDrawBitmapString(output ,20,666);

Here we are building a long string and creating newlines by using the “\n” character. Then with a simple call to ofDrawBitmapString( string , x , y ) ;

One more bit of code for the keyboard listeners to toggle modes and make this more fun

1
2
3
4
5
6
7
8
9
10
11
12

switch ( key )
{
case 'c':
case 'C':
cursorMode = ( cursorMode + 1 > 1 ) ? 0 : 1 ;
break ;

case 's':
case 'S':
springEnabled = !springEnabled ;
break ;
}

Attraction and repulsion! The only thing that could make this better would be more pixels to play with. Looking through some examples in the ofxKinect github I saw how openGL was used to draw individual points of an image in real time. By changing the draw function I was able to increase my sampling by 2x and still had a good frame rate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//Begin the openGL Drawing Mode

glBegin(GL_POINTS);

//Triangles look Cool too

//glBegin(GL_TRIANGLES);

//Create an iterator to cycle through the vector

std::vector::iterator p ;

for ( p = particles.begin() ; p != particles.end() ; p++ )

{

//get the color and draw a point

glColor3ub((unsigned char)p->color.r,(unsigned char)p->color.g,(unsigned char)p->color.b);

glVertex3f(p->position.x, p->position.y , 0 );

}

glEnd();

The code for this is on my github and available here The next step is to create some sliders, using Frame buffers objects and make some sound analysis.

Kinect Hacks

Ben — Tue, 22 Feb 2011 08:24:21 +0000

I’ve been tinkering with the Kinect and I wanted to release what applications I had been able to create. I was inspired from other people’s examples and forum posts and wanted to contribute back what I could. All the examples are on my github to ensure that I’ll be able to easily update them in the future. The first set of examples were all completed using open frameworks a c++ creative coding framework.

ofxSoundDraw
This example was covered more in depth in a previous blog post. Using a local TUIO server to track hands it plays a sound byte if there’s enough movement in a designated zone.

ofxKinectBox2D

This is the first example I got running with box2D. The circles are simple rigid bodies and when two hands are present it spawns an attraction force at the midpoint between both hands.

FireIce

Taking the above example a little farther. Particles have two types : fire + ice. When opposites combine both pieces are rendered inert.

ofxBounceSound
Similar to the above example, but crashing groups of particles generates a piano sound.

ofxUserMask
Using openCV and .mov renders it tracks a user and draws a point cloud field. The idea was that at a concert or other event to dynamically mask that movie to a user.

ofxKinectSequence
My latest Kinect + open frameworks project. I began by looking back at my sound example and decided to expand it’s functionality. Now the app features 4 tracks and loops allowing the user to create a soundscape. The tracks and rhythms are all preset now in code but I will continue to update it to make it a more robust system.

OpenNI_Unity3d

This example uses OpenNI, a middleware layer ( between software and hardware ), for natural user interaction. A module of this system is NITE skeleton tracking which allows for some great, accurate avatar interactions.

The most current source of information regarding this driver is this forum post : http://forum.unity3d.com/threads/67982-Kinect-plugin/

BernardFrancois has graciously provided this in-depth walkthrough of how to install the drivers on page 4. Also posted below :

In general I found windows installation much simpler than the command line route I had to go through on OSX.

”
Installing the kinect driver, OpenNI and NITE SDK
* download the OpenNI binaries from http://www.openni.org/?q=node/2 (in this case: OpenNI 1.0 Alpha build 23 binaries for Win32)
* download the NITE SDK from http://www.primesense.com/?p=515 (in this case: NITE 1.3 Beta build 17 SDK for Windows)
* download SensorKinect from https://github.com/avin2/SensorKinect
* install OpenNI
* install NITE SDK and use the following free license key frop openni.org: 0KOIk2JeIBYClPWVnMoRKn5cdY4=
* unzip the SensorKinect file
* connect the Kinect device
* open the device manager (Start > Run… > devmgmt.msc) and verify that ‘Xbox NUI Motor’ is in the list (but with an exclamation mark)
* Right-click on the device and choose ‘Update Driver’ and make windows look for a driver in the avin2-SensorKinect-b7cd39d\Platform\Win32\Driver folder. This will install a device called ‘Kinect Motor’.
* reboot your computer when asked
* After rebooting, two new devices will be found. Repeat the same process by pointing the wizard to the driver folder. One of the two new devices will fail to install (the one for the audio), the one that will succeed will add a new device called ‘Kinect Camera’.
* install the executable the zip file in the folder avin2-SensorKinect-b7cd39d\Bin
* run C:\Program Files\OpenNI\Samples\Bin\Release\NiUserTracker.exe to test if everything works
* if it fails, run C:\Program Files\OpenNI\Tools\vcredist_x86.exe
installing the kinect unity example
* download the official UnityWrapper from OpenNI from https://github.com/OpenNI/UnityWrapper
* make sure Unity3 or Unity3 pro is installed

” – Quoted from user ‘BernardFrancois’ Unity3d Forums

Unity3d NITE Destroy City from Ben McChesney on Vimeo.

Currently the NITE wrapper for unity3D only works on windows. NITE was recently ported to Mac with the help of Roxlu ( roxlu.com ) and an example is included with openFrameworks 0062, but it takes a bit of configuring to get it up and running. I included a few prefabs in my scene to make it more interesting than destroying cubes. Fire hydrants that spurts Water, Lampposts that short-circuit, and a building with destructible parts make the scene much more fun.

Kinect Hacking has been a fun and successful hobby. There are some real possibilities integrating it with unity3d, and I think that openNI and NITE will open up even more possibilities. I found myself wanting to detect if hands were open or closed for ui control: otherwise user input is a little limited.

Open Frameworks + Kinect + Sound

Ben — Mon, 13 Dec 2010 03:39:12 +0000

While attending FlITC San Francisco I saw Theo Watson talk about his work with the creative coding libraries known as open frameworks. While I didn’t have very much experience in c++ besides a couple of simple test apps to learn openGL, I thought it would be a good experience to learn a language completely different from actionscript. Below is the result that I after a very productive day of tinkering:

Kinect Sound Experiment with Open Frameworks from Ben McChesney on Vimeo

What is openframeworks?

I think the most accurate term I’ve heard to describe it is “processing on crack”. It shares a lot of similarities with processing including an easy and intuitive openGL wrapper, powerful video / image / sound classes , and lots of examples online. To get started visit the openframeworks main page for whatever your OS might be. I used be using xCode on Mac so I can only be helpful for the particular quirks I found working with xCode. But here is the cliffnotes version of what I went through:

Download + install xCode for mac

Download openframeworks FAT 0061 and unzip it my work folder ( though it will work anywhere )

Compile any example project under openframeworksFolder/apps/examples/ to make things easier for yourself and to get developing quickly. Whenever you start a new OF project put it in this folder so that it can easily find the necessary libraries.

Time to start playing with the Kinect. The latest code is available at Theo Watson’s github I then simply copied that downloaded folder into my openframeworksFolder/apps/examples/ and double clicked the xCode project.

Running it looked like this :

"Looking good Tex"

Neat! Let’s see what’s happening here. There’s the Depth Feed , which is the result of the infrared projector, The normal webcam feed, openCV addon which detects blobs ( hands ) and is similar to how infrared touchscreens work. The 3D DOTS is an interesting effect using the depth to create a 3d image with circles.

But what’s next? Well after digging around the OF forums and some googling I found a TUIO Kinect example.

The TUIO library is a popular choice for touch screens because it provides lots of helper functions to track active blobs, the history of those blobs, speed , size, almost anything you could want. But with the meant specifically for Kinect I began to wonder what I could do with it.

While looking through the TUIO documentation I found the calls to get the history of the path. And with this code block below started to get an effect I liked:

Feeling good about my circle trail with a little bit of gravity I looked at some of the openframeworks examples to see what I could combine together. After looking through the sound examples the choice seemed easy. The first step was creating a sound wave, and then playing a .wave file and controlling the speed to change pitch.

Yes, you will look like a fool playing with a kinect. But who cares?

But what’s next? Well sound is cool but I want it to be more… fun. But after a quick look through the contributed addons Box2D looks like a good contender for some physics based awesome.

Source code is available here for this project

Lastly I just wanted to give a big thanks to all the groups and people who worked on things in their free time and open-sourced it.

The Open Kinect project and the libfreeKinect driver for everyone to use.

Theo Watson and the rest of the open frameworks community for providing increasingly faster, cooler examples using the kinect. If you haven’t join the forums and see what people are building.

Martin Kaltenbrunner for providing the TUIO Kinect examples making it possible to make touch screen functionality from 8 feet away.

Loading a Collada file in Away3D

Ben — Tue, 24 Aug 2010 06:05:32 +0000

Recently I had been doing a little more work in Away3D and I needed to use an object that was more complex than a preset primitive. After looking through some of the Away3D examples I tried bringing in my own model from Cinema4D. I quickly found that setting up and exporting your file correctly is half the battle. In this tutorial I’ll explain how to create a primitive in cinema4D export it correctly for Away3D inside flash. Source code is available at the bottom. Use the right/left arrows to switch models and the up/down to change the texture. Below is the final product:

It all starts in Cinema4D. I’m using Cinema4D R11. Create a new project and start with a tube primitive. Below are some of the parameters I used

Tube Properties

Then select the primtive and hit the “C” button. This will convert it to a polygon object. Your object manager should now look like this:

Now we will add a new material. I downloaded a metal texture off of CG Textures and reduced it’s size to 256 x 256. In a 3d system inside flash the two biggest things that can quickly bring your project down are the number of vertices in your model and the dimensions of your texture. Some general numbers are that a scene can support around 6,000 vertices give or take. So it’s great for simple scenes but for anything larger you might want to try another 3d environment like unity3d.

and when you get prompted to copy a version of your texture file to the textures folder hit yes, it will save some hassle later with the file path. Also be sure to rename the texture to something recognizable like “RingMat” so that it can be identified later.

Now switch over to vertices mode and hit apple + a to select all the points. Then select functions > triangulate. In Cinema4D will default to drawing quads or units of 4 points. Inside Away3D it draws with triangles so we need to make this adjustment.

Now we switch over to BodyPaint UV Edit where we can quickly adjust the UV Map so it doesn’t look quite so hideous. If you are new to UV mapping and 3d in general UV mapping allows you to customize and control how your 2d texture appears on geometry and shapes in 3d. UV Mapping is an art in itself and can take weeks to do perfectly. For this exampl and for other simple tasks the UV Editor inside Cinema4D can take a lot of the work out of it.

Now select the UV Mapping wizard.

Now just have to go through all the steps of the wizard.

We will be using the object option.

There are multiple ways you can map coordinates to a texture. Cubic Mapping will work fine in this case. Cubic maps generally make simpler uv coordinate systems. Angle mapping by default will have a collection of smaller more precise parts.

Now select the color channel until it has a – through it’s check box. Otherwise the UV Wizard will overwrite the texture that we already set. If we had a more complicated texture scheme we’d want to map other channels too. But for now color will suffice. Now switch over to polygons mode. Hit cmd + a to select all the polygons. If the selected polygons are orange that means their normals are facing the correct direction.

For the non initiated when a 3d renderer draws all the vertices it draws them in order and this order determines which way it faces. The flat solid part drawn between them is also called a face. A 3d engine does not render faces that do not have their normals facing the camera. So they save on resources by only rendering half of what we need too.

Now the good part: we export! In this screenshot is also a rendering of what the new UV Map looks like.

Export the file in into your project. You will need to also copy the /tex folder into wherever you export your .dae ( collada ) file. This is because inside the Collada file it specifies a URL to it’s default material. Open up the Collada file in your preferred text editor. TextMate or BBEdit are popular choices: I’ll be using BBEdit.

A Collada file is basically a large XML File with specific nodes for a 3d scene including vertices, UV Coordinates, and texture parameters. Inside there is the that specifies the URL of a UV texture. If you are using Cinema4D 11.5 it will provide an absolute url but you can change it to relative like the screenshot above.

Inside the you can spot the texture we named inside Cinema4D. We will use “ID3″ inside Away3D to get the material info we need.

Now onto the code. The code is written with a .fla and a document class but it will work as pure actionscript. There is nothing linked in the library or any other dependencies. When I use Away3D in a project I usually place all the 3d information inside a seperate class but here the document class should be fine. I always make a createAway3D function()

In this function we create a test object to make sure our scene renders. Away3D is composed of a few basic parts. First we have the View3D: think of this as a sprite that will hold and render your 3d scene. The Camera is how the scene will be viewed: it’s the window to your 3d world. Views are also comprised of scenes which is a holder for all of your 3D Objects. The last component of a view is the renderer: this is what will actually rasterize your 3d scene into a 2d image every frame. In Away3D when you create an 3d Object you pass in a separate object with all the properties that you want initialized. The x + y properties dictate where the center of the scene is. The view will automatically be full stage size.

To call the collada file you create a new Loader3D class and use the static Collada.load() method. In the document class you can see the onLoaderSuccess Method but it’s fairly straight forward. In a collada file we have to access the material through the MaterialData class. Here we plug in the ID3 that was identified in the Collada .dae file.

One last concept that I used in this code is Bitwise operations. Bitwise operations are quicker ways of doing simple operations. There are a whole slew of bitwise operations that can be quickly googled for. This bitwise operation will cycle through all the items in the array and when it reaches the end will return to zero.

That’s it! Full Collada model support. If you are having trouble seeing your model make sure that your normals are correct and try adjust the size drastically. Sometimes my models come out with .25 , 5 , or 90 for the scale. It’s all relative. The source code is available here.

Robots! Animating Text with Actionscript and XML

Ben — Wed, 07 Apr 2010 00:52:37 +0000

source code is available HERE

Recently I decided to tackle a challenge posed by Firstborn in New York on behalf of the Society of Digital Agencies to students at RIT . The challenge: was to animate type completely with Actionscript 3.0. This text had to be loaded and configured using XML, and XML only. Having previously done a text explosion effect in papervision3D I knew that I wanted to do something a little different. I finally decided on everyone’s favorite thing about New Zealand- no not Lord of the Rings. Flight of the Conchords! Being the tech geek that I am their song “Robots” seemed perfect for this assignment, plus it was only two minutes long.

The XML was broken apart into
tags which symbolizes a single line of lyrics. Feature creep got out of control on this quickly as I quickly wanted to be able to set the font, color, start position, end position, whether the positions were relative- just to name a few.

a type line might look like this:

The distant future

other attributes included were changing the background gradient color, and a duration offset that was used to keep two lyrics on the screen at once.

Toward the end of development I realized that I needed a way to embed the fonts so that they were viewable on all computers. After googling and researching several different methods I simply found many of them to be very cumbersome. I couldn’t find any solutions that allowed me to embed multiple size fonts inside a single font.swf. Imagine my frustration when I wanted to embed 12 different font sizes that were key to my animation. So: in not the *best* coding practices I simple included two dynamic text fields and grabbed their font on the fly. Long ago I learned that by placing a space character ” ” inside a dynamic textfield it kept all of it’s textFormat properties, this made coordinating with designers much easier on a smaller page-by-page basis.

This magical method allowed me to quickly embed the font by using these pre-embedded textFields and go about my day.

I posted the source code so anyone can look through it and see exactly how I pulled the XML data and loaded fonts. Unfortunately I cannot zip up the song to go with it because the Flight of the Conchords own the intellectual property, but you can view the final result below.

WordPress is blocking the the .swf file from loading external files so you can view this here

source code is available HERE

WordDNA: Twitter + Flickr + Away3D

Ben — Mon, 15 Mar 2010 15:46:52 +0000

Source Code is available here

Recently I had been wanting to do some more interactive 3D type of projects. I wanted to create something beyond just a pre-rendered sequence that simulated camera movement. I have previously been using papervision3D but wanted to expand my knowledge and check out the competition. Papervision X has been long expected but with Ralph Hauwert Unit Zero One leaving the team I thought it was time to move on. Away3D was very highly recommended by my colleague Kyle Beikirch for it’s more frequent updates to SVN and ease of interactivity. Since I was exactly sure what would be interactive when I started: I gave it a shot.

In what I did there wasn’t really a huge difference between the images but I did like how Away3D uses associative arrays much like Greensock Tweening platform instead of traditional constructors. If I didn’t want to pre-render as many assets as possible I would need an internet source to grab them from. I thought that combining the antics of twitter with somewhat related photos could yield some interesting results. At first I grabbed XML from the twitter time line, but I wanted to have more control over my results. I used the Tweetr Twitter API, and got a lot of code inspiration from Lindsey Burtner’s Word Feeder. Lindsey helped me last year when I first began mashing together the last.fm API, and proved an invaluable resource, so props to her.

Let’s dive into some of the key functions that make this work:

Once the Flickr and Twitter data has been collected we then insert it into a 2D MovieClip and prepare it for 3D.

Dynamic Draw of Movie Clip to Bitmap Material

We prepare it for 3D by simple flattening it with transparency.

Document Class creates Bitmap Material

I wanted to organize the planes in a Helix and found this post from Lee Brimelow’s blog and modified it for my needs. The by rotating the scene 360 degrees we get this cool spin effect for the zoom out.

Make a Double Helix our of Shapes

Now we need a way to navigate between planes, at first it was very linear but that got boring quickly. So I added in a new random index each movement to make it feel more exploratory. Adding a mouse event to planes would have been the next logical step to give users some control.

Generating a Random Index from an Array

Now the fun part: the camera. First we get the distance to to the next target and tweak it so that that camera movement is smooth for all distances.

The Camera has two tweens:

1) To move away from the plane randomly around it in 3D space

2) To move towards the new target

We change the focus of the camera by tweening an empty displayObject3D this would be our “null object” in 3d or After Effects.

The bezier gives the tween a nice smooth and organic feel, something that is lacking with a lot of fully 3d sites.

The newY just calculates which direction the camera should swoop in depending if the target is above or below it.

Moving the Camera

We save the initial values of our current target so that we can return it to it’s rightful place the user is done looking at it. In our tweenCameraDone() function we save the coordinates of the camera in case we need to reset it.

Moving the Camera pt 2

That’s it! I had fun making it and mixing interactivity and 3d Camera. Play with it and let me know what you come up with!

Source Code is available here

Some Color Matrix Fun in Actionscript 3

Ben — Sat, 13 Feb 2010 19:51:42 +0000

I was reading Lee Brimelow’s Blog ( http://gotoandlearn.com/play?id=63 ) and was having some fun playing with effects. While I was trying out a few different solutions to see what the effect would be. The problem was having to continuously recompile my flash movie to see the changed effect. A few numeric steppers later I was able to make a this little applications that spits out the colorMatrix Filter code.

Infinite Puddle:

Have fun and share your results!

But first: How Does the Color Matrix Filter work? The API Doc can be read here. But is creates a matrix that alters each pixel’s color channel.

This is called an "identity matrix" and it will result in no color change.

Each channel is multiplied by the Red, Green, Blue, and Alpha channels and then offset by the last argument in each row.

Now the code I used was directly based off of Lee Brimelow’s code:

Basic variables needed to create effect.

It only takes three variables to achieve this effect:

A Sprite Holder of what to affect
Blur Filter to create spill-off effect
Color Matrix Filter to apply for Color

And then inside an Event.ENTER_FRAME you add this code:

Draw the sprite, apply blur and color filter

and voila cool trails! Don’t believe me? Here are some examples I was playing around with:

Lava Lamp Looping Fluid effect :

Effect creating Lava Lame Ripples

Day Glow Trails

Exploding Trails

Oh yeah TEXT? My name is Leo Wong and I say BOOM! Papervision3D Text Explode Sample

Ben — Fri, 18 Dec 2009 23:30:26 +0000

I was in the lab yesterday and saw my friend animating text and 3D and it did not seem very appetizing. I really regret having to do tedious time-consuming things by hand. If there is ever a procedural way to generate or simulate something I’m willing to try. So I put together this little example.

*UPDATE*

I was able to get the zDepth working by applying simple blur filters to the bitmaps of the BitmapMaterials inside papervision3D. I also added in an input text field so that users could change the text without having to recompile. I have some bigger ideas for this down the road, like sequencing camera tweens between each letter. And exploding a whole paragraph word for word. I had some trouble with making the letter interactive, but it’s always been a bit of a pain to get events working with papervision3D. But for now: I’m happy where it is. The code is extremely well documented and if you have any questions just shoot me a line at : ben.mcchesney@gmail.com

The update source code is located here

Click on my name to get the explode effect, and click again to revert to the whole word.

First I created a sample using just 2d MovieClips in Flash. Using the text of a dynamic textField on the stage it breaks down and seperates each text into it’s own textField with it’s own movieClip container. By the character’s inside a movieClip I was able to apply TweenLite’s blurFilter and fake depth of field, by checking the zDepth of the letter

But this solution wasn’t as appetizing. It lacked the interactivity that I was trying to emulate. I wanted to be able to explode the text and explore the wreckage. The Flash player 10 also has an issue with z-sorting. Since all of the 3d is just a raster illusion the zDepth is fake. If a child that has display index than another child with a lower z-depth the illusion is broken. So I could either write my own methods to parse through each array item and update the displayList constantly or I could go in a different direction.

.I was going to create a version of textExplode using an actionscript 3D api : Papervision3D (Papervision3D Site) . In papervision you have to create a small plane for each letter and draw a bitmap of it. You then take this bitmap and apply it to the geometry of the plane.

By creating a bitmapData object to draw the movieClip we can cast it as a BitmapMaterial and apply it to a plane.

I had been used to the old version of papervision3D which meant constructing a scene with viewports, cameras , renderers, and scenes. But in papervision 2.0 by simple extending the BasicView Class, all of these assets are extendable for your connivence. The result was a quickly developed, dynamic 3d text explode code set.

Another different technique I used was the use of Vectors. Vectors are a new data type in Flash Player 10 and are essentially arrays with of one and only one data type. This allows for strict data typing in for all array function increasing performance. It’s less noticeable in this example, but in a physics simulation where it’s stepping through each particle’s force application every frame. The increased limit of particles or general smoothness would be more obvious.
More information can be found on Mike Chambers Blog : here

The next steps are to apply depth of field by checking z-depth and being able to change the textField while the swf is running. I would also like to increase the interactivity by being able to focus and zoom to certain letter and really get the exploration feel. Another change that’s on the to-do list is a second stage breakup of the letters bitmaps into tiny triangles or squares for more fodder to explode.

I’ll keep posting as I get farther along and make it more and more extensible.