Programming in Processing

Taught by Ms. MadsenAssistants: 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);

vertex(x, y);vertex(x, y);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.

• 5583.3667, -333.001, .453, 1.2345, 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 = 292724.99;

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; // goodb = 43392; // goodc = 403.22; // goodfloat 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 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…

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 redrect(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 redrect(50, 150, 20, 20);

fill(255, 0, 0, 0); // this will be totally transparentrect(50, 200, 20, 20);

}