Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Programming in Processing Taught by Ms. Madsen Assistants: Ms. Fischer and Ms. Yen Winsor School, 2/20/08."— Presentation transcript:

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

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


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

Similar presentations


Ads by Google