Discussion

• student lead discussions (Nicole, Alia)

Activity

Review Processing

ellipse()
line()
point()
mouseX
mouseY

Controlling color, fill, and stroke

color()
stroke()
noStroke()
fill()
random()

What size is my screen?

width
height

Arcs
Use the Processing reference document!

arc(100, 100, 100, 100, 0, 180);
arc(100, 100, 100, 100, 0, PI, CHORD);

Other primitives

rect();
triangle(x1, y1, x2, y2, x3, y3);

More on interaction

 if (mousePressed == true) {
     background(color(0,0,255));
  } else {
     background(color(200,0,0));
  }

Callback functions: allow for event driven behavior!

void setup() {
  size(500, 500);
}

void draw() {
  ellipse(mouseX, mouseY, 10, 10);
}

void mousePressed() {
    background(255);
}

Here is an example that shows you how to change a state variable when a mouse is clicked

boolean pleaseClearScreen = false;

void setup() {
  size(500, 500);
}

void draw() {
  ellipse(mouseX, mouseY, 10, 10);

  if (pleaseClearScreen == true) {
    background(255);
  }
}

void mousePressed() {
  pleaseClearScreen = true;
}

Aside: Review the concept of variable scope

int foo;  // this is a global variable, visible in all functions
void setup() {
  foo = 7;
}

void draw() {

  println(foo);

  int bar; // this is a local variable, visible only inside of draw()

  for (int i = 0; i < width/2; i++) { 
    // i is a local variable visible only inside this for() loop
    ellipse(i, height/2, 10,15);
  }
}

You can get a callback (also sometimes called a notification) when a key is pressed:

final int ellipseWidth = 100;
final int ellipseHeight = 150;

final int rectWidth = 100;
final int rectHeight = 150;

void setup()
{
  size(500, 500);
}

boolean statePendingKey = false;

void draw()
{
  if (statePendingKey) {
    if (key == 'a') {
      println("drawing ellipse");
      ellipse(width/2, height/2, ellipseWidth, ellipseHeight);
    } else if (key == 'b') {
      println("drawing rect");
      rect(width/2, height/2, rectWidth, rectHeight);
    }
  }
}

void keyPressed() {
  statePendingKey = true;
}

There is a bug in the above! Can you spot it? How would you fix it?

Note that order matters!

Homework due Thursday March 19

Make a self portrait using Processing.

• The portrait must be entirely created by your code i.e. you must not interact with your computer while the portrait is being made (e.g. no drawing using the mouse)
• The portrait does not need to be dynamic (i.e. it does not need to change while we look at it) 
• Upload your portrait and your code to your Github repository
  • Take a screenshot of your portrait
  • Create a new folder named March 19 (if you already made March 17 that’s OK)
  • Upload your program into the new folder, with the extension .pde
  • Create a README.md and include your screenshot in that