Students who complete this lab will demonstrate that they can:

Digital Animation

Processing supports the digital animation of a variety of geometric figures.

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 named Scribbler whose output is like the one shown above (save all of your code for this lab in a directory called lab04a ). 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:

Include brief answers to these questions in your program documentation.

Human-Computer Interaction

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

Exercise 4a.2

Save a copy of your Scribbler from above as InteractiveScribbler and modify it as follows:

  • Modify the copy 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).

  • Once you have the above version working, improve your code so that each time the user presses the mouse, the color of the lines being drawn is changed to a random color. Do you need a global variable to make this change?

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 and interaction 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

Create an interactive program called Tracer 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 using an empty draw() method (required for animation) and then writing a 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 doesn't need to declare/define any new variables, because Processing already stores the current and previous location of the mouse.

Use this version of your program in the next exercise.

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. Hint: Where does Processing like to put auxiliary files?

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

Character and String Expressions

In the previous lab we explored numeric types, but there are many others at our disposal.
Exercise 4a.5:
  1. What do the following statements do (if anything)? You will want to evaluate each statement in turn. If any are invalid, comment them out, and note the error.

    char char1 = 'H';
    char friendlyChar = 'Hi';
    char emptyChar = '';
    String string1 = char1;
    String emptyString = "";
    Explain your results.
  2. What is the return value of the following expressions (if any)?

    "All your base" + "are belong to us."
    "Somebody" + ' ' + "set us up the bomb."
    "A.D. " + 2101
    Explain your results.

Exercise 4a.6
Create a program called CountAnimation that produces the output shown here, with one line appearing each frame. You can do this as follows:
  • Data: The current line number (an int) and the current output (a String)
  • Setup:
    1. Make the output window 300 pixels wide and high
    2. Change the background color to something other than gray
    3. Initialize the line number to be 1 and the output to be the String 1.
  • Draw:
    1. Use text() to place the current output string at a location dependent on the current line number.
    2. Update the line number to increase by 1.
    3. Update the output to append a space and the new line number.
The default font is fine, but if you would like to use a different one, update your code appropriately.

Checking In

Submit all the code and supporting files for the exercises in this lab. We will grade this exercise according to the following criteria: