Overview of Processing
This weekend I gave two talks at BarCamp Rochester (which was very well put together and quite enjoyable) - one on jQuery and a very quick one on the Processing language. I've deconstructed my slides into some bullet points here. If you're not familiar with the language, or what it's capable of, this should give you a good overview.
Processing is a data visualization programming language.
It has three components:
- The Processing language
- The Processing drawing API
- The implementation (in Java - can optionally pass the drawing API through to OpenGL).
The Processing Language and API
- Strictly typed
- Has classes, inheritance
- Includes a bunch of globally-accessible functions (the drawing API - very flat and PHP-like).
Basic Program Structure
Two core methods: setup() and draw()
- Very OpenGL-like
- draw() is called continually at a specific framerate (if none is specified then it goes as fast as possible)
Simple example: Drawing a continuous line with the mouse.
size(200, 200);
background(102);
}
void draw() {
stroke(255);
if(mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
Initialization
- setup() is called initially
- size(...) - set the width/height of the drawing area
- Can include calls to any other number of methods, such as: background(...) - (which draws and fills a background with a specified color).
- Note: All colors are done in RGBA. background(102) is equivalent to background(102,102,102,255) (opaque gray color)
The draw() loop
- draw() gets called as fast as possible, unless a frameRate is specified (with framerate(20), for example). You can disable any looping by calling noLoop().
- stroke() sets color of drawing outline (the color of lines, points, and the outsides of polygons)
- fill() sets inside color of drawing (inside of polygons)
- mousePressed is true if mouse is down
- Very different from typical asynchronous events - since program keeps looping we get state updates automatically. (Unless you specify mousePressed as a global function - then it'll be called as a callback.)
- mouseX, mouseY - mouse position, pmouseX, pmouseY - previous mouse position in last draw() call
Drawing
Different drawing methods: line(), rect(), arc(), ellipse(), point(), quad(), triangle(), bezier(), etc.
All use stroke(), strokeWeight(), and fill().
Can also draw complex polygons using beginShape, endShapre, and vertex - like in this example.
beginShape();
for (int i=0; i<segments; i++){
vertex(ground[i].x1, ground[i].y1);
vertex(ground[i].x2, ground[i].y2);
}
vertex(ground[segments-1].x2, height);
vertex(ground[0].x1, height);
endShape(CLOSE);
The Canvas
Very OpenGL-like. You can mutate the canvas rendering using: translate(), scale(), and rotate().
You can also save and restore the state of the canvas using: pushMatrix() and popMatrix().
A basic example using pushMatrix/popMatrix: A movable arm.
Classes
Can hold data, do inheritance.
Example: Bouncing an object off of rocky terrain
float x1, y1, x2, y2, x, y, len, rot;
Ground(){ }
Ground(float x1, float y1, float x2, float y2) {
this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2;
x = (x1+x2)/2;
y = (y1+y2)/2;
len = dist(x1, y1, x2, y2);
rot = atan2((y2-y1), (x2-x1));
}
}
Math
A whole mess of math functions are provided, as well: dist(), map(), constrain(), abs(), floor(), ceil(), random(), noise(), atan2(), cos(), sin(), pow(), sqrt(), radians().
Images
Can be used to load in external images. Example: Animation of guy dancing.
int frame = 0;
PImage[] images = new PImage[numFrames];
void setup(){
size(200, 200);
frameRate(30);
for(int i=0; i<numFrames; i++) {
String imageName = "PT_anim" + nf(i, 4) + ".gif";
images[i] = loadImage(imageName);
}
}
void draw() {
frame = (frame+1)%numFrames;
image(images[frame], 0, 0);
}
Demos
Some fun demos that I really like:
- Zipdecode - rendering all zipcodes in the country and searching them in real time.
- Substrate - rendering a piece of art.
- Genetic Trees - selectively breed and mutate trees.
- World is not round - live VJing a song using Processing and a set of physical input controls.
Books
Tags: graphics, processing, data, visualization, barcamp
9 Comments on 'Overview of Processing'
I then did a quick overview and demo of 
I then announced a brand new product: 
Finally, I announced my second new release of the evening: 
