Programming in Processing

1
Programming in Processing

• Taught by Ms. Madsen
• Assistants Ms. Fischer and Ms. Yen
• Winsor School, 3/5/08

2
Lots of stuff today

• So stay focused!
• Were going to go through each thing pretty
  quickly, but theyre all in your handout In Great
  Detail.
• Cool things were learning today
• Writing text to the screen
• Making your animations fade
• Using information from the mouse
• Making randomly generated numbers

3
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.

4
Well 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. Theyre 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

5
So, youll 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.

6
Lets print text to the screen.
void setup() size(width, height) background(c
olorName) void draw() ... PFont newFont
createFont(fontName) textFont(newFont,
fontSize) text(screenText, xStart, yStart)
Here are some font names. Dont 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
7
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(), were going to create a semi-opaque
  rectangle.

8
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.)
9
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)

10
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.
11
How do we get information from the mouse?

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

mouseY
mouseX
12
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)

13
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.

14
The mousePressed method looks like this

• void mousePressed()
• Here are some things you could put inside it
• foo 10 // from last weeks project
• change -1 // from last weeks project
• ellipse(50, 50, 10, 10)
• // will work better with fade effect
• ellipse(mouseX, mouseY, 10, 10)
• // will work better with fade effect

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

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