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

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

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

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

*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.

This first one is part of animation that is giving me a little trouble rendering but I think once I iron a few things out and add sound it’ll be a solid abstract piece.

Plant Inspired abstraction

The game was developed using XNA, so sadly it isn’t web deployable but here ARE some of the final assets:

The ever stackable crate, in the game almost any puzzle could be solved with enough crates

~

These were used in game to bloy away anything big enough blocking the players path.

~

This was something that I had always wanted to model and happily volunteered for this tool. This was used to launch explosives, crates, or even the character over chasms or tall obstacles

~

Log Fulcrum - used to launch player onto ledges with a counter weight

I started off by doing some sketches on how I wanted the nodes to connect, I toyed with the idea of using papervision, but felt that in 3 weeks I really wouldn’t have enough time to do it right.

last.fm sketches

I then create some wireframes and after looking at how the nodes were connecting it looked more and more like a constellation map which I used in my comps:

first comp

But in my first comp the type and connection weren’t working, and the swooshes in the background were too bold.

Comp Round 2

I still had more changes to make, but this is a step in the right direction.

Screen Capture Video Link

The final developed version is available on my portfolio.

design tag squid

Building off of the whole underwater theme I had also really wanted to build a diver that could go deep sea mining and I eventually came up with this:

Dive Dive!

It made sense to bring these two things I love together: underwater deep sea mining + squids, so I quickly got together some style frames for overall look and feel.

styleframe

styleFrame

Tentacles!

The next major changes I made involved the global lighting, I ended up using a combination of fog/depth with visible/volumetric lights to simulate the caustics of the ocean. I ended up having to to do some more complex rigging for the tentacle using XPRESSO in cinema 4d. I also applied sub-surface scattering to the tentacles to give it a different look and feel that changed from low-light situations.

The final render is on my portfolio site.