HW04 - james-bern/CS136 GitHub Wiki
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
- NOTE: You can press
- 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 typeElementType
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()
is1
-
currentFrame
is0
- 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()
is4
-
currentFrame
is2
- 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]
- drawing of the letter
- the user presses
S
("save"), which inserts a blank frame and takes us to it-
animation.size()
is5
-
currentFrame
is3
| 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
ortime
variable like in HW02
- HINT: Use a
- HINT: You will want something like a
- 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 likex % y
but works for negative numbers
- HINT: You can use
- NOTE: Treat the list as circular
- If paused, press
,
(comma) to go to the previous frame- NOTE: Treat the list as circular
- Create a simple flip-book app
- 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
- Press
- 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
- Drawing a single stroke
- Drawing multiple strokes in a single drawing
- ...
- It's possible to solve the A- with
animation
as the onlyArrayList
variable above the while loop