An introduction to 2D graphics and animation in Processing.

The short but fun applet shown in Figure 1 was written for the FizzPop hacker space Processing show'n'tell beginners programming evening held in June 2010 in Birmingham. It illustrates how to load and draw 2D graphics files, including how to rotate, scale and position them, plus transparency (alpha) setting. It also has keyboard controls: left/right make the dog change direction, up/down make the cogs rotate quicker/slower, and 'r' makes the whole thing start over. You can also use the 'f' key at any time to save a graphics file of the applet window.

The FizzPop program after a few seconds running.

Figure 1. The FizzPop program after a few seconds running.

The code, which you can download here, has been heavily commented, so hopefully it will make sense after a bit of reading (and of course it's easier if you've been to the FizzPop Processing evening too). There are seven graphics files that are needed for the code to work properly, and you can download them using the links below. You need to save them to a folder called 'data' in the same place that you have the downloaded Processing code file (fizzpop.pde). All of them are GIF files and a colour has been set as the palette transparency, which makes life much easier when animating images in Processing. Also, the same colour was then used as the background colour for the Processing window which, although not absolutely necessary, does help avoid aliasing around the edge of the images and so makes everything look a bit more professional. By the way, the graphics are based on ones provided by Antonio at HelloCatfood, so please pop along to his website to see his creations.

Bottom cog, top cog, dog left, dog right, fizz, p, smile.