A little under a year ago I was ‘oohing and ahhing’ over the official launch of Adobe AIR, and the amazing potential it opened up for blurring the lines between web and desktop applications. Lately – well, since Flashbelt 2008, I’ve been ‘oohing and ahhing’ over Processing …

(I’m honored that this piece was used in a Create Digital Motion article announcing Processing’s move from Beta to the official Processing 1.0!)

Adobe AIR and Processing?! Apples and oranges, I know. But I tend to obsess over things – whether it’s indenting my CSS properties, dropping my curly brackets to the next line, or exploring new software and languages to experiment with – like ActionScript 3, Processing, or NodeBox.

I think Processing has become more than just a fling…

Nick Longtin, colleague and teacher of many of my programming skills, once commented that Processing was right up my alley – and he was right. The creative potential has me quite addicted, and I think Processing has become more than just a fling. An area where my eye for design and my obsessive coding habits play nicely together. An area where stunning and inspiring work is easy to find. Where late nights of coding are rewarded with visual output, not some big query result to loop through…

Yeah, I Heart Processing.

Many of my experiments have been posted to my Flickr photostream – check ‘em out and let me know what you think!

More experiments with Processing and Particles. This one uses the wonderful Traer Physics library.

Rather than writing a custom Particle class and applying forces to them individually (as in my previous particle post), all I need to do is create a ParticleSystem instance, add forces as desired (none in this case), and Traer does the rest.

In this example, I continuously add particles in the center with random velocities, and continuously remove them when they’ve grown old. The particle.age() property also controls the size and transparency of each particle, which is simply an ellipse with a teal-ish fill. The moon is a PNG placed in the center. For a final touch, I use the built-in camera() function to zoom in an out, controlled by a Sine wave.

Actually, this one uses 10,000 particles, and the equation:

float force = planet.mass * particle.mass / distanceSquared;

(Thanks Keith Peters!)

Particles are regenerated if they begin shooting off into space. Near the end of the animation, I decrease the center planet’s mass until it becomes negative, changing gravity into repulsion…

100% code animation built with Processing – uses a random color sampled from a photo of rust, 1000 particles and Perlin noise to control movement.
This experiment was based on my ActionScript 3.0 PerlinCurtain post.

One of the key speakers this year at Flashbelt is Processing superstar Robert Hodgin. Processing is an open source programming language and integrated development environment (IDE) that aims to serve as a ‘digital sketchbook’ – used by artists and programmers to create complex visuals, animations and image manipulations.

Former Flashbelt speaker and colleague Nick Longtin recently suggested I give Processing a try. That it was ‘right up my alley’.

I think he was right. Very similar to ActionScript, but with a simplified syntax. Check it out:

ActionScript
var blur:BlurFilter = new BlurFilter(10, 10, 2);
myLogo.filters = [blur];

Processing
filter(BLUR, 1);
image(myLogo);

…. although, you could simplify the ActionScript to
myLogo.filters = [new BlurFilter()];

Here are some of the results from my first Processing experiment (more examples in the rest of the article):

More examples: (more…)