Programming in Processing Taught by Ms. Madsen Assistants: Ms. Fischer and Ms. Yen Winsor School, 2/13/08

Who are we? We’re MIT students. Ms. YenMs. Fischer Ms. Madsen

Quick review of last week’s material: Remember that green  numbers, blue  names. void setup() { color colorName; colorName = color(redValue, greenValue, blueValue); background(colorName); size(width, height); } void draw() { rect(xStart, yStart, width, height); ellipse(xStart, yStart, width, height); }

Review of rect() #2: yStart #1: xStart #3: width #4: height rect(xStart, yStart, width, height);

Review of ellipse() #3: width #4: height ellipse(xStart, yStart, width, height); #2: yStart #1: xStart

Rules for naming things (for example, colors): The name… –Must start with a LETTER (not a number or symbol.) –Must not have any spaces. –Can’t be a special word, like ‘color’ or ‘size’ or ‘background’.

We can use fill() to give color to our shape. First, create a color, like we did for background: color colorName2 = color(redValue2, greenValue2, blueValue2); Then, call fill() with that color name as an argument: fill(colorName2);

New material: fill! Remember that green  numbers, blue  names. void setup() { color colorName; colorName = color(redValue, greenValue, blueValue); background(colorName); size(width, height); } void draw() { color colorName2 = color(redValue2, greenValue2, blueValue2); fill(colorName2); rect(xStart, yStart, width, height); ellipse(xStart, yStart, width, height); }

We use stroke the same way as fill. You can set the outline color of a shape by using stroke() with a color name. All of the shapes will use the same stroke color until you change it. Also, instead of giving a color name, you can just give the three RGB values directly instead. (You don’t have to create a color for each fill/stroke statement.) So you can do this: stroke(colorName3); Or this: stroke(redValue3, greenValue3, blueValue3);

New material: stroke! Remember that green  numbers, blue  names. void setup() { color colorName; colorName = color(redValue, greenValue, blueValue); background(colorName); size(width, height); } void draw() { color colorName2 = color(redValue2, greenValue2, blueValue2); fill(colorName2); stroke(redValue3, greenValue3, blueValue3); rect(xStart, yStart, width, height); ellipse(xStart, yStart, width, height); }

We can use strokeWeight to change the thickness of our outline. strokeWeight takes just one argument: a number that can have a decimal point (called a float, which stands for “floating-point decimal.”) You can call strokeWeight before your shapes to make the outlines thicker or thinner. The existing strokeWeight for all your outlines is 1, but you can change it by setting a different strokeWeight.

New material: strokeWeight! Remember that green  numbers, blue  names. void setup() { color colorName = color(redValue, greenValue, blueValue); background(colorName); size(width, height); } void draw() { color colorName2 = color(redValue2, greenValue2, blueValue2); fill(colorName2); stroke(redValue3, greenValue3, blueValue3); strokeWeight(lineThickness); rect(xStart, yStart, width, height); ellipse(xStart, yStart, width, height); }

What’s the command to make triangles? triangle(), of course! triangle() takes six arguments, which are coordinate pairs for the three corners of a triangle. So the command looks like this: triangle(x1, y1, x2, y2, x3, y3);

Here’s what that looks like. #4: y2 #1: x1 #5: x3 #6: y3 triangle(x1, y1, x2, y2, x3, y3); #3: x2 #2: y1

New material: triangle! Remember that green  numbers, blue  names. void setup() { color colorName = color(redValue, greenValue, blueValue); background(colorName); size(width, height); } void draw() { color colorName2 = color(redValue2, greenValue2, blueValue2); fill(colorName2); stroke(redValue3, greenValue3, blueValue3); strokeWeight(lineThickness); rect(xStart, yStart, width, height); ellipse(xStart, yStart, width, height); triangle(x1, y1, x2, y2, x3, y3); }

You can make custom shapes by using the beginShape command. The custom shape command starts with beginShape(). You then give the x, y coordinates of a series of vertices like this: vertex(x, y); Finally, finish your shape with endShape(). You can also try using endShape(CLOSE) instead.

New material: beginShape/vertex/endShape! Remember that green  numbers, blue  names. void setup() { color colorName = color(redValue, greenValue, blueValue); background(colorName); size(width, height); } void draw() { beginShape(); vertex(x, y); endShape(); // try using endShape(CLOSE) instead. }