Programming in Processing

Taught by Ms. MadsenAssistants: Ms. Fischer and Ms. Yen

Winsor School, 3/5/08

Lots of stuff today…

• So stay focused!• We’re going to go through each thing

pretty quickly, but they’re all in your handout In Great Detail.

• Cool things we’re learning today:– Writing text to the screen– Making your animations “fade”– Using information from the mouse– Making randomly generated numbers

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 PFont and size.

– text • lets us set a String, an xStart, and a yStart.

We’ll use red for strings - (“Strings look like this”) (and green for numbers and blue for names, as usual.)

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

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.

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. Don’t forget the “” around the name: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

How do we ‘fade’ during our animations?

• We use the ‘opacity’ concept we were talking about before.

• Instead of the ‘background’ call at the beginning of draw(), we’re going to create a semi-opaque rectangle.

How do we fill a shape with a semi-opaque color?

1. Create a normal color…

2. …then set the fill opacity to something less than 255.

color myColor = color(255, 100, 0);fill(myColor, 50);

Opacity – between 0 and 255. (255 is default.)

How do we create a rectangle the same size as our window?

width and height in draw() are automatically defined as whatever width and height the window currently is.

So this will always create a rectangle the same size as our window:

rect(0, 0, width, height);

To create the ‘fade’ effect, add these lines to the beginning of draw():

(and get rid of the background() command, too)

color myColor = color(255, 100, 0);

fill(myColor, 50);

rect(0, 0, width, height);

Making this BIGGER (more opaque) will make the shape fade FASTER.

How do we get information from the mouse?

• Most of the time, we just need mouseX and mouseY.

mouseX

mouseY

You can use these in draw() for the xStart and yStart of a shape, for

example, or for RGB values.

Try adding a couple of lines like this to draw():

ellipse(mouseX, mouseY, 50, 70);

fill(mouseX, mouseY, mouseX, mouseY);

background(50, 50, mouseX + mouseY);

Another thing we can use is a new method called mousePressed().

• setup() is called just once, at the beginning of a program…

• draw() is called a certain number of times per second…

• … and mousePressed() is called whenever the mouse is clicked by the user.

The mousePressed method looks like this:

void mousePressed(){

}

Here are some things you could put inside it:foo = 10; // from last week’s project

change = -1; // from last week’s project

ellipse(50, 50, 10, 10); // will work better with ‘fade’ effect

ellipse(mouseX, mouseY, 10, 10); // will work better with ‘fade’

effect

Using random()

• To get a random number between 0 and end:

random(end);

• To get a random number between begin and end:

random(begin, end);

Try using random() in your shapes or your color declarations.

Like this:

fill(255, 0, random(255));

stroke(random(200, 255), 0, 0);

strokeWeight(random(5));

ellipse(random(width), 100, random(50), random(50));