This post attempts to give a short, concise introduction to Processing and it’s usefulness.

1. Downaload the Program http://processing.org/download/.

2. Open up the program.

3. Setting up your PDE.

Every PDE(file extension for Processing) has to main have two function that should always be part of your document: setup and draw.You should write them like this:

void setup(){

}

void draw(){

}

In the setup function, you typically write the size, background, and frame rate of the “Sketch” (The name given to a PDE file).

void setup(){
size(screen.width, screen.height); //This makes the sketch the size of your screen
background(255); //This make your sketch have WHITE background
frameRate(99999);
}

You can also setup other values such as colorMode, default strokes and fill, if it loops or not…

void setup(){
size(screen.width, screen.height); //This makes the sketch the size of your screen
background(255); //This make your sketch have WHITE background
frameRate(99999);
colorMode(HSB, 360,100,100,100); // Hue, Saturation, Brightness, Alpha
stroke(0);
noLoop();
}

4. Starting to draw(); //Simple draw functions

The main advantage of Processing over HTML/CSS is in the fact that it is made precisely for creating visuals. It is much more powerful in this regard than most technologies associated to the web. In this first funciton we are going to draw some simple geometry. Then we will start making it dynamic.

void draw(){
line(0,0,width,height);
ellipse(0,0,width,height);
rect(width/2, height/2, width, height);
}

As you can see, our images have a with a color. We can remove this inside color by calling the fill() function and the noFill() function. We can also use the stroke() and noStroke() function.

void draw(){
stroke(255,0,0); //Red
line(0,0,width,height);
fill(0,255,255); //Cyan
ellipse(width/2, height/2,100,100);
noFill();
stroke(0,0,255); //Blue
rect(width/2, height/2, width, height);
}

Now, let’s make this dynamic. We will set up a variable and make it increase to increase the size of the circle continually.

public int sze = 0;

void draw(){
stroke(255,0,0); //Red
line(0,0,width,height);
fill(0,255,255); //Cyan
ellipse(width/2, height/2,sze,sze);
noFill();
stroke(0,0,255); //Blue
rect(width/2, height/2, width, height);

sze++;
}

We can also make the size of the circle random by changing the r every instance of the loop.

public int sze = 0;

void draw(){
stroke(255,0,0); //Red
line(0,0,width,height);
fill(0,255,255); //Cyan
ellipse(width/2, height/2,sze,sze);
noFill();
stroke(0,0,255); //Blue
rect(width/2, height/2, width, height);

sze = int(random(0,height)); /* 3 important things
1. We don't re declare the variable. We only have to put the "int" preface when we declare the variable the first time. If will throw an error if you do otherwise.
2. There are four main types of variables: int, float, String and boolean. Float is and int with decimal numbers. Random gives out and float, not an int, so you have to convert it to an int by wrapping it up in int(float).
3. You establish two numbers with Random: the least possible number and the highest number you want to give it. We give it "height", because we don't want to circle to be bigger than the height.
*/
}

We can also make the position of the circle random.

public int sze = 0;
public float x = 0;
public float y = 0;

void draw(){
stroke(255,0,0); //Red
line(0,0,width,height);
fill(0,255,255); //Cyan
ellipse(width/2, height/2,sze,sze);
noFill();
stroke(0,0,255); //Blue
rect(width/2, height/2, width, height);

sze = int(random(0,height));
x = random(0,width);
y = random(0,height);
}

If you’re a graphic designer, you will probably have to put some text in this. For that you use the text() function.

void draw{
fill(0);
textSize(24);
text("Hello, my name is Jorge", width/2, height/2);
}

Let’s make this a little more interesting.

void draw(){

float r = 0;
float g = 0;
float b = 0;

float x = width/2;
float y = height/2;

x = random(0,width);
y = random(0,height);

r = random(0,255);
g = random(0,255);
b = random(0,255);

fill(r,g,b);
textSize(24);
text("Hello, my name is Jorge",x,y);

}

5. Making it a little interactive.

What if you sketch responded to your mouse? How about making your sketch a small paint program?

public int xStart = 0;
public int yStart = 0;

void draw() {
//Nothing
}

void mousePressed() {
xStart = mouseX;
yStart = mouseY;
}

void mouseReleased(){
stroke(0);
line(xStart,yStart, mouseX, mouseY);
}

6. Exporting

I know what you are thinking. I can’t use this outside the program? This isn’t even useful, for me… well, you can export all these things into Images and also into PDF’s that you can later edit(you can edit them as vectors if they are a PDF).

void keyPressed() {
if (key == ENTER) {
saveFrame("Export.png");
}
}

You can also export to PDF using this method.

import processing.pdf.*;

void setup(){
size(screen.width, screen.height); //This makes the sketch the size of your screen
background(255); //This make your sketch have WHITE background
frameRate(999);
beginRecord(PDF, "frame.pdf");
}

public int xStart = 0;
public int yStart = 0;

void draw() {
//Nothing
}

void mousePressed() {
xStart = mouseX;
yStart = mouseY;
}

void mouseReleased(){
stroke(0);
line(xStart,yStart, mouseX, mouseY);
}

void keyPressed() {
if (key == ENTER) {
endRecord();
exit();
}
}

7. Top 5 thing I left out

1. Importing Fonts: You can import any font you want into Processing and use it in you sketch. http://processing.org/reference/textFont_.html
2. There are a BUNCH of libraries that you can import, to use Processing in many other different ways. http://processing.org/reference/libraries/
3. You can use Images in Processing by loading them into the system and calling them. http://processing.org/learning/basics/loadingimages.html
4. You can create Loops to do all kinds of stuff with the for() statement. http://processing.org/reference/for.html
5. You can use Processing on your web pages with the CANVAS statement. http://processingjs.org/

8. Example Projects

My Projects with Processing

http://thejsj.com/2011/mfa/painting-analysis/paintings.php
http://thejsj.com/2011/mfa/my-friends-on-facebook/
http://thejsj.com/2011/mfa/human-vs-computer/
http://thejsj.com/pieces/random-trends-process-book/
http://thejsj.com/pieces/357/

Other Projects

http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines
http://www.thegreeneyl.com/mit-media-lab-identity-1
http://vimeo.com/22955812
http://blog.blprnt.com/blog/blprnt/just-landed-processing-twitter-metacarta-hidden-data