Programming with Processing - Movement

	rogramming
	with
	rocessing

As alluded to in the previous assignment, we are going to add some behaviors to our figures. Specifically, we will add and 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, 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 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.