Module 07 : Event-Driven Programming

• Topics
• Resources
• In-Class Activities
• Sample Quiz Question

Topics

• Responding to user events (mouse actions/movements, and key presses)

New processing syntax:

• callback routines: mousePressed(), mouseReleased(), mouseClicked(), mouseMoved(), mouseDragged(), keyPressed(), keyReleased(), keyTyped()
• Additional built-in variables: mouseButton, key, keyCode

Resources

• Watch Daniel Shiffman Video 3.2, Events (7 minutes)
  (available at learningprocessing.com and YouTube)

• Review the sections of the processing.org tutorial on interactivity titled "Mouse events" and "Key events"

In-Class Activities

Try to recreate any of the following interactive sketches on your own.

Placing Circles
In this sketch, a circle is drawn with each mouse click, as indicated when the mouseClicked() function is triggered. Note well that you must include a trivial draw() function for Processing to be in active mode, even if the body of the draw() function does not need to do anything.

Changing Background
In this sketch, the background changing color while the mouse button is held down, but reverts to its original color when the button is released. All the actions take place within the mousePressed()and mouseReleased() functions (however you must included a trivial draw() function for Processing to be in active mode).

Circles with Random Color Choice
In this sketch, a circle is repeatedly painted while following the mouse, and when the user clicks the mouse, a new random color is chosen for subsequent circles.

Painting Line 2
This variant of the Painting Line sketch from the previous module has an added feature that the canvas is cleared any time the user presses a key (detected via the keyPressed() function).

Painting Line 3
This sketch has an added feature that a mouse click re-anchors the fixed endpoint of subsequently drawn lines.

Painting Line 4
In this revision, the mouseDragged() method is used to paint a line from the mouse to a fixed point (originally, the center of the screen) whenever the mouse is dragged with the button pressed. That fixed point can be re-anchored with a mouse click. Nothing should be drawn when the mouse is not currently pressed, and the entire canvas is erased upon any key press.

Circles when Dragging
In this sketch, a circle is only drawn when the mouse is pressed and dragged (based on use of the mouseDragged() function). The fill color is chosen at random whenever any key is pressed, and the current fill color is displayed at the bottom of the canvas.

Stretching an Ellipse
This sketch is an example of a reasonable user interface for many paint programs, where a user can place a single ellipse by clicking and dragging the mouse. To achieve the effect, you simply have to think about what you want to have happen in response to events mousePressed(), mouseDragged(), and mouseReleased().

Stretching a Rectangle
A similar interactive sketch allowing the user to create a rectangle by clicking and dragging.

Sample Quiz Question