An Introduction to Processing - Part II
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. Please take a look at the final result of 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 everytime 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 cirle 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. Take a look at the final result of this tutorial.
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);
}
Commenting is closed for this article.
0 Opinions posted so far. Now go post your own. To the comment form!