week2.md

Homework 2 (due Sunday, September 13, 2015)

This homework has two parts: programming practice due Sunday, and a required tutorial to be completed before Tuesday night.

Classes Tutorial

• Assignment: Follow the Processing Objects tutorial.

• Assignment: Email me answers to the following questions to jzamfirescupereira@cca.edu by Tuesday night: Send 3-4 sentences per question.

  1. In what ways is a class like a cookie cutter?

  2. What sets apart instance variables from regular variables?

  3. In the following code, how many instances of Ball are created in total?

class Ball {
  float x, y;

  Ball(float x, float y) {
    this.x = x;
    this.y = y;
  }

  void display() {
    ellipse(x, y, 50, 50);
  }
}


Ball b = new Ball(100, 100);
Ball b2;

void setup() {
  size(500, 500);
  b = new Ball(120, 200);
  b2 = new Ball(35, 35);
  noStroke();
}

void draw() {
  background(255);
  fill(128, 178, 255);
  b.display();
  b2.display();
}

Programming Practice

• Assignment: Pick 5 of the 15 sketches below and recreate them, at least one must be animated. Bonus points for adding flourishes to your sketches. Create a new GitHub repository for this assignment, and create a new file for each of your five sketches -- include the sketch number in the file name. Email a link to your repository to jzamfirescupereira@cca.edu by Sunday, September 13.

• Not all these sketches are equally difficult -- in fact some are very challenging!

• You may find the following Processing tutorials helpful:

  • The Processing Overview
  • Coordinate System and Shapes
  • Color

• It may also help to read through the Processing reference to understand all the various functions available to you.

• For extra programming help, consider following the Khan Academy programming tutorials using Processing.

Without further ado, here are the sketches:

1. Circles in a diagonal line. Use a while loop to draw the balls in sequence. What do you know about the x and y coordinates of each ball? (Spoiler: They're the same!)

   

2. Circles in a grid. You will likely need a while loop inside another while loop!

   

3. Colored circles in a grid, random version. Check out the colorMode function, and HSB, in the Processing reference.

   

4. Colored circles in a grid, sequential version. Check out the colorMode function, and HSB, in the Processing reference. Note that the colors shift from left to right and from top to bottom!

   

5. Circles in an triangle.

   

6. Circles in an hourglass.

   

7. The grid.

   

8. Diagonal lines.

   

9. Diagonal lines, interrupted.

   

10. Random bars.

11. Random bars, animated.

12. Animated bars, mouse-sensitive. Check out the Processing-defined variables mouseX and mouseY in the Processing reference.

13. Bouncing balls, just two.

14. Challenge: Bouncing balls, more added by clicking. You may need to use an ArrayList.

15. Challenge: Fireworks! They should track the mouse and appear on clicks.