Course Home | Documentation | Lab Hours/Tutoring | Projects | Quizzes | Schedule | Submit

Saint Louis University

Computer Science 1050
Introduction to Computer Science: Multimedia

Michael Goldwasser

Spring 2016

Dept. of Math & Computer Science

Module 07 : Event-Driven Programming


New processing syntax:


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.

Implementation: spoiler

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

Implementation: spoiler

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.

Implementation: spoiler

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

Implementation: spoiler

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

Implementation: spoiler

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.

Implementation: spoiler

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.

Implementation: spoiler

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().

Implementation: spoiler

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

Implementation: spoiler

Sample Quiz Question

Michael Goldwasser
CSCI 1050, Spring 2016
Last modified: Thursday, 04 February 2016
Course Home | Documentation | Lab Hours/Tutoring | Projects | Quizzes | Schedule | Submit