# An Introduction to Processing

Posted by Jan Vantomme on 31 August 2007.
Tags: , ,

A while ago Veerle Pieters posted a nice tutorial on her blog: Transform Again in Illustrator](http://veerle.duoh.com/blog/comments/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.
• background(value): the `background()` function sets the background color of the canvas. In this case the background will be a light gray.
• 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.
• noFill(): the `noFill()` function disables filling the arc.
• 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.
• strokeCap(value): the `strokeCap()` function tells Processing how to render line endings.
• smooth(): use the `smooth()` function to draw the arcs with anti-aliased edges.
• 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()`.

### 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.

``` 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. ### 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);    }}  ```

### Playing with numbers

Next up is changing numbers to make some variations on the theme. A good exercise for you to figure out how to do this.   