Title: Programming in Processing
1Programming in Processing
- Taught by Ms. Madsen
- Assistants Ms. Fischer and Ms. Yen
- Winsor School, 3/5/08
2Lots 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
3Adding 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.
4Well 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
5So, 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.
6Lets 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
7How 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.
8How 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.)
9How 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)
10To 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.
11How do we get information from the mouse?
- Most of the time, we just need mouseX and mouseY.
mouseY
mouseX
12You 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)
13Another 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.
14The 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
15Using random()
- To get a random number between 0 and end
- random(end)
- To get a random number between begin and end
- random(begin, end)
16Try 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))