An Introduction to Processing - Part II

Posted on 2007-09-06 by Jan Vantomme
Tags: processing, generative art, tutorial

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(420, 420);
    ellipseMode(CENTER);
    frameRate(30);
}

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

A circle that stops growing

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

int circleSize = 100;

void setup()
{
    size(420, 420);
    ellipseMode(CENTER);
    frameRate(30);
    noStroke();
    background(220, 220, 255);
    fill(255, 0, 255);
    smooth();
}

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

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(420, 420);
    ellipseMode(CENTER);
    frameRate(30);
    noStroke();
    background(220, 220, 255);
    fill(255, 0, 255);
    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/2, height/2, circleSize, circleSize);
}

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/2, height/2, circleSize, circleSize);
}

Debugging

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

!

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(420, 420);
    ellipseMode(CENTER);
    frameRate(30);
    noStroke();
    background(220, 220, 255);
    fill(255, 0, 255);
    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(200, 200, 255);
    ellipse(width/2, height/2, circleSize, circleSize);
}

Tweet this article