Home

 Software Reviews

 Art Gallery

 Art Project

 
 
Image of Ulam's Spiral created with Processing program
Ulam's Spiral - Click on image to enlarge
 
Color Box and Tails - image created with Processing
Color Box and Tails (random) - Click on image to enlarge
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Image Created from rhythmshape.pde code
Image created from rhythmshape.pde code - Click on image to enlarge
 
 
 

 

Description

Processing is designed to be a programming language for Graphic Designers and Visual Artists. It was created by Casey Reas and Ben Fry. The program creators feel that it is a rare combination to have programming skills and visual design skills.

The programming language is a subset of Java and is converted to Java to execute.

 

Assessment/Opinion/Experience

I have about three months of experience with this program. I learned about it from the Graphic Design Basics book and I read the Processing Handbook (see book review below).

The design of the programming environment encourages "sketching" of ideas/programs.

 

Recommendation

There is no cost to this program and it is worth the investment of your time to learn.

 

Computers Supported

Macintosh
Windows
Linux

 

Books

Processing - A Programming Handbook for Visual Designers and Artists by Casey Reas and Ben Fry - © 2007 - 710 pages.

One of the most organized and clear books about programming that I have ever read. 

Using a "visual arts" perspective gives you motivation to learn how to program (i.e. you can see the results).  Towards the end of the book are "Extensions" which are more complex and may be better suited to upper level college students.  

The book has extensive appendixes and references.  

Rating: ★★★★★

Picture of Processing Book Cover


Picture of Processing Book Cover

GRAPHIC DESIGN THE NEW BASICS - by Ellen Lupton and Jennifer Cole Phillips - © 2008 - 247 pages.

Covers the fundamentals of Graphic Design. Good reading and can be used as a quick reference. The discussion of the Processing software lead me to it's discovery.  

Rating: ★★★★★

Picture of Processing Book Cover

D.I.Y. Design it Yourself - edited by Ellen Lupton - © 2006 - 196 pages.

Does not have anything to do with Processing, but one thing leads to another. I read this book first, then "Graphic Design - The New Basics" and then the book on "Processing".  In the spirit of the "Make it Yourself" movement.

Rating: ★★★★—

 

Reference/Links

processing.org

 

Sample Code for the "Rhythm" Picture

The code samples show two ways of programming the image. One way uses Shapes and the other way uses Vertices (i.e. plot every point of the shape).

The code could be made more compact by using functions.  Since there are only two shapes in the image design each shape could be a function.  Cut and Paste was used for the 8 objects in the image.

 

Sample Code - rhythmshape.pde - Uses Shapes - Click to Open and Close

// Mike Gillie Aug 18, 2009 - GRD1100 Rhythm
// v 1.1 8/19/2009
// 1-2-1-3-1

size (400,500);

int gap =0;

noStroke();

// Shape 1
rect(gap+0,0,20,120);
rect(gap+0,120,40,260);
rect(gap+0,380,20,120);

gap = gap + 40;

// Shape 2
rect(gap+0,0,40,110);
rect(gap+15,110,10,280);
rect(gap+0,390,40,110);
triangle(gap+20,220,gap+20,280,gap+60,250);

gap = gap + 50;

// Shape 2
rect(gap+0,0,40,110);
rect(gap+15,110,10,280);
rect(gap+0,390,40,110);
triangle(gap+20,220,gap+20,280,gap+60,250);

gap = gap + 64;

// Shape 1
rect(gap+0,0,20,120);
rect(gap+0,120,40,260);
rect(gap+0,380,20,120);

gap = gap + 40;

// Shape 2
rect(gap+0,0,40,110);
rect(gap+15,110,10,280);
rect(gap+0,390,40,110);
triangle(gap+20,220,gap+20,280,gap+60,250);

gap = gap + 50;

// Shape 2
rect(gap+0,0,40,110);
rect(gap+15,110,10,280);
rect(gap+0,390,40,110);
triangle(gap+20,220,gap+20,280,gap+60,250);

gap = gap + 50;

// Shape 2
rect(gap+0,0,40,110);
rect(gap+15,110,10,280);
rect(gap+0,390,40,110);
triangle(gap+20,220,gap+20,280,gap+60,250);

gap = gap + 64;

// Shape 1
rect(gap+0,0,20,120);
rect(gap+0,120,40,260);
rect(gap+0,380,20,120);

 

Sample Code - rhythmvertex.pde - Uses Vertices - Click to Open and Close

// Mike Gillie Aug 18, 2009 - GRD1100 Rhythm
// 1-2-1-3-1
// v 1.4 8/20/09

size (800,1000);

noStroke();

float gap=0;

// Shape 1
beginShape();
vertex((gap+0)*width,0*height);
vertex((gap+0.04)*width,0*height);
vertex((gap+0.04)*width,0.24*height);
vertex((gap+0.08)*width,0.24*height);
vertex((gap+0.08)*width,0.76*height);
vertex((gap+0.04)*width,0.76*height);
vertex((gap+0.04)*width,1*height);
vertex((gap+0)*width,1*height);
endShape(CLOSE);

gap = gap+0.120;

// Shape 2
beginShape();
vertex((gap+0)*width,0*height);
vertex((gap+0.08)*width,0*height);
vertex((gap+0.08)*width,0.22*height);
vertex((gap+0.05)*width,0.22*height);
vertex((gap+0.05)*width,0.44*height);
vertex((gap+0.12)*width,0.50*height); // tip of triangle
vertex((gap+0.05)*width,0.56*height);
vertex((gap+0.05)*width,0.78*height);
vertex((gap+0.08)*width,0.78*height);
vertex((gap+0.08)*width,1*height);
vertex((gap+0)*width,1*height);
vertex((gap+0)*width,0.78*height);
vertex((gap+0.03)*width,0.78*height);
vertex((gap+0.03)*width,0.22*height);
vertex((gap+0)*width,0.22*height);
endShape(CLOSE);

gap = gap+0.120;

// Shape 2
beginShape();
vertex((gap+0)*width,0*height);
vertex((gap+0.08)*width,0*height);
vertex((gap+0.08)*width,0.22*height);
vertex((gap+0.05)*width,0.22*height);
vertex((gap+0.05)*width,0.44*height);
vertex((gap+0.12)*width,0.50*height); // tip of triangle
vertex((gap+0.05)*width,0.56*height);
vertex((gap+0.05)*width,0.78*height);
vertex((gap+0.08)*width,0.78*height);
vertex((gap+0.08)*width,1*height);
vertex((gap+0)*width,1*height);
vertex((gap+0)*width,0.78*height);
vertex((gap+0.03)*width,0.78*height);
vertex((gap+0.03)*width,0.22*height);
vertex((gap+0)*width,0.22*height);
endShape(CLOSE);

gap = gap+0.160;

// Shape 1
beginShape();
vertex((gap+0)*width,0*height);
vertex((gap+0.04)*width,0*height);
vertex((gap+0.04)*width,0.24*height);
vertex((gap+0.08)*width,0.24*height);
vertex((gap+0.08)*width,0.76*height);
vertex((gap+0.04)*width,0.76*height);
vertex((gap+0.04)*width,1*height);
vertex((gap+0)*width,1*height);
endShape(CLOSE);

gap = gap+0.120;

// Shape 2
beginShape();
vertex((gap+0)*width,0*height);
vertex((gap+0.08)*width,0*height);
vertex((gap+0.08)*width,0.22*height);
vertex((gap+0.05)*width,0.22*height);
vertex((gap+0.05)*width,0.44*height);
vertex((gap+0.12)*width,0.50*height); // tip of triangle
vertex((gap+0.05)*width,0.56*height);
vertex((gap+0.05)*width,0.78*height);
vertex((gap+0.08)*width,0.78*height);
vertex((gap+0.08)*width,1*height);
vertex((gap+0)*width,1*height);
vertex((gap+0)*width,0.78*height);
vertex((gap+0.03)*width,0.78*height);
vertex((gap+0.03)*width,0.22*height);
vertex((gap+0)*width,0.22*height);
endShape(CLOSE);

gap = gap+0.120;

// Shape 2
beginShape();
vertex((gap+0)*width,0*height);
vertex((gap+0.08)*width,0*height);
vertex((gap+0.08)*width,0.22*height);
vertex((gap+0.05)*width,0.22*height);
vertex((gap+0.05)*width,0.44*height);
vertex((gap+0.12)*width,0.50*height); // tip of triangle
vertex((gap+0.05)*width,0.56*height);
vertex((gap+0.05)*width,0.78*height);
vertex((gap+0.08)*width,0.78*height);
vertex((gap+0.08)*width,1*height);
vertex((gap+0)*width,1*height);
vertex((gap+0)*width,0.78*height);
vertex((gap+0.03)*width,0.78*height);
vertex((gap+0.03)*width,0.22*height);
vertex((gap+0)*width,0.22*height);
endShape(CLOSE);

gap = gap+0.120;

// Shape 2
beginShape();
vertex((gap+0)*width,0*height);
vertex((gap+0.08)*width,0*height);
vertex((gap+0.08)*width,0.22*height);
vertex((gap+0.05)*width,0.22*height);
vertex((gap+0.05)*width,0.44*height);
vertex((gap+0.12)*width,0.50*height); // tip of triangle
vertex((gap+0.05)*width,0.56*height);
vertex((gap+0.05)*width,0.78*height);
vertex((gap+0.08)*width,0.78*height);
vertex((gap+0.08)*width,1*height);
vertex((gap+0)*width,1*height);
vertex((gap+0)*width,0.78*height);
vertex((gap+0.03)*width,0.78*height);
vertex((gap+0.03)*width,0.22*height);
vertex((gap+0)*width,0.22*height);
endShape(CLOSE);

gap = gap+0.160;

// Shape 1
beginShape();
vertex((gap+0)*width,0*height);
vertex((gap+0.04)*width,0*height);
vertex((gap+0.04)*width,0.24*height);
vertex((gap+0.08)*width,0.24*height);
vertex((gap+0.08)*width,0.76*height);
vertex((gap+0.04)*width,0.76*height);
vertex((gap+0.04)*width,1*height);
vertex((gap+0)*width,1*height);
endShape(CLOSE);