We continued with where we left off in week 2 by downloading the week two archive again in anticipation of swapping Processing code into the HTML files for week 3 examples. We ended up with this week 3 archive of changes we made in class. Here are some notes on the examples we worked with interactively:

We looked at the random() function and how it can add some diversity to visual presentation. We learned that we can put two attributes, a minimum value and a maximum value in the random() function to guide the random number generated by the function. We learned about for loops as a convenient, conventional syntax for creating loops that are controlled by logic. Todd asked a question that got us looking at symmetry between vertical and horizontal presentation of randomly placed visual components.

float rand = 0;
for (int i = 1; i < steps; i++) {
  strokeWeight(mouseY);
  point((width/steps)*i, (height/2)+random(rand,-rand));
  rand = rand + random(-3,3);
  point((height/2)+random(rand,-rand),(width/steps)*i);
  rand = rand + random(-3, 3);
}

We looked at the Mouse 2D example to investigate at mouse interactivity. While revisiting the mouseX, mouseY, pmouseX, and pmouseY built-in variables, we looked at how we can combine those variables with others such as the canvas height and width:

int oppositeX = width-mouseX;
int inverseY = height-mouseY;

We looked at the Keyboard example to look at keyboard interactivity. Many times we will want to isolate each key on the keyboard for a unique response visually when a key is typed on a keyboard. Games are often programed this way. We looked at isolating the first three letters of the alphabet but we could substitute any character into each conditional statement:

void keyPressed() {
  int keyIndex = -1;
  if (key == 'a') {
    ... code visual response to key a here ...
  } else if (key == 'b') {
    ... code visual response to key b here ...
  } else if (key == 'c') {
    ... code visual response to key c here ...
  }
}

For homework we assigned the Keyboard Functions example to look further at keyboard interactivity and the Miliseconds example to integrate the clock into our visual displays. We played around to change the width of the bars being presented with the code in the archive:

for (int i = 0; i < scale*2.5; i++) {
  colorMode(RGB, (i+1) * scale * 10);
  fill(millis()%((i+1) * scale * 10));
  rect(i*scale, 0, scale, height);
}

Since touch displays are very popular nowadays as an interactive medium, I suggested you contemplate using touch as an interaction method in preparation of our Java experience in week 4.