Objectives

Digital Animation

Processing supports digital animation of geometric figures such the following:

This program models the semi-random movement of an object in 2D space using Brownian motion. You can animate this behavior by setting a fixed starting point and then repeatedly varying the x and the y coordinates by a small, random amount.

You can run the animation by clicking on the animation image to the right. You must have the Java runtime environment (JRE) installed for this to work and you may need to enter the course materials password.

Exercise 4a.1:

Write an animation program whose output is like the one shown above. Start your scribble in the middle of the output pane and move it a short random distance away from its current position on each successive frame. Ensure that it never leaves the visible part of the canvas shown in the output pane.

To implement the animation, you can follow an algorithm such as this one:

Note that in this algorithm the scope of the coordinates (x, y) is global to the whole program while the scope of (newX, newY) is local to the draw() method. When you have your program running, take a moment to ask yourself these questions: Could we make x and y local to draw()? Would the animation still run? Could we make newX and newY global? Would it be good idea to do it that way?

Human-Computer Interaction

Processing also supports mouse-based interaction between the user and the program.

Exercise 4a.2:

Modify your program from the previous exercise so that it re-sets the random scribbling to the location specified by the mouse click. Your program should produce output that looks something like the one shown on the right.

You can implement this by adding a mousePressed() method to your current prototype that changes the saved (x, y) coordinates to the coordinates of the most recent mouse press (stored automatically by Processing in the mouseX and mouseY variables).

Save this version of your program so that you can turn it in later.

Although Processing requires that the draw() method be defined for all animation programs, it doesn’t require that that method contain code. It could be defined to do nothing: 

void draw() { }

This can be used in programs that respond to user initiated events only and not to a pre-defined frame rate.

Exercise 4a.3:

Modify your program from the previous exercise so that it becomes an interactive program that allows the user to scribble manually. Your program should allow the user to create output that looks something the one shown on the right by pressing and dragging the mouse around on the output pane.

You can implement this by removing the code from the draw() and mousePressed() methods in the previous exercise writing a new mouseDragged() method that draws a line from the previous mouse location (pmouseX, pmouseY) to the current mouse location (mouseX, mouseY). Note that with this implementation, your program no longer needs to store the previous mouse position because Processing already stores the previous location of the mouse.

Save this version of your program so that you can turn it in later.

Processing applications can also respond to key-pressing events.

Exercise 4a.4:

Modify your program from the previous exercise so that when the user presses any key on the keyboard, the program dumps the current image to a JPG image file. You can implement this by adding a keyPressed() method that calls the save() method. Save the image using a hard-coded filename each time. Be sure that you can find the image file that Processing dumps.

Save this version of your program so that you can turn it in later.

Checking In

Submit all the code and supporting files for the exercises in this lab.