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

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); }

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); endShape(); // try using endShape(CLOSE) instead. }

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.

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 , ,.453, , 4.8

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

We can combine the declarations: int a = 5, b = 4938; float c = 27.5, d = ; 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 = ; // good float d = 22.8; // bad! You already declared ‘d’ using ‘float.’

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!

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;

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++;

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 }

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--;

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 }

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);

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.

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

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); }