PROCESSING
SIMPLE ANIMATION
In this tutorial we'll look to add animation to our sketch.

The previous example '"Hello World" demonstrates how to get started with processing.
First open processing and start up a new sketch with the following basic code:
01
02
03
04
05
06
07 
void setup(){
   size(500,500); 
}

void draw(){

}
Which will give us a window 500x500px window. Nothing is in our draw function yet so we'll get a blank screen.. lets change that.
Lets look to draw a shape in our draw function:
01
02
03
04
05
06
07 
void setup(){
   size(500,500); 
}

void draw(){
    ellipse(50,50,30,30);
}
That will draw a circle at x=50, y=50, width=30, height=30

You can see the circle is a bit rough, by default shapes are drawn in a primitive manner for speed. We can add a setting in our setup function to specify smoother shapes:
01
02
03
04
05
06
07
08 
    void setup(){
       size(500,500); 
       smooth(); 
    }

    void draw(){
        ellipse(50,50,30,30);
    }
Now we have a smooth - but static - ellipse. Lets make it move.
The first step to animating objects in processing is to understand how our sketch is being displayed. Like we discussed in the first tutorial, processing draws whatever we have in our draw function a set amount of times per second, and we can understand this using the analogy of frames. So to begin moving things we would need to manipulate the position every frame so that our eyes stitch together the difference and processes it as movement.

To do this, we'll use variables to store and change a value that will represent the position of our object so that every frame we can increment our position by a rate to create motion.
01
02
03
04
05
06
07
08
09
10
11 
int x;

void setup(){
   size(500,500); 
   smooth();
   x = 50;
}

void draw(){
   ellipse(x,50,30,30);
}
Above, we created a new variable x with the type int (integer). In our setup function we assign x a default value, and then finally in the draw we applied our new variable x to the ellipse. Nothing should be different since we assign the same value to x that we had in our ellipse function beforehand.

If you see the same, you've successfully created our new variable x :)
Now lets finally make it move:
01
02
03
04
05
06
07
08
09
10
11
12
13 
int x;

void setup(){
   size(500,500); 
   smooth();
   x = 50;
}

void draw(){
   ellipse(x,50,30,30);
   x+=1;
   // means: x = x + 1;   
}
So above we've added x into our draw function which says x is itself + 1 so that each frame our x position is 1 pixel greater than it was last frame. A quick way to express this is to use x+=1 (which is the same as x = x + 1).

The result to the left is what we get.

Its smearing since we never redraw the background, causing an archive of every movement to be display in the background. If we add the background call we'll get a clean animation.
01
02
03
04
05
06
07
08
09
10
11
12
13 
int x;

void setup(){
   size(500,500); 
   smooth();
   x = 50;
}

void draw(){
   background(200,200,200);
   ellipse(x,50,30,30);
   x+=1;
}
With that we have a ball that cleanly moves across the screen, continuing on until we quit the app. With the next tutorial we can look at controlling our ball more.