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.
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).
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:
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.
- 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.
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!