An
introduction to 2D graphics and animation in Processing.
This short but fun applet 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. In the full
version of the code below, you can also use the 'f' key at any time
to save a graphics file of the applet window.
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). In fact, you may find the code runs OK if you save
these files to the same folder as the code, but be warned that when
you export an applet graphics files may be ignored if not in the
correct place! 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.
