Syntax of loops:

Anatomy of a for loop:

for (int y = 0; y < height; y += 15) {
  stroke(0);
  rect(10,y,10,10);
}

Anatomy of a nested loop:

for (int y = 0; y < height; y += 15) {
  for (int x = 0; x < height; x += 25) {
    stroke(0);
    rect(x, y, 10, 10);
  }
}

LOOP EXERCISES!!

For these exercises, you may not use the mouse button, use mouse location system variables mouseX and mouseY. Restrict yourself to black and white.

L1 — Interaction and Iteration: One Line
Develop a composition which in which one (straight) line responds to the position of the cursor.

L2 — Interaction and Iteration: Ten Lines
Develop a composition which in which ten straight lines respond to the cursor.

L3 — Interaction and Iteration: 100 Lines
Develop a composition which in which one hundred lines respond to the cursor.

L4 — Interaction and Iteration: 1000 Lines
Develop a composition which in which one thousand lines respond to the cursor.

REVISION: For loops

Modify the following example so that the steps: draw ball, move ball and check edges are discrete functions.

float y=50;
float x=200;
float yspeed = 9;  // Speed in y
float xspeed = 2; //Speed in x

float gravity = 0.1;


void setup() {
  size(400, 300);
  noStroke();
  frameRate(60);
}


void draw() {
  background(102);

  //MOVE BALL
  //change x position
  x=x+xspeed;

  //change y position
  y=y+yspeed;


  //CHECK EDGES
  if (y>height || y<0) {
    //multiply it by 0.8 so it looses some speed
    //negative so it changes direction.
    yspeed=yspeed*-1;

    //correct rounding error
    if (y<0) { 
y=0; 
} 
} //check if we get to the sides of the screen 
if (x>width || x<0) { 
xspeed = xspeed*-1; //correct rounding error 
if (x>width) {
      x=width;
    }
    if (x<0) {
      x=0;
    }
  }

  //DRAW BALL
  ellipse(x, y, 30, 30);
}

REVISION MATERIALS: Video tutorials on functions

And have it animate properly.
See here.

Conditionals Exercises:

To be done in pairs.

Do each as a separate sketch of 400 x 400 pixels, with a square in the middle.

1) Draw a white square that turns black when the mouse rolls over it. Have it go back to white when the mouse rolls off it.

2) Draw a white square. When it is clicked, have it turn black and stay that way.

3) Create a reactive box, such that each click in the square flips its color from white to black (if it is white), or from black to white (if it is black).

Challenge:
4) Create a reactive square, such that two clicks are required to turn it from white to black, but three clicks are required to turn it from black to white.

For video tutorial review on conditionals:

 

FUNCTIONS:
println()
random();
constrain();

IDE SHORTCUTS:

• To autoformat your code: CMD + T
• To check the reference of a function on the processing website: Right click and go to ‘check in reference’.

WANT TO USE BETTER COLORS IN YOUR WORK?
Check out this useful tool: http://colorbrewer2.org/

• Introduction to variables.
• Demonstration of variables. Draw a simple landscape with one tree/plant/rock/building/creature in it. You can use the code below to get started if you want.
• (1) Make the sky change color every time the mouse is pressed.
• (2) Make the tree (or what ever your thing is) move horizontally across the horizon – as if you are in a car driving along looking our the window.
• (3) Add in a sun/moon/star or planet that is setting or rising slowly in your landscape.

//A forest
void setup() {
  size(400, 400);
  noStroke();
  fill(153, 216, 201);
  rect(0, 200, 400, 200);
}

void draw() {
  fill(42,162,95);
  triangle(190,180,205,140,220,180);
  fill(255,147,188);
  rect(200, 180, 10, 20);
}

• Coordinate System
• 2D primatives
• Color
• Basic interactivity

Exercise 1: Basic drawing. Take your face and begin translating it into code.

Exercise 2: Drawing machine, basic interactivity. Create 3 different different basic drawing programs. Take a screen shot of a drawing using each one. Post to the blog if you like.

Download the basic functions cheat sheet here.