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: ★★★★★ |
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: ★★★★★ |
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
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.
// 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);
// 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);