The Coder's Handbook

Animation

What Is Animation?

Frames and Animation

Animation is actually just drawing a series of images that change a little bit over time. For example, the image to our right consists of a few frames - or different images - that alternate and repeat in a pattern.


This gives the illusion of motion. To make animations in Processing, we simply need to change what we decide to draw each frame.

MOTION

Using Variables For Animation


Shapes take a series of integers as parameters. Instead of using a fixed value, we could pass a variable. Each frame, we change the variable. Consider a simple example:


Example #1 - Animation With Trails

int xPos = 0; // Declare variable at the top of your code

void setup()

{

size(500, 500);

}


void draw()

{

rect(xPos , 200, 100, 50); // Make a rectangle using x

xPos = xPos + 2; // Increase x by one

}


Run this code in a Processing project. You'll find that the shape moves across the screen. But it's leaving a trail. That's because we keep drawing over the old image each time. We need to clear the canvas. Try revising the draw() method to add in a background:


Example #2 - Clean Animation

void draw()

{

background(100);

rect(xPos, 200, 100, 50); // Make a rectangle using x

xPos = xPos + 2; // Increase x by one

}


Now you'll just see a box floating across the screen. Awesome!

Example #1


Example #2

SPEED

Variable Speed


Of course, we can have even more fun by making the speed change:

Code

int xPos = 0; // Starting position

int xSpeed = 1; // How many pixels we move each frame

void draw()

{

rect(xPos , 200, 100, 50);

xPos = xPos + xSpeed; // Move to the right by xSpeed pixels

xSpeed = xSpeed + 1; // Increase xSpeed by one.

}

Float


The above example was probably way too fast. We might want to have speeds that move less than a full pixel each frame. A float is a type of variable that stores decimal values. Note that when we make speed a float, we'll also need to make position a float since we're adding them together.


Code

float xPos = 0; // Starting position

float xSpeed = 0.5; // How many pixels we move each frame

void draw()

{

rect(xPos , 200, 100, 50);

xPos = xPos + xSpeed; // Move to the right by xSpeed pixels

xSpeed = xSpeed + 0.1; // Increase xSpeed by 0.1

}

SETUP and WIDTH/HEIGHT

Width and Height With Variables


Often it's helpful to use a built-in variable instead of a specific number. When we do this, it's important that while we declare the variable at the top, we wait to initialize it until setup. Using width and height before calling size() results in them being zero.


Consider this example of a circle at the center of the screen that grows:


Code

float xPos; // Starting x position

float yPos; // Starting y position

float diameter; // How wide and tall the circle is

float growSpeed; // How many pixels we grow each frame

void setup()

{

// Creates the canvas. Before this, can't use width and height.

size(500, 500);


// Initialize variables inside of setup so we can use width/height

xPos = width / 2;

yPos = height / 2;

diameter = 50;

growSpeed = 0.5;

}


void draw()

{

ellipse(xPos, yPos, diameter , diameter);

diameter= diameter + growSpeed;

}

WRAPPING AND BOUNCING

Using Conditionals


We can use if statements to cause our animations to change based on the state of the program. Consider two examples below:

Wrapping


If we go off the right side of the screen, wrap back on the left side.


Code

float xPos = 0;

float xSpeed = 0.5;


void draw()

{
background(100);

rect(xPos , 200, 100, 50);

xPos = xPos + xSpeed;

if(xPos > width)

{

xPos = 0;

}

}

Bouncing


If we go off the right side of the screen, change direction


Code

float xPos = 0;

float xSpeed = 0.5;


void draw()

{
background(100);

rect(xPos , 200, 100, 50);

xPos = xPos + xSpeed;

if(xPos > width)

{

xSpeed = xSpeed * -1;

}

}

COLOR EXAMPLES

Example - Changing Colors


int red = 0;


void draw()

{

fill(red, 0, 0);

rect(200, 200, 100, 50);

red++; // Increase red by one

}

Example - Fading and Transparency


int alpha = 255;


void draw()

{

fill(255, 100, 0, alpha);

rect(200, 200, 100, 50);

alpha--; // Decrease alpha by one

}

RESOURCES

  • Chapter 4 - Variables

  • Chapter 5 - Conditionals