The Design Recipe for Animations and Games

Steps in writing an animation

  1. Identify what event handlers you'll need (e.g.

    You will always need a makeImage method.

  2. Choose what type the Model is, and what it means.
    The model type should be something that you can easily update in response to events, and also something from which you can figure out what to show on the screen. Choosing an image as the model usually makes the makeImage method easy to write, but may make the other handlers more difficult.

    For example, if your response to events is easily describe by arithmetic, you probably want an Integer or Double model. If it's easily described by image operations, you probably want a WorldImage model. If it's easily described by string operations, you probably want a String model. If you need to change the two-dimensional location of something, you probably want a Posn model; to change the color of something, you may want a Color model. If your model needs to “remember” several different pieces of information and doesn't quite match any of these, you may need to invent your own type to be the model.

    The data type alone sometimes isn't enough. For example, suppose your model were an Integer, with the current value 17. What does this mean? It could mean the x coordinate of a picture, or the y coordinate of a picture, or the radius of a circle, or the number of copies of something... you need to make clear, at least in your own mind, what the model means.

  3. Create a new Animation class, replacing the word "Model" throughout with the type of your model.
  4. Write or copy the method skeletons for whichever handlers you need. (makeImage is already there in the template, while the rest are in comments in the template.)

  5. Develop each of the methods, following the usual design recipe for each one. Don't go on to the next one until the previous one passes all of its test cases.

  6. Decide on the information you need to call bigBang:

    (If you don't have a tick handler, you don't need to specify a time interval at all.)

    Create a new instance of your Animation class and call bigBang on it.  See whether it works correctly.

    For example, if your Animation class were named Glider, your model were a WorldImage, you wanted the model to start with SampleImages.bloch, and you wanted to display it in a 500x100 window with a 1/20 second clock time, you would write

    new Glider(SampleImages.bloch).bigBang(500, 100, 0.05);