An Introduction to Processing - Part II

Posted by Jan Vantomme on 06 September 2007.
Tags: , ,

In this second part of the introduction to Processing, you will learn how to create a simple animation with Processing. If you have missed the first article, you might better read it first before proceeding with this tutorial.

A first animation

You don’t need a lot of code to create an animation in Processing. The code below will do just fine. In the setup() function you need to specify a framerate, in the draw() function you need to draw a shape with at least one parameter that changes every time the screen refreshes. In this example the circle will get 1 pixel bigger in each frame.

int circleSize 100;

void setup()
{
    size
(420420);
    
ellipseMode(CENTER);
    
frameRate(30);
}

void draw
()
{
    circleSize 
+= 1;
    
ellipse(width/2height/2circleSizecircleSize);

A circle that stops growing

In this example, the circle will grow from 100 to 300 pixels.

int circleSize = 100;

void setup()
{
    size
(420420);
    
ellipseMode(CENTER);
    
frameRate(30);
    
noStroke();
    
background(220220255);
    
fill(2550255);
    
smooth();
}

void draw
()
{
    
if (circleSize <= 300{
        circleSize 
+= 1;
    
}
    ellipse
(width/2height/2circleSizecircleSize);

A pulsating circle

In this example, the circle will grow from 100 to 300 pixels and then shrink again to 100 pixels. Paste this code in a new Processing window and run the code.

int circleSize 100;
int growOrShrink 1;

void setup()
{
    size
(420420);
    
ellipseMode(CENTER);
    
frameRate(30);
    
noStroke();
    
background(220220255);
    
fill(2550255);
    
smooth();
}

void draw
()
{
    
// check the size of the circle
    
if (circleSize 299{
        shrinkOrGrow 
0;
    
else if (circleSize 101{
        shrinkOrGrow 
1;
    
}
    
// check if the circle needs to grow or shrink
    
if (shrinkOrGrow == 1{
        circleSize 
+= 1;
    
else if (shrinkOrGrow == 0{
        circleSize 
-= 1;  
    
}
    ellipse
(width/2height/2circleSizecircleSize);

When you run this example, you will see the same result as in the previous example: a circle that grows from 100 to 300 pixels. No shrinking back to 100 pixels. So what went wrong? To find out you will use the println() function to take a look at some of the numbers in the program. To those of you familiar with Adobe Flash, the println() function does the same as the trace() function in ActionScript. Change the draw() function so it looks like this.

void draw()
{
    
// check the size of the circle
    
if (circleSize 299{
        shrinkOrGrow 
0;
        
println(“circlesize“ circleSize);
        
println(shrinkorgrow “ shrinkOrGrow);
    
else if (circleSize 101{
        shrinkOrGrow 
1;
        
println(“circlesize“ circleSize);
        
println(shrinkorgrow “ shrinkOrGrow);
    
}
    
// check if the circle needs to grow or shrink
    
if (shrinkOrGrow == 1{
        circleSize 
+= 1;
    
else if (shrinkOrGrow == 0{
        circleSize 
-= 1;  
    
}
    ellipse
(width/2height/2circleSizecircleSize);

Debugging

In the console, you will see that the circle is growing and shrinking. So why isn’t this visible on the screen?

Processing console!

The answer is simple: Processing draws every circle on top of the other one. So when it has drawn the 300 pixel circle it starts drawing smaller circles in the same color on top of it. This is why you do not see the circle shrinking. Before processing draws the ellipse, you need to update the background with this line of code: background(200, 200, 255);.

The full code

Download the full code or copy/paste this in the Processing window.

int circleSize 100;
int shrinkOrGrow 1;

void setup()
{
    size
(420420);
    
ellipseMode(CENTER);
    
frameRate(30);
    
noStroke();
    
background(220220255);
    
fill(2550255);
    
smooth();
}

void draw
()
{
    
if (circleSize 299{
        shrinkOrGrow 
0;
        
println(“circlesize“ circleSize);
        
println(shrinkorgrow “ shrinkOrGrow);
    
else if (circleSize 101{
        shrinkOrGrow 
1;
        
println(“circlesize“ circleSize);
        
println(shrinkorgrow “ shrinkOrGrow);
    
}
    
if (shrinkOrGrow == 1{
        circleSize 
+= 1;
    
else if (shrinkOrGrow == 0{
        circleSize 
-= 1;  
    
}
    background
(200200255);
    
ellipse(width/2height/2circleSizecircleSize);

Tweet this article