Programming in Processing

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

2. Last week I: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. Last week 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. Using variables to hold information • We can use variables to hold pieces of information. • Variables are names (like x or boo or supercalafragalistic333) that follow our regular naming conventions and hold information about something. • We’re going to learn two types of number variables, called int and float.

5. INT vs. FLOAT • int stands for ‘integer’. That means we can use any positive or negative number that doesn’t have a decimal point • -3, -2, -1, 0, 1, 2, 3…. • float stands for ‘floating-point decimal.’ That means our number should have a decimal point, even if there are only 0s afterwards. • 5583.3667, -333.001, .453, 1.2345, 4.8

6. We declare ints and floats the same way we declared colors. int a = 5; int b = 4938; float c = 27.5; float d = 292724.99;

7. We can combine the declarations: int a = 5, b = 4938; float c = 27.5, d = 292724.99; • You can also change the values later on – just don’t DECLARE (using ‘int’ or ‘float’) again. • If we’ve already written the code from above… we can write this stuff after. a = 7; // good b = 43392; // good c = 403.22; // good float d = 22.8; • // bad! You already declared ‘d’ using ‘float.’

8. Why do we care about creating variables? • They let us reference a piece of information while drawing things… and the information can be changing. • So, for instance, if the xStart of a circle is always at foo… • … and foo is increasing each time draw() runs… • then the xStart of the circle will also be increasing each time draw() runs… • And the circle will move across the screen!

9. How do we increase a variable by 1? • Three ways! • The long way: a = a + 1; • The very short way: a++; • And the medium-length-but-more-flexible-way: a += 1;

10. Let’s try making a circle move right across the screen. • Create a variable foo OUTSIDE of any of your methods. (It’ll be ‘global.) int foo = 0; • Add a circle to your draw() method, with xStart equal to foo. ellipse(foo, yStart, width, height); • Increment foo in draw() to make the circle move. foo++;

11. Try this: make a circle move right across the screen! color colorName = color(redValue, greenValue, blueValue); int foo = 0;// declaring the variable that will change void setup() { size(width, height); background(colorName); } void draw() { background(colorName);// add this to the beginning of draw() // here’s where your old code is ellipse(foo, yStart, width, height); foo++; // incrementing the variable }

12. How would you make it move the other direction? • Have it start on the other side of the screen; instead of initializing foo to 0, initialize it to the width of your screen. • Replace int foo = 0; with int foo = width; • Then, instead of INCREMENTING foo, you can DECREMENT it (make it get smaller, not bigger) • Replace foo++; with foo--;

13. Try this: make a circle move left across the screen! color colorName = color(redValue, greenValue, blueValue); int foo = width;// declaring the variable that will change void setup() { size(width, height); background(colorName); } void draw() { background(colorName);// add this to the beginning of draw() // here’s where your old code is ellipse(foo, yStart, width, height); foo--; // decrementing the variable }

14. How can we make the program change speed? • Add frameRate() to your setup method. • frameRate tells how you many times draw() will run per second. • More framesPerSecond  program runs faster. • Add this line to setup(): frameRate(framesPerSecond);

15. New topic: semi-opaque colors. • OPACITY is a measure of how not-see-through a color is. • A totally transparent color has an opacity of 0. You can see right through it. • A totally opaque color has an opacity of 255. You can’t see anything through it. • Opacities in between are partly see-through.

16. How can we make a color partially opaque? • Give a 4th argument to color, fill, or stroke. • (The first three are R, G, B.) • If you give 0 as a 4th argument: • the color/shape will be completely transparent. • If you give 255 as a 4th argument: • the color/shape will be completely opaque (which is the automatic setting.) • Try using values in between…

17. Try this: make some semi-opaque shapes! (This is in your handout.) void setup() { size(width, height); background(colorName); } void draw() { // here’s where your old code is fill(255, 0, 0);// this will be totally opaque red rect(50, 50, 20, 20); fill(255, 0, 0, 255);// this will be opaque red (same as before) rect(50, 100, 20, 20); fill(255, 0, 0, 50);// this will be a semi-opaque red rect(50, 150, 20, 20); fill(255, 0, 0, 0);// this will be totally transparent rect(50, 200, 20, 20); }