Pregame

I’ll be using BaseJSApp to start. It’s a quick way to get the skeleton of an app up and running. If you go your own way with straight apache or something else, that’s cool too. Skip what doesn’t pertain to your setup and modify anything that needs changing.

Grab your friends

First, we need Processing.js. Get it here: processing-1.0.0.min.js and copy it to /js/libs/processing-1.0.0.min.js.

We won’t be pre-compiling our CoffeeScript with node. Instead we’ll be using the client-side compiler. Grab that here: coffee-script.js and copy it to /js/libs/coffee-script.js.

Now, create a new CoffeeScript that we can work on. I created mine at /js/coffee_draw.coffee

Some HTML

Put three new script tags in /index.html linking to Processing.js, the CoffeeScript compiler, and the .coffee file:

a Quick note on Processing

You don’t need too much knowledge of Processing to follow this guide, but I’d like to point a couple things out that will make this easier.

Processing sketches typically heavily rely on the draw() method. draw() is the sketch’s main draw loop, and as such will be called many times per second (60, by default). All the interesting stuff we’ll be doing will be called out to from this method.

Another “default” method in Processing is setup(). This method gets called only once, at the very beginning. It’s typically used to set the size of the sketch, initial background color, and maybe some other initialization variables.

If you fire up a browser and go to http://localhost:3000 you should see the background pulse different colors (black to white, lots of shades of blue, etc…). Kinda cool, but not what we’re after. Onwards!

Ghost Doodles

We now have everything hooked up and a skeleton sketch down. It’s time to get fancy.

One of my favorite methods in the Processing API is noise(). To quote the documentation:
“Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function.”

Run that for a bit in the browser and you should have something like this:

Ok, that’s kind of cool. But only kind of. We should take it to the next step.

Green Beans

Remember when we created that “Bean” class, and then promptly forgot about it? We’re going to use it now.

This “bean” object we’re about to create will behave similarly to the “brush” we just made, but it will move a little bit differently. Instead of relying on noise() to provide an arbitrary location on the canvas each frame, a “bean” will keep track of its position, velocity, and acceleration, and will use that information to draw. However, we will also use noise() to influence the direction of movement. Essentially a “bean” is a particle.

A “bean” should keep track of its:

x position

y position

x noise offset

y noise offset

velocity

acceleration

Additionally, every frame it should be able to update its position using these attributes. Let’s make that happen:

What next?

If you’ve made it this far, you should have something like the above picture running in your browser. But, what’s next?

Tweaks

First, there are a ton of tweakable values to play with. A lot of the numbers included here were purely arbitrary. In the last section we changed a 20 to an 8, but maybe it looks better at a 5. The colors seem to skew blue/green, maybe messing with the set_color() method needs some tweaking. We could change the x and y offsets that we create beans with, not to mention play with their velocity and acceleration values.

Enhancements

In a lot of my sketches I find myself adding a fade() method. Basically, every so many frames I’ll draw a screen-sized black rectangle over everything with a very low opacity ~7-15%. Older parts of the sketch will get increasingly covered by black. This prevents the canvas from getting too busy.

Mouse interaction could also be cool, and Processing makes it a snap. At any time you can get the coordinates of the user’s mouse by accessing mouseX and mouseY on the processing object. Use this instead of the “brush” to create beans, affect the color, or offset increments— possibilities are literally endless, and that’s before you even consider adding DOM elements and overlays.

Performance

One thing that should be done, but I won’t cover here is removing beans from @beans once they stop moving. Each frame we iterate over every bean that we’ve created, and this number continues to grow. To prevent this from getting out of hand, we can remove the “dead” ones from the array. Alternatively we can just set a maximum length to the @beans array and remove beans down to that limit.