Animation Worksheet

This week you will create an animation with a number of frame and then write a simple Processing sketch to play it.

Creating an Animation

Create a sequence of images that form an animation. Do this however you want, using photoshop or stop motion with a camera.

The images need to be given names like “frame_03.jpg”. They must start with a prefix (“frame_”) which is the same for all frames. They then have a 2 digit frame number, (i.e. the order in which they are to be played), NB if this is not 2 digits or if the numbers don’t start from 1, the code below won’t work. Finally they must all have the same extension for their file type (.jpg, .gif etc.)

A Processing Animation Player

I have written a Processing sketch for loading in and playing an animation.

You need to copy all your images into the “data” folder inside the sketch folder.

You then need to change the sketch in the following ways:

  • change the prefix from “StopMotion2_” to your prefix and the file extension to your one
  • It currently only plays the first frame, change the code so it plays a different image each frame
  • The size of the window is too small, change the code so that it is exactly the right size for the animation. (you can use player.getHeight() and player.getWidth())
  • It will probably run at the wrong speed. Look up frameRate in the Processing reference and change the code so that it runs at the right speed


There are many more things you could do with this. Here are some suggestions:

  • Implement some play controls, for example clicking on the animation pauses it or moving the mouse scrolls through the animation
  • Make the animation loop
  • Look at the code in the animationPlayer class, see if you can figure out how it works. Subvert it.
PDF Printer    Send article as PDF to