2A Tues 9/11

1. Reading:

In the Daniel Shiffman, Learning Processing please read chapters 3. If you’re book has not arrived yet, here is a soft copy of these chapters.

2. Watch

This talk by Zach Lieberman: https://www.youtube.com/watch?v=bmztlO9_Wvo

3. Programming exercises:

  1. Complete exercise 3.3, 3.4 and 3.7 in Learning Processing.
  2. Pair programming exercises below
  3. Start thinking about the Variable Face project (if time permits).

A) Pair programming: Three Squares

This exercises will help you to learn variables.

The requirements are:

  • In a canvas of 600×300 (width x height) pixels,
  • Declare a variable, which should be called myUnit, and assign it to have a value of 50.
  • Draw a square, whose width and height are equal to that variable, myUnit.
  • Draw another square, whose dimensions are exactly twice as large as the first square, and whose dimensions are defined in terms of myUnits.
  • Likewise, draw a third square, whose dimensions are exactly three times as large as the first square.
  • These squares should be coded in such a way, that if the myUnit variable had instead been initialized with a different value (such as 60), all three squares would immediately assume new dimensions, while maintaining the same relative size proportions of 1:2:3.
  • There are no requirements for the positioning (placement) of the squares — only their sizes.

Then, as per usual add to the week 2, pair programming section of open processing.

B) Pair programming: Two Circles

Here’s an animated GIF showing a recording of a live interaction. Notice how the horizontal positions of the circles relate — in different ways — to the system property, mouseX:

Below is a broken version of the code which generated the above program. Go ahead, run it; you’ll observe that the fixmevariable, which controls the position of the black circle, ain’t right. Your job is to correct the value assigned to fixme, in order to reproduce the behavior shown in the GIF above.

void setup() {
    size(600, 300);
}
 
void draw() {
    background(170, 190, 200);
    noStroke();
 
    var fixme = random(width); // FIX ME!
 
    fill(255);
    ellipse(mouseX, 100, 60, 60);
 
    fill(0);
    ellipse(fixme, 200, 60, 60);
}

Then, as per usual add to the week 2 section of open processing.

C) Extension exercise: Eyes Following Mouse

Draw a set of eyes with pupils that follow the mouse. Constrain each pupil to stay within its eyeball. You may need one of the following functions:

https://processing.org/reference/map_.html

https://processing.org/reference/constrain_.html