Z OLD Homework 04 - james-bern/CS136 GitHub Wiki
- Make a simple animation in Brush Ninja
- Press
o
to toggle onion skinning
- Press
- Watch a video about DigiCel's FlipBook
- Java's
ArrayList<ElementType>
is generic, which means you get to choose what typeElementType
is.-
ArrayList<Vector2> stroke = new ArrayList<>();
is a list of points, which could store a single pencil stroke. -
ArrayList<ArrayList<Vector2>> drawing = new ArrayList<>();
is a list of lists of points, which could store an entire drawing ( a list of strokes). -
ArrayList<ArrayList<ArrayList<Vector2>>> animation = new ArrayList<>();
is a list of lists of lists of points, which could store an entire animation (a list of drawings).
-
-
To get a C:
- β
Starting with the Starter Code at the very bottom of this webpage...Create a drawing app where you can't lift your pencil (just one long, continuous stroke, forever and ever).
- β¨ AFTER
import java.util.*; class HW04 extends App { ArrayList<Vector2> stroke; void setup() { stroke = new ArrayList<>(); } void loop() { stroke.add(...); for (int i = 0; i < ...; ++i) { drawLine(..., ..., Vector3.blue); } } public static void main(String[] arguments) { ... } }
- β¨ AFTER
- β
Starting with the Starter Code at the very bottom of this webpage...Create a drawing app where you can't lift your pencil (just one long, continuous stroke, forever and ever).
-
To get a B:
- β
Create a drawing app similar to the Microsoft Paint pencil tool.
- β
Click and drag to create strokes (line strips).
- π¨ The strokes must be stored in an
ArrayList<ArrayList<Vector2>> drawing;
- π¨ The strokes must be stored in an
- β¨ A very elegant B-solution has
drawing
as its only array list instance variable; it should NOT need an instance variable forstroke
.
- β
Click and drag to create strokes (line strips).
- β
Create a drawing app similar to the Microsoft Paint pencil tool.
-
To get an A:
- β
Add a couple fun features.
- β
Press
X
to flip your drawing horizontally. - β
Press
Y
to flip your drawing vertically.
- β
Press
- β
Create a frame by frame animation (flip-book) app.
- β
Press
S
to create a new frame of animation immediately after the current one, and go to it.- π¨ After pressing
S
, the user should see a blank canvas again.
- π¨ After pressing
- β
Press
P
to play (and pause, if you press it again) the whole animation.- π¨ 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! (It should NOT all go by in an extremely fast blur.)
- π¨ Do NOT solve this by using
Thread.sleep(...);
or similar. We need the app to remain responsive.
- π¨ Do NOT solve this by using
- π¨ 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! (It should NOT all go by in an extremely fast blur.)
- β
When paused, press
.
(period) to go to the next frame and press,
(comma) to go to the previous frame.- β
Treat the list as circular. You can use
Math.floorMod(x, y)
, which is likex % y
but works the way you want for negative numbers (see Documentation).
- β
Treat the list as circular. You can use
- π¨ Example
- Imagine youβre on Frame 3 of 10.
- You press S, which inserts a new blank frame (Frame 4 of 11) and takes you to it.
- You're now on Frame 4.
- At this pointβ¦
- ...pressing
.
(period) would take you to Frame 5. - ...pressing
,
(comma) would take you back to Frame 3.
- ...pressing
- β¨ A very elegant A-solution has
animation
as its only array list instance variable; it should NOT need instance variables fordrawing
orstroke
.
- β
Press
- β
Add a couple fun features.
-
To get an S:
- β
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.
- β
Treat the list as circular. You can use
Math.floorMod(x, y)
, which is likex % y
but works the way you want for negative numbers (see Documentation)
- β
Treat the list as circular. You can use
- β Add at least one other (significant) feature of your own choosing. π
- β
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.
- Upload your code file to GradeScope by the due date.
-
Live demo your code to Jim or a Grading TA in Lab.
- π¨ You must do this in order to receive points.
- If you are trying for an S, you must demo to Jim.
// NOTE: Once you understand how this sample code works,
// you will want to delete/change most of it. :)
import java.util.*;
class HW04 extends App {
ArrayList<Vector2> foo;
void setup() {
System.out.println("Press Q to quit.");
System.out.println("Press R to rerun setup().");
foo = new ArrayList<Vector2>();
foo.add(new Vector2(0.0, 0.0));
foo.add(new Vector2(0.0, 1.0));
}
void loop() {
if (mousePressed) { System.out.println("Mouse pressed."); }
if (mouseHeld) { System.out.println("Mouse held."); }
if (mouseReleased) { System.out.println("Mouse released."); }
if (keyPressed('S')) { System.out.println("Key S pressed."); }
if (keyToggled('P')) { System.out.println("Key P toggled."); }
drawLine(foo.get(0), foo.get(1), Vector3.black);
drawLine(foo.get(1), mousePosition, Vector3.black);
}
public static void main(String[] arguments) {
App app = new HW04();
app.setWindowBackgroundColor(1.0, 1.0, 1.0);
app.setWindowSizeInWorldUnits(8.0, 8.0);
app.setWindowCenterInWorldUnits(0.0, 0.0);
app.setWindowHeightInPixels(512);
app.setWindowTopLeftCornerInPixels(64, 64);
app.run();
}
}
- Animator's Survival Kit (here is a random chapter)