Animation in Processing

Table of Contents

• What are animations
• What is the setup function in processing
• What is the draw function in processing
• How animations are drawn
• Other tips and tricks

​

What are Animations

What are Animations

• Object that moves over time
• Something that always impresses people
• In Processing: can be achieved using the draw function

The setup function

The setup Function

• Only runs once
• Sets up the window for an animation (who would’ve guessed)

void setup()

{

size(800, 500);

background(0, 0, 0);

stroke(225);

frameRate(60);

}

Width of window

Height of window

RGB values of the background color

Color of your draw commands

Number of times your frame refreshes per second (or how many times draw(); is called per second)

The draw function

The draw function

• Acts like a never ending loop
• Is called over and over again
• Is used for animations
• Can have draw commands inside or can call other functions

void draw ()

{

//call other functions or use draw commands (and increment variables used //in animation)

}

How to Draw Animations

How to Draw Animations

Example 1: drawing inside the draw function

//all your global variables (usually use in drawing commands)

int x =0;

void setup()

{

size(800, 500);

background (0,0,0);

stroke(225);

frameRate(60);

}

​

Defaults at 60 (not sure if you’re allowed to use it yet)

How to Draw Animations

void draw ()

{

background (0,0,0);

drawLine(x, 0, x, 20);

x = x+1;

}

​

​

How to Draw Animations

Example 2: drawing outside the draw function

//all your global variables (usually use in drawing commands)

int x =0;

void setup()

{

size(800, 500);

background (0,0,0);

stroke(225);

frameRate(60);

}

​

How to Draw Animations

void moveLine ()

{

x = x +2;

}

void drawTheLine ()

{

background (0,0,0);

stroke(225);

drawLine(x, 0, x, 20);

}

​

How to Draw Animations

void draw ()

{

moveLine();

drawTheLine();

}

​

​

Tips and Tricks

Tips and Tricks

• Want to make stuff bounce off the edge of a screen a without an if statement?
• Use 2 of the same objects (one on screen and one off screen) and have them meet at a point (and keep going)

Tips and Tricks

• Want to make something slow to a stop?
• Have a function that adjusts how far the object travels each time draw is called

double speed = 16;

int x =0;

void setup()

{

size(800, 500);

background (0,0,0);

stroke(225);

frameRate(10);

}

Tips and Tricks

​

void speedChange ()

{

speed = speed/1.1;

}

void draw()

{

background (0,0,0);

stroke(225);

line(x, 0, x, 20);

x = x+speed;

speedChange();

}

Credits go to Andy for thinking of these cool animation tips