Class

1
Class 6 10/24/07

• What did we learn last time?
• Loop()
• frameRate
• If
• mousePressed
• What are we doing this time?
• Using the mouse!
• Making buttons!
• Playing around with Processing ?

2
Using mousePressed to center your object.

• Right under your distanceFromTop variable, give a
  distanceFromSide variable, which will also start
  wherever you want.
• int distanceFromTop 0
• int distanceFromSide 50 // 50 can be whatever
  you want
• When drawing your shape, draw it this way
• ellipse(distanceFromTop, distanceFromSide,
  width, height)
• Then add this to mousePressed
• distanceFromSide mouseX

3
Go ahead and add it.

• int distanceFromTop 0
• int distanceFromSide 50
• color backgroundColorName color(redValue,
  greenValue, blueValue)
• void setup()
• background(backgroundColorName)
• size(width, height)
• loop()
• void draw()
• background(backgroundColorName)
• ellipse(distanceFromSide, distanceFromTop,
  width, height)
• if (distanceFromTop gt height)
• distanceFromTop 0
• distanceFromTop

4
Next, lets make a button.

• To make a button, first we want to give some
  information about it to the whole program
  (outside of any methods near distanceFromTop.)
  You can make a bunch of ints at the same time at
  the beginning of your file like this
• int buttonXStart 0, buttonYStart 0,
  buttonWidth 20, buttonHeight10
• Use these numbers for now. You can pick your
  own later.
• Then lets make a rectangle in draw(), with its
  own special color, like this
• color buttonColor color(redValue, blueValue,
  greenValue)
• rect(buttonXStart, buttonYStart, buttonWidth,
  buttonHeight)
• Now well use an if statement in mousePressed to
  tell whether the (mouseX, mouseY) weve clicked
  is over the button
• void mousePressed()
• if ( (mouseX gt buttonXStart) (mouseX lt
  buttonXStartbuttonWidth)
• (mouseY gt buttonYStart) (mouseY lt
  buttonYStartbuttonHeight) )
• println(Button clicked!)

5
Here are some possibilities for what to put in
the button code. (These are all in your packet.)

• println(Button was clicked!)
• buttonXStart
• buttonYStart
• buttonColor color(redValue, blueValue,
  mouseX)
• backgroundColorName color(mouseX, mouseY,
  mouseX)
• I recommend trying one at a time first and then
  you can combine them!

6
Go ahead and add it.

• int distanceFromTop 0
• Int distanceFromSide 50
• color backgroundColorName color(redValue,
  greenValue, blueValue)
• int buttonXStart 0, buttonYStart 0,
  buttonWidth 20, buttonHeight10
• void setup()
• background(backgroundColorName)
• size(width, height)
• loop()
• void draw()
• background(backgroundColorName)
• color buttonColor color(redValue, blueValue,
  greenValue)
• rect(buttonXStart, buttonYStart, buttonWidth,
  buttonHeight)
• ellipse(distanceFromSide, distanceFromTop,
  width, height)
• if (distanceFromTop gt height)
• distanceFromTop 0

Here are some things your button could
do println(Button was clicked!) buttonXSta
rt buttonYStart buttonColor
color(redValue, blueValue, mouseX) backgroundCol
orName color(mouseX, mouseY, mouseX)
7
Save your files now.

• Go to
• Desktop
• My Documents
• Processing
• The file name will be username61 since its
  the first thing were saving in class 6.
• You can save other stuff today too, if you want
• Filenames will be username62, username63, etc.

8
One last thing before you get to play around
and I wont even make you test this. ?

• You can make colors partially transparent!
• When youre using the fill command, you give a
  percentage (0-100) of full color. 0 is totally
  transparent 100 is totally opaque (opposite of
  transparent) and 50 is halfway transparent.
• Here are two ways of doing the same thing.
• color newColor color(0,0,255,80) // this
  will be 20 transparent
• fill(newColor)
• color newColor color(0,0,255)
• fill(newColor, 80) // this will also be 20
  transparent
• (Either give 4 arguments to color, or give 2
  arguments to fill.)

9
Go ahead and try things out.

• Here are some ideas
• Maybe you want the background color to change
  every time that you click the mouse. You can make
  another integer variable, redLevel, outside of
  any methods near distanceFromTop and set it
  to zero. Then, add the following code to
  mousePressed(),
• redLevel
• backgroundColorName color(redLevel,
  greenValue, blueValue)
• (Or, you could make a variable for a shapes
  transparency level and change THAT everytime the
  mouse is pressed)
• What if you want to have another shape moving
  from bottom to top? You should make another
  integer variable outside of your methods,
  distanceFromTop2, and set that equal to the
  height of your window at the beginning. Then, add
  a line like this to draw()
• rect(xStart, distanceFromTop2, width, height)
• distanceFromTop2--
• You can add another if statement (like the one we
  added before) to make sure it doesnt go off the
  top of the screen. (Why dont we have to worry
  about it going off the bottom of the screen?)
• if (distanceFromTop2 lt 0)
• distanceFromTop2 height