### Objectives

Students who complete this lab will demonstrate that they can:

• Implement graphical animations
• Implement interactive human-computer interfaces

# 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:

• Data: x & y coordinates (float)
• Setup:
1. Set the output panel size.
2. Initialize x & y to the center of the output panel.
• Draw:
1. Set `newX` and `newY` equal to new x-y coordinate values that are a small random distance away from where `x` and `y` were in the previous frame (Note that you can invoke the predefined random method to compute a small random number around 0 and the constrain method to ensure that the new coordinates are on the visible output pane);
2. Draw a line from the previous coordinates (`x`, `y`) to the new coordinates (`newX`, `newY`);
3. Set the old coordinates (`x`, `y`) equal to the new coordinates (`newX`, `newY`) - this ensures that the new coordinate values will be saved and used as the starting point in the next iteration.

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
 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 = "";
```
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```

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: Make the output window 300 pixels wide and high Change the background color to something other than gray Initialize the line number to be 1 and the output to be the String 1. Draw: Use `text()` to place the current output string at a location dependent on the current line number. Update the line number to increase by 1. 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:

• Correctness:
• 60% - Programs - Complete the first four of the programming exercises (15% each).
• 10% - Scope - Demonstrate an understanding of scope by including the answers to the questions in exercise 4a.1 in that program’s comments.
• 5% - Character and String Expressions - Complete accurate explanations of each expression.
• 15% - Count Animation - Complete the animation exercise.
• Understandability:
• 5% - Header Documentation - Document the code’s basic purpose, authors and assignment number.
• 5% - Code Documentation - Separate the logical blocks of your programs with useful comments and white space.