I’m taking a break from my usual JavaScript and HTML5 experiments to share some of my recent work in Processing. I’ve played around with Processing a little in the past, but I dove in deeper recently, prompted in part by my participation in the online course Creative Programming for Digital Media & Mobile Apps at Coursera. Although the introduction to programming was elementary for my level, I still learned lots of new tricks and got to experience some libraries that I had not seen before. If the course runs again in the future I can definitely recommend it!

Here is one of my more involved sketches in Processing: a digital clock made out of little square tiles slowly disintegrates, as the digits are repeatedly destroyed and renewed on a synchronized basis. Click here or on the screencap below to see the Processing.js version (although the Java version is much more satisfying – download the source code and try it for yourself in Processing!). If it runs a little slow you can also try a version with fewer polygons here.


Processing Decay Clock screencap

Download

The complete code (containing Java and JavaScript versions for Processing) can be downloaded here: DecayClock_All.zip

About the code

The code is somewhat long and I won’t attempt to explain all of it. Instead I invite you to download the source and have a look around. One important thing to know is that the sketch makes use of the BoxWrap2D library, which is a thin layer (built for Processing) on top of the JBox2D library, which is in turn a Java port of the open source C++ Box2D physics engine, originally built by Erin Catto.

For more information on using BoxWrap2D, see the Processing Wiki page here (and check out the links at the bottom of that Wiki page).

To build this sketch for Processing.js, a JavaScript version of BoxWrap2D is used (see the acknowledgments below for more information).

Arranging the tiles

For this sketch, I had to create each numerical digit out of 60 square tiles. To help with this task I built yet another application in Processing which allowed me to print a large digit (in the font of my choosing) on the screen, and to arrange little squares on top. That Processing sketch is entitled TiledNumbers, and it is included in the source code download above. I’m not sure if it would be useful to anyone but perhaps it form the basis of a more involved drawing program. Below is a screencap:

Processing Tiled Numbers

There are a lot of hidden keyboard shortcuts for this application, and they are not immediately obvious – I really just built this for myself to use. Have a look inside the source code to see what keys are enabled. For example, typing ‘s’ turns on symmetry (hit it twice for four-fold symmetry), typing ‘r’ turns on rotation mode, and typing ‘p’ exports the tile data to the Processing console. I used this to copy and paste into some data objects which are used in the main sketch.

Acknowledgments

  • Built using Processing and Processing.js.
  • The physics engine used here is the BoxWrap2D library, which is a thin layer (built for Processing) on top of the JBox2D library, which is in turn a Java port of the open source C++ Box2D physics engine, originally built by Erin Catto.
  • Thank you to the instructors Marco Gillies, Mick Grierson, and Matthew Yee-King of the Creative Programming for Digital Media & Mobile Apps course at Coursera for their inspiration and introduction to these Processing libraries. They also are the authors (primarily Marco Gillies) of a JavaScript version of the BoxWrap2D library for Processing, which you can find in the source code above and at GitHub here.

Terms of use

I encourage you to download the source code and investigate it, but I would appreciate some acknowledgment if you use large portions of the code for your own projects. And please don’t forget to acknowledge the authors of the physics libraries as outlined above!