Online Portfolio of Michael Wach

Processing is a free, open source, Java based cross platform programming environment that’s great for algorithmic art. I could go into a lot of detail about the background of processing, but you might be better off checking out their official website for yourself.

Instead, I will walk you through the first baby steps of learning how to program with Processing. Fear not, this won’t be hard. I think even mom and dad can follow me on this blog post!

The first step is to get yourself a copy of processing. Click here and select which download matches the type of computer you are using. From what I’ve seen so far, Processing runs directly from the folder you extract the download to. In other words, there is no “installer”, simply launch the extracted application and you’re all ready for Processing!

Once the program has launched, you will see a rather small text-editor looking window. I’ll talk about the other parts later, right now let’s push the play button (a.k.a. Run). A small gray square (100×100px) will pop up, this is your (blank) canvas. Processing is great for art, so let’s start by drawing some lines. In order to draw a line, type the following command in the editor and push the run button.

line(0,0,100,100);

If you followed all of the steps, you should be looking at that same empty canvas with exception to a thin black line cutting it in half diagonally. Technically, Processing is drawing a line with the current stroke color and weight, from the 0,0 coordinate to 100,100. Processing uses X,Y coordinates that start from the top left. Now, let’s practice some more drawing.

size(400, 400);
line(30, 200, 80, 40);
line(80, 40, 120, 200);
line(120, 200, 160, 40);
line(160, 40, 250, 380);
line(250, 380, 290, 200);
line(290, 200, 330, 380);
line(330, 380, 370, 200);

The results will be a 400 by 400 pixel canvas containing the basic shape of my logo. The point of this example is to demonstrate the basic procedural programming method, and obviously introduce the size command. In this example, size sets the canvas to 400×400 pixels. Here is a prettier example:

size(400, 400);
strokeWeight(20);
smooth();
rect(0, 0, 400, 400);
strokeWeight(20);
line(30, 200, 80, 40);
line(80, 40, 120, 200);
line(120, 200, 160, 40);
line(160, 40, 250, 380);
line(250, 380, 290, 200);
line(290, 200, 330, 380);
line(330, 380, 370, 200);

strokeWeight() sets your brush size, smooth() smooths the edges, rect() draws a rectangle. Below, I have embedded the java export.

On that note, you may be wondering how to export your Processing drawings to the web. Simply click on File -> Export, you will be required to first save the file. Processing will create a number of different files, including a .java, .jar, .gif, and .html. The html file includes object embedding code that’s great for web content management systems which allow direct access to the source code. However, many popular content management systems take advantage of WYSIWYG (what you see is what you get) editors that have difficulty directly embedding code. Currently, this website is powered by WordPress, and the code I used to embed the java jar follows:

<applet name=”sketch_081103a” width=”500″ height=”500″ archive=”/wp-content/postol/sketch_081103a.jar” standby=”Loading Processing software…” codebase=”/wp-content/postol/” code=”sketch_081103a” mayscript=”true” scriptable=”true” image=”/wp-content/postol/loading.gif” boxmessage=”Loading Processing software…” boxcolor=”#FFFFFF”><img src=”/wp-content/postol/loading.gif” width=”1″ height=”1″ /></applet>

This should be enough to get you started with Processing. There is much more to learn! Check out the Processing learning center, books, and code reference for more information.