LESSON 3: ANIMATION
INTRODUCTION
It is very easy to program abstract animations in Processing. In this lesson we will go one step beyond and play around with mathematics to animate a shape. Animation is a big part of creative coding.
STEP 1
Once again, for this lesson our basic shape will be a circle. In the example below we are drawing a circle in the middle of our screen, like we did in the first lesson.
void setup() {
size(400, 400);
}
void draw() {
background(0);
stroke(255); // every outline will be white
strokeWeight(5); // every outline will be 5 pixels wide
noFill(); // the inside of a shape will not have a color
ellipse(width / 2, height / 2, 50, 50); // draw a circle in the center of the screen
}
STEP 2
For our animations we can use the sine-function. Sine? You will probably have heard of sine and cosine. In mathematics these functions are used to indicate the ratio of angles and the lengths of line segments. Think, for instance, of a triangle. You also need sine and cosine to make a shape in 3D, because you cannot create dimensions without angles.
The output of a sine-function is a number between -1 and 1.
If we want to use this number, for instance to influence the size of a circle, we have to ‘convert’ this number to a number between the actual size and the size we want. We can do this by using the function map. Map has 5 arguments:
- the input number (in our case the result of the sine function)
- the lowest value of the input number (-1)
- the highest value of the input number (1)
- the lowest value of the output number
- the highest value of the output number
If, for instance, we want to go from a range [-1, 1] to a range [40, 300] we enter the following:
float output = map(input, -1, 1, 40, 300);
void setup() {
size(400, 400);
}
void draw() {
background(0);
stroke(255); // every outline will be white
strokeWeight(5); // every line will be 5 pixels wide
noFill(); // the inside of a shape will not have a color
float phase = frameCount * 0.05; // determine a ‘phase’ for the sine function
// try changing 0.05 to something else to change the speed
float radius = 75; // how big will the movement be?
float x = sin(phase); // this will be a value between -1 and 1
float radius = map(x, -1, 1, 40, 300); // transform the value to a range of [40, 300]
ellipse(width / 2, height / 2, radius, radius); // draw a circle with this radius
}
STEP 3
We can animate other parameters of our shape as well, using the same values. A parameter is a variable that is given a certain value. A simple example; the thermostat is the parameter of your heating system. In this step we are going to try it with the thickness of the circle’s outline. We are using the map function again, but with a different output-range.
void setup() {
size(400, 400);
void draw() {
background(0);
stroke(255);
noFill();
float phase = frameCount * 0.015; // determine a ‘phase’ for the sine function
float x = sin(phase); // we will use this value for animating radius and lineWidth
float radius = map(x, -1, 1, 40, 300); // determine the radius
float lineWidth = map(x, -1, 1, 0, 5); // and the lineWidth
strokeWeight(lineWidth); // set the lineWidth
ellipse(width / 2, height / 2, radius, radius); // draw a circle with the radius
}