Objectives

Traditional Animation

Traditional animation is based on displaying sequences of images in rapid succession. For example, in 1878 Eadweard Muybridge created a sequence of photographs of a galloping horse known as The Horse in Motion, shown in rapid succession.


 (from WikiCommons - Click on the image to see the animation.)

Arrays

Processing can drive animations such as the one just shown by loading the images into an array and displaying them in rapid sequence.

Exercise 6.1:

Recreate Muybridge’s animation by loading and displaying the first five of his sequence of fifteen images. To do this, make a copy of the MuybridgeHorseStarter system (see also the lab code distribution directory), which displays one of Muybridge’s images (and includes the image files for all the others), and then do the following:

  1. Declare and define an array of PImage objects, horseImages, to replace the current single image, horseImage. Note that there are fifteen total images in the data directory, but for this exercise define the array so that it has space for only the first five.

  2. Load the first five images using five sequential calls to loadImage(). Note that the image files are named Muybridge_race_horse_1.gif through Muybridge_race_horse_5.gif.

  3. Introduce a frame counting variable so that your draw() method cycles through the images one at a time in sequence. To do this, add the following commands:

    1. Declarations: Add a declaration of your frame counter variable.
    2. Setup: Initialize your frame counter variable to 0.
    3. Draw: Display the image indexed by your frame counter variable and then increment the counter by one. Note that you should increment your counter using the modulus operator to wrap the value back down to 0 before it reaches the total number of images, e.g., i = (i + 1) % horseImages.length.

Get this animation to play continuously as shown in the canned animated GIF above. The animation will not be complete because you’re not displaying all of the images.

Arrays and for Loops

The previous exercise used indexed animation to recreate the Muybridge’s animation. Because arrays are fixed-length, indexed data structures, you can also use counting for loops to work with the images. Making this change results in a program that uses both forms of looping discussed in the lecture: (1) the draw() loop managed automatically by Processing runs the animation; and (2) your for loop loads the images.

Exercise 6.2:

Modify your current program to load the image files using a for loop. To do this, you can take advantage of the fact that the files have consistent names of the form Muybridge_race_horse_##.gif, where ## ranges from 1 through 15. Use the following algorithm:

  1. for a counter from 0 to 14
    1. Set the image array element indexed by the counter to the filename with number (counter + 1), e.g., load image array element 0 from Muybridge_race_horse_1.gif.

Note that you can “construct” the correct filename within your loop using the following string concatenation expression:

"Muybridge_race_horse_" + (i+1) + ".gif"

Get this to work so that it plays the full animation.

While there are tools that create animated GIFs, this Processing-based approach to animation gives you programmatic control of the images and the sequencing.

Exercise 6.3:

Modify your current program so that it runs your animation backward. Hint: Think first! Will the modulus operator still work?

Save this version of your program to turn in later.

Files

In the previous exercises,you loaded existing files using specialized loading methods provided by Processing. In this section, you will create and read text files of your own design. Your application will be a slide show player that displays a sequence of images.

→

Exercise 6.4:

Create a slide show player. Do this by making a copy of the slideShowStarter system (see also the lab code distribution directory), which displays one of the images loaded into the data directory, and then do the following:

  1. Declare an array of strings called filenames and load it with the file names stored in the filenames.txt file;
  2. As you did in the previous exercises, modify the slideShowStarter so that it has an array of PImage objects, photos, rather than just the one object, photo - Base the size of this array on filenames.length;
  3. Load photos with the images stored in the files named in filenames (e.g., load photos[i] from the file named by the string in filenames[i]);
  4. Implement the slide show as you implemented the animation above (though at a much slower frame rate).

Get it to display all the image files, loaded in the data directory, in the order specified in filenames.txt. You may assume that the filenames file lists all the valid files and nothing but valid files. You program should not hard-code the number of images, but rather should store any number of images, as dictated by the number of file names loaded into filenames.

Save this version of your program to turn in later.

Your slide show player now displays the images specified by the given filename. One problem with that approach is that if you add a new file, you have to modify the filenames file. It would be better if the player would just display all images in the data sub-directory, however many of them there may be at that time.

Exercise 6.5:

Modify your slide show player so that it loads all the files in the data sub-directory (rather than just the ones listed in filenames.txt). Do this using the loadDataFileNames() method you find in the starter program. This should be simple matter of setting filenames to the value returned by loadDataFileNames() (rather than loadStrings()). See the documentation on this method and integrate it into your program properly.

Save this version of your program to turn in later.

Extra Credit: Randomizing and Smoothing the image transitions

Your slide show player currently follows the same sequence of images each time and transitions between images rather abruptly. This is not very nice. It would be better if your system displayed images randomly and faded one image into the next.

→ →

Exercise 6.5 (Extra-Credit):

First, modify your program to display the images in random order (that is, it should display a random image at each step in the show).

Finally, modify your slide show player so that it switches images by fading the current image out while it fades the next one in. Hints on how to do this:

Checking In

Submit all the code and supporting files for the exercises in this lab.