Ben McChesney's Blog » tutorial

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.

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.

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

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.

Cinema4D Projectionman Tutorial

Ben — Mon, 20 Apr 2009 23:44:48 +0000

I found a lack of resources available to learn cinema 4D’s new camera mapping module, so I played around with it and created a tutorial so that others could see it power and ease of use.

1.Take a picture of a hallway.
a.Hallways are a good starting point for camera mapping, simple geometry to
project onto itʼs essentially 5 cubes: ﬂoor, ceiling, left wall, right wall, and the end
of the hallway.

Rendered QT Movie

Project Source Files

2.I ran some adjustment layers to stylize the photo a little bit

b.ﬁrst I ran a black and white ﬁlter over it.

c.Then a hue/saturation layer to make it seem a little darker and creepier, I turned the
opacity on the adjustment layer down to get a more subtle effect than just colorizing
the layer.

d.a simple curves layer to bring out the shadows just a little more
e.duplicate the original photo and set the blending mode to overlay, this produces a
night effect for what weʼre going for a creepy hallway.

2.Now that we are done adjusting the photo save a of the photograph without layers
and bring that into photoshop.
b.split the photograph into layers based on the ﬁve peices of geometry that we will
be projecting this on, naming layers is important once we get into cinema.
ProjectionMan has the ability to read alpha channels so masking will work just
ﬁne. Save this PSD ﬁle with layers to something you can remember like
“hallway_brokenup.psd”

3.Now into cinema4D. The ﬁrst thing weʼre going to do is add a doodle object you can
do this via the menu tools > doodle > add Doodle Frame. Under load bitmap under
Doodle Object properties > then load the PSD broken up into layers.

4.Add a visibility tag under cinema4D tags and lower the visibility a little bit so you can
see the 3d viewport.

5.Alright now a little explanation as to how camera mapping works. Essentially you are
using a stationary camera to “project” textures onto simplistic models, allowing you to
do simple slow camera movements.

6.So we create ﬁve cubes and label them: ﬂoor, ceiling, right wall, left wall, and
backpane. Rotate and scale each cube until they visually line up with the walls in the
photograph. Donʼt worry about getting them exactly just yet weʼll have to do tweaking
once we project textures. Create a camera and position it so that it lines up with the
doodle object, this is camera weʼll be using to project textures. Here is the geometry I
came up with just by eyeballing it.

7.Now for texturing, add the PSD ﬁle to the luminance channel.

8.Apply the texture to any of the cubes and under projection select Camera Mapping
and select the “CameraMap” camera we created. Under size X, Y click calculate and
that will project the material at the correct resolution allowing for a little more
movement and detail.

9.Under window select “Projection Man” to bring up the new UI for Cinema R11. Drag
each of the cubes under the PSD, under the Camera projection. Select the correct
corresponding layers with their alpha channel IE backPane (cube) should be
assigned backpane (PSD layer), etc etc. Weʼre loading the luminance and alpha
channels for this example.

10. Now render a scene so we can see how everything meshes together, if there are
black streaks near the edges try readjusting the height, width, and depth of each
cube, surprisingly I found that the depth of a cube has the biggest impact in getting
those “stretch marks” around the edges to disappear. Because camera mapping
rendering is so quick, this is actually a relatively painless to make lots of little
adjustments and keep re-rendering the scene. Here is an example of stretching, this
was ﬁxed by decreasing the width of the cube.

11.Now for the animation:
duplicate the camera mapping camera and rename it “moveCamera” or
something similar. Now weʼre just going to animate this camera slightly over 180
frames to get a nice smooth transition that still maintains that 3d feel.

12.You may experience more stretching as you animate forward, keep scaling and
changing the geometry, but remember that camera mapping has itʼs limits and can
only go so far with 1 photograph before quality starts to diminish.

13. Viola! Camera mapping using ProjectionMan and PSD layers.

Rendered QT Movie

Project Source Files