An Introduction to Processing

A while ago Veerle Pieters posted a nice tutorial on her blog: Transform Again in Illustrator. If you are into scripting, there is a faster way to achieve a similar design. Over the years, Illustrator has become more and more scriptable. This is really great for generating designs. But there are some better apps out there to this kind of work. Take a look at Processing and Nodebox.

In this tutorial, I’m going to show you how to render a design with Processing, an open source and designer-friendly programming language. Download the latest release to start with this tutorial.

Step 1 – Creating Variables

First of all you need to create some variables and assign a type to them. Type the following code in the Processing window.

int   x, y;
int   numberOfArcs = 10; 
float rotation = - (HALF_PI / 3);
int   arcSize;
int   step = 40;
float start, stop;

x and y: x and y coördinates of the arc.
numberOfArcs: the number of arcs you want to generate.
rotation: how many degrees an arc is rotated compared to the previous arc. In this case each arc is rotated 15° counterclockwise.
arcSize: the size of the arc.
step: how many pixels is the arc bigger than the previous one.
start and stop: start and stop point of the arc.

Step 2 – Setup

You can now start with the setup() function. The statements in this function execute once when the program begins.

void setup()
{
    size(420, 420);
    background(240);
    stroke(127);
    noFill();
    ellipseMode(CENTER);
    strokeCap(PROJECT);
    smooth();
    noLoop();
}

size(width, height): the size() function must be on the first line in the setup() function. It defines the width and height of the canvas you will draw on. Read about size() in the Processing Language reference.
background(value): the background() function sets the background color of the canvas. In this case the background will be a light gray. Read about background() in the Processing Language reference.
stroke(value): the stroke() function sets the color of the stroke of the object you will draw on the canvas. A value of 127 gives 50% black. Read about stroke() in the Processing Language reference.
noFill(): the noFill() function disables filling the arc. Read about noFill() in the Processing Language reference.
ellipseMode(value): the ellipseMode() function tells Processing how the arc or ellipse should be drawn. In this case, Processing will start drawing the arc from the center. Read about ellipseMode() in the Processing Language reference.
strokeCap(value): the strokeCap() function tells Processing how to render line endings. Read about strokeCap() in the Processing Language reference.
smooth(): use the smooth() function to draw the arcs with anti-aliased edges. Read about smooth() in the Processing Language reference.
noLoop(): when you use noLoop() in the setup() function, the code within the draw() function will only be executed once. Note that the noLoop() function should be on the last line within setup(). Read about noLoop() in the Processing Language reference.

Step 3 – Draw

This is the function where all the magic happens. The draw() function will draw the arcs on the screen. This is the code you need to create your design. The code in the for-loop calculates all points needed to draw the arcs on the screen. Read about arc() in the Processing Language reference.

void draw()
{
    for (int i = 0; i < numberOfArcs; i++) {
        strokeWeight(i);
        x = width / 2;
        y = height / 2;
        arcSize = 200 + (step * i);
        start = rotation * i;
        stop = rotation * i + TWO_PI - HALF_PI;
        arc(x, y, arcSize, arcSize, start, stop);
    }
}

The Result

If everything went ok, your image should look like this.

Arcs

The Full Code

Download the full code or copy/paste this in the Processing window. Note that the downloadable code is a little shorter since I’m skipping a few steps in the draw() function.

int   x, y;
int   numberOfArcs = 10; 
float rotation = - (HALF_PI / 3);
int   arcSize;
int   step = 40;
float start, stop;

void setup()
{
    size(420, 420);
    background(240);
    stroke(127);
    noFill();
    ellipseMode(CENTER);
    strokeCap(PROJECT);
    smooth();
    noLoop();
}

void draw()
{
    for (int i = 0; i < numberOfArcs; i++) {
        strokeWeight(i);
        strokeWeight(i);
        x = width / 2;
        y = height / 2;
        arcSize = 200 + (step * i);
        start = rotation * i;
        stop = rotation * i + TWO_PI - HALF_PI;
        arc(x, y, arcSize, arcSize, start, stop);
    }
}