Programming in Processing

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

2. Two weeks ago, part 1:stroke, strokeWeight, fill…rect, ellipse, triangle…Remember that green numbers, blue  names. void setup() { size(width, height); color colorName = color(redValue, greenValue, blueValue); background(colorName); } 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); }

3. Two weeks ago, part II: 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); vertex(x, y); vertex(x, y); vertex(x, y); endShape(); // try using endShape(CLOSE) instead. }

4. Here’s how we make a circle move right across the screen. int foo = 0;// declaring the variable that will change color colorName = color(redValue, greenValue, blueValue); void setup() { size(width, height); background(colorName); } void draw() { background(colorName); ellipse(foo, yStart, width, height); foo = foo + 1; // incrementing the variable }

5. Here’s how we make a circle move left across the screen. int foo = width;// declaring the variable that will change color colorName = color(redValue, greenValue, blueValue); void setup() { size(width, height); background(colorName); } void draw() { background(colorName); ellipse(foo, yStart, width, height); foo = foo - 1; // decrementing the variable }

6. But how do we make it start over at the left, after it goes off the right? • We need to use CONDITIONAL STATEMENTS. • We have three main operators: < “less than?” > “greater than?” == “equal to?”

7. They work like this. • “If x is bigger than 20….” if (x > 20) { // something happens here; } • “If y is less than 0…” if (y < 0) { // something happens here; } • “If z is equal to 50…” if (z == 50) { // something happens here; }

8. How do we use them here? • First let’s check for a shape going off the right side of the screen. • When the shape goes off, the variable controlling the xStart (say, foo) will be greater than the width of the window. • We will want to reset foo to zero if that happens. • So we want to say, “When foo is greater than width, set foo to zero.”

9. Like this: if (foo > width) { foo = 0; }

10. Let’s make the circle start over on the left side once it goes off the right. int foo = 0; // declaring the variable that will change color colorName = color(redValue, greenValue, blueValue); void setup() { size(width, height); background(colorName); } void draw() { background(colorName); ellipse(foo, yStart, width, height); foo = foo + 1; if (foo > width) { foo = 0; } }

11. What if we want to make a shape move back and forth? • Instead of just adding 1 to foo, let’s create a variable called change. Since foo = foo + change now… • We want to change to be +1 while moving RIGHT -1 while moving LEFT

12. When do we change change? • Let’s go left when we reach the right side. We reach the right side when foo is greater than width. • Going left: change = -1 • Let’s go right when we reach the left side. We reach the right side when foo is less than 0. • Going right: change = 1

13. Let’s go left when we reach the right side. We reach the right side when foo is greater than width. if (foo > width){ change = -1; } • Let’s go right when we reach the left side. We reach the left side when foo is less than 0. if (foo < 0){ change = 1; }

14. Let’s make the circle move back and forth. int foo = 0, change = 1; // start off going right color colorName = color(redValue, greenValue, blueValue); void setup() { size(width, height); background(colorName); } void draw() { background(colorName); ellipse(foo, yStart, width, height); foo = foo + change; if (foo > width) { // off right side change = -1; // go left } if (foo < 0) { // off left side change = 1; // go right } }

15. Adding text to your program • We use three commands to put text on the screen: • createFont • lets us make a PFont. • textFont • lets us pick a PFont and a color. • text • lets us set a String, an xStart, and a yStart.

16. We’ll use red for strings (and green for numbers and blue for names.) PFont newFont = createFont(fontName); textFont(newFont, fontSize); text(screenText, xStart, yStart); Here are some font names. They’re in your handout: Arial, Book Antiqua, Century Gothic, Century Schoolbook, Curlz MT, Georgia, Gill Sans MT, Goudy Stout, Impact, Papyrus, Perpetua, Tahoma, Times New Roman, Tw Cen MT

17. So, you’ll add something like this to your code: PFont newFont = createFont("Times New Roman”); textFont(newFont, 16); text(“hello world!”, 150, 100); Every time you want to add more text, add another text statement. Only use createFont and textFont when you want to change fonts.

18. Let’s print text to the screen. void setup() { size(width, height); background(colorName); } void draw() {... PFont newFont = createFont(fontName); textFont(newFont, fontSize); text(screenText, xStart, yStart); } Here are some font names. They’re in your handout: Arial, Book Antiqua, Century Gothic, Century Schoolbook, Curlz MT, Georgia, Gill Sans MT, Goudy Stout, Impact, Papyrus, Perpetua, Tahoma, Times New Roman, Tw Cen MT