Movement

The Illusion of Movement

As alluded to in the previous assignment, we are going to add some behaviors to our figures. Specifically, we will add movement to our figures so that they can respond to user input.

Unlike with Scratch, Processing does not include pre-built blocks that move sprites around the screen. Instead, much like with cinematic film or old-fashioned flipbooks, we must redraw each scene anew every time we wish to alter it. Animation and movement are perceptual illusions created through rapid succession of nearly identical images (cf., the phi phenomenon).

Before animating our figures from Draw a Figure, let’s experiment with a simple example to explore how Processing supports this effect.

A Circle that Moves

Let’s begin by drawing a circle:

ellipse(50, 50, 80, 80);

Note that there is no circle() function. Of course, a circle is just a special form of an ellipse, much in the same way that a square is a special form of a rectangle. This line of code means “draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels.”

All of your Processing applications to this point have followed this format. The interpreter starts at the top of the source and executes each function or command in sequence as it moves down the list of instructions.

However, most basic programs in Processing follow a slightly more complex model, and this provides the framework for dynamic programs. In order to animate objects on the screen, we need to redraw the screen quickly while re-orienting the objects as they move (much as in film—as discussed earlier).

Processing provides this framework through the setup() and draw() functions. Up to now, you have used Processing functions to draw ellipses and rectangles or change colors. Processing includes these pre-written functions, and you, as the programmer, determine when and where they are used.

In this assignment, you will do something completely different. In fact, you and Processing will switch roles in a way. Processing will execute the setup() and draw() functions automatically to start the program and constantly redraw the screen. You will define what each of these functions actually does when Processing uses them.

Exercise

Type in, and execute, the following program:

void setup()
{
    size(480, 240);
}

void draw()
{
    if (mousePressed)
    {
        fill(0);
    }
    else
    {
        fill(255);
    }
    ellipse(mouseX, mouseY, 80, 80);
}

1) What does it do?

Answer:

The draw() function dictates how to redraw the screen. Processing defaults to redrawing the screen 60 times per second. This can be altered using the frameRate() function.

Insert the code frameRate(10); into your setup() function.

2) How does this change your program’s behavior?

Answer:

3) Why should we insert the frameRate() command into setup() rather than draw()?

Answer:

Swap the order of the parameters so that the ellipse() command reads ellipse(80, 80, mouseX, mouseY).

4) What does this do, and why?

Answer:

Insert the background(200); instruction at the very beginning in your draw() function block to have Processing redraw the background each time it refreshes the screen.

5) How does this affect the behavior of the program? Why?

Answer:

Additional Tutorials
The previous activity is further detailed in the official Processing tutorials. If you’d like more information about the Processing environment than outlined above, visit Processing Tutorial: Getting Started.