Z OLD Homework 04 - james-bern/CS136 GitHub Wiki

https://andymation.squarespace.com

README (Before Lab)

Experience some simple animation software

  • Java's ArrayList<ElementType> is generic, which means you get to choose what type ElementType 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).

Specification

  • 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) {
                ...
            }
        
        }
  • 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;
      • ✨ A very elegant B-solution has drawing as its only array list instance variable; it should NOT need an instance variable for stroke.
  • To get an A:

    • βœ… Add a couple fun features.
      • βœ… Press X to flip your drawing horizontally.
      • βœ… Press Y to flip your drawing vertically.
    • βœ… 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.
      • βœ… 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.
      • βœ… 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 like x % y but works the way you want for negative numbers (see Documentation).
      • 🚨 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.
      • ✨ A very elegant A-solution has animation as its only array list instance variable; it should NOT need instance variables for drawing or stroke.
  • 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 like x % y but works the way you want for negative numbers (see Documentation)
    • βœ… Add at least one other (significant) feature of your own choosing. πŸ™‚

Submission Instructions

  • 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.

Starter Code

HW04.java

// 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();
    }

}

Further Reading

  • Animator's Survival Kit (here is a random chapter)
⚠️ **GitHub.com Fallback** ⚠️