Moving Shapes

There are two special functions offered by Processing that will help us make moving objects: setup() and draw().

The setup function is only called once, right when your program first starts. We use the setup function to set the size of the display window and to load any images we may use in the program.

The draw function will help us make things move, because Processing calls the draw function 60 times per second the whole time the program is running. A good way to think of the draw function is like a bunch of frames that make up a movie. The images in a movie are static, but because we view them in quick succession, it appears as if they are moving.

The setup and draw functions are different from the other functions you have seen so far, like ellipse or line. The word “void” is in front of both setup and draw, and both are followed by a set of parenthesis.We will learn later why the functions are formatted in this particular way, but for now just know that when you use the setup and draw functions that you have to use the same format as above.

Lets start with making something simple, getting a circle to move across the screen. The circle will move across the screen and then disappear. We will learn how to make a continuous scrolling circle in the next chapters.

int xPos = 0;<br>
void setup() {<br>
size(500, 300);<br>
}<br>
void draw() {<br>
background(255, 255, 255);<br>
fill(39, 58, 150);<br>
ellipse(xPos, 150, 100, 100);<br>
xPos += 1;<br>
}<br>