An animation is a series of drawings ("frames") that are shown ("played") one after the other to give the illusion of movement.

• Optional Reading: Animator's Survival Kit

One simple way of making an animation is flipbook; the images are drawn on the pages of the book, and they are played by flipping the pages of the book. For an example, check out the teaser image at the top of this screen.

In this homework, we'll make a simple animation program, reminiscent of a flipbook.

Take half an hour of so to experience some simple animation software:

• Make a simple animation in Brush Ninja
  • NOTE: You can press o to toggle onion skinning
• Watch a video about DigiCel's FlipBook

We know we need to store a lot of data, but we don't know how much. How many drawings? How many strokes per drawing? How many points per stroke?

I guess we could just make some REALLY BIG arrays, but that seems...potentially sus.

Maybe instead we can try using arrays that grow (and shrink).

Enter, the array list!

• Java's ArrayList<ElementType> is generic, which means you get to choose what type ElementType is.

  • ArrayList<Point> stroke = new ArrayList<>(); is a list of points, storing a single stroke.
  • ArrayList<ArrayList<Point>> drawing = new ArrayList<>(); is a list of lists of points, aka a list of strokes, aka a drawing
  • ArrayList<ArrayList<ArrayList<Point>>> animation = new ArrayList<>(); is a list of lists of lists of points, aka a list of lists of strokes, aka a list of drawings, aka an animation
  • ...

• My Point class is super simple

  • Point point = new Point(x, y); makes a new point with coordinates $(x, y)$
  • point.x, point.y are the point's $x$ and $y$ coordinates

• animation.size() is 1
• currentFrame is 0
• there animation consists of...
  • a single blank frame

   |
   V      
  [ ]

• the user draws the letter 'A'

   |
   V      
  [A]

• the user presses S

        |
        V      
  [A]  [ ]

• animation.size() is 4
• currentFrame is 2
• there animation consists of...
  • drawing of the letter A on frame 0
  • drawing of the letter B on frame 1
  • drawing of the letter C on frame 2
  • drawing of the letter E on frame 3

             |
             V      
  [A]  [B]  [C]  [E]
  

• the user presses S ("save"), which inserts a blank frame and takes us to it
  • animation.size() is 5
  • currentFrame is 3

                  |
                  V      
  [A]  [B]  [C]  [ ]  [E]
  

• the user draws a D

                  |
                  V      
  [A]  [B]  [C]  [D]  [E]
  

• the user presses . ("next frame")

                       |
                       V      
  [A]  [B]  [C]  [D]  [E]
  

• the user presses .
  • NOTE: the list is treated as circular (it "wraps around")

   |
   V      
  [A]  [B]  [C]  [D]  [E]
  

• the user presses , ("previous frame")

                       |
                       V      
  [A]  [B]  [C]  [D]  [E]
  

• A-
  • Create a simple flip-book app
    • Click and drag to draw strokes
    • Press S to insert a new blank frame of immediately after the current frame, and go to it
    • Press P to play (and pause, if you press it again) the whole animation.
      • HINT: You will want something like a boolean paused; variable
      • NOTE: Like the animated GIF at the top of this page, your animation should play slowly enough that you can actually see what's going on!
        • HINT: Use a frame or time variable like in HW02
    • If paused, press . (period) to go to the next frame
      • NOTE: Treat the list as circular
        • HINT: You can use MODULO(x, y), which is like x % y but works for negative numbers
    • If paused, press , (comma) to go to the previous frame
      • NOTE: Treat the list as circular
• A
  • Press X to flip the current frame (NOT all frames) horizontally
  • Press Y to flip the current frame (NOT all frames) vertically
  • Implement onion skinning. The user should be able to see the next few frames and the previous few frames. Try to color your onion skinning like this
    • NOTE: Again, treat the list as circular
• A+

• You may NOT use Thread.sleep(...); or similar; we want the app to remain responsive

import java.util.*;
class HW04 extends Cow {

    static class Point {
        double x;
        double y;

        Point(double x, double y) {
            this.x = x;
            this.y = y;
        }
    };

    public static void main(String[] arguments) {
        ArrayList<Point> foo = new ArrayList<Point>();
        foo.add(new Point(0.0, 0.0));
        foo.add(new Point(64.0, 128.0));
        while (beginFrame()) {
            drawLine(foo.get(0).x, foo.get(0).y, foo.get(1).x, foo.get(1).y, BLUE);
            drawLine(foo.get(1).x, foo.get(1).y, mouseX, mouseY, RED);
        }
    }
}

• You will want to build up your program step by step
  1. Drawing a single stroke
  2. Drawing multiple strokes in a single drawing
  3. ...
• It's possible to solve the A- with animation as the only ArrayList variable above the while loop