Design Computation

Introduction to Processing

http://processing.org is the central resource for everything Processing.

Outline

  1. Introduction to Processing
    1. What is Processing?
    2. The Integrated Development Environment (IDE)
    3. Syntax basics
    4. Sketch structure: setup() … draw()

Download

Download Processing from http://processing.org. For Windows, you might as well download the larger archive that includes Java. It will override any installation of Java you may have an ensure you have the appropriate version of the Java Virtual Machine (JVM).

What is Processing?

Processing is a high-level, Java-based programming language developed by Ben Fry and Casey Reas at the MIT Media Lab, and has since gained a large following throughout the world.

It was first a teaching language to help students focus on the “process” of design and to get quick results, but now is a common language for interactive visual studies that rivals Flash.

Processing does most of the tedious work for you. It has a simplified graphics API (application programming interface) that makes working in three dimensions much simpler than in other languages (the API is based on OpenGL).

In addition, Processing has a vibrant, active community of designers willing to help you learn.

Programs in Processing are called “sketches,” as Processing is intended to be a kind of computational sketchbook. In this course, we are interested in small bits of code that embody a series of relationships, that through simple rules produce something complex and interesting.

It is usually understood that all code produced with Processing is open-source, so most artists and designers that use it will make their code available to you. You should feel free to copy and hack their code, as long as you attribute the original source in your code.

The Integrated Development Environment (IDE)

IDE stands for “Integrated Development Environment.”

An integrated development environment (IDE) is a specialized editor built for editing a particular programming language. The one that comes with the Processing distribution has many features to support coding with Processing, such as access to the documentation, syntax highlighting, etc. It also organizes Processing sketches and exports them to Java applets embedded in a web page with the click of a button.

Try It Yourself

  1. Open Processing. The IDE will appear with an empty sketch.
  2. The “code window” is where you write your sketches.
  3. The “console” displays messages for debugging and errors.
  4. The “sketch window” is where all the drawn output of the sketch appears.

In the spirit of typical first programming tutorials, we’re going to write a traditional “Hello World!” application.

Copy the following line and paste into the code window:


println( "Hello World!" );

Press the play button and look at the console window. A blank sketch window should also appear.

Syntax Basics

Programming Language “Syntax”

Like spoken languages, “syntax” comprises all the rules that determine well-defined, meaningful statements.

Statements in all programming languages require a specific, consistent syntax in order for the computer to recognize them. Following the rules of syntax is necessary for a program to run properly, and any error among thousands of lines will cause an entire program not to run at all.

Thankfully, the syntax of programming languages is much easier than English.

Functions

A function is a single statement that tells Processing to perform a particular action. It is very much like a function in algebra or calculus, where the statement f(x) is really shorthand for many possible operations, like f(x) = x^2^ + 5x – 3.

In Processing, the actions that functions perform are among drawing lines, drawing curves, printing something to the console, clearing the sketch window, executing a math function (sine, cosine, tangent, etc.), etc.

When we input a function as a line of code, we say that we are “calling” a function.

Function Syntax

A function name is followed by parentheses, within which are parameters, also called arguments. These parameters are the inputs to the function, and the output varies depending on what the function performs. All other statements are variations on this formatting.

And most important, all statements in Processing are terminated with a semicolon.

Go ahead and copy this line into the Processing code window.


line( 10, 20, 50, 80 );

And press run (the play button).

A sketch window should appear with a single, thin black line drawn.

Syntax Highlighting

Notice how Processing colors the function name “line”. This is called “syntax highlighting,” and is a common feature in most IDE’s that allows you to see whether the default functions in a language are spelled properly, among other reserved keywords in the language.

The API

Check the menu item Help > Reference to look at all the functions used in Processing. This is Processing’s API (application programming interface), and includes all the information you need (syntax, examples, etc.) to use Processing. You will refer to this often, so part of what we will be doing is learning how to read an API, so you can use functions that we don’t have time to go over in detail during classtime.

Apropos, learning to read an API is a skill that allows you to learn new languages easily. Most languages work in similar ways and use similar nomenclature (“function”, “keyword”, “parameter”, “expression”, “statement”, etc.).

The Coordinate System

The coordinate system explained. All coordinates are pairs of numbers along the x- and y- axes. The units are pixels..

What that line function meant:


line( 10, 20, 50, 80 );

The first two parameters are the x and y coordinates, respectively, of the first endpoint of the line. Likewise, the last two parameters are the coordinates of the last endpoint of the line. The units are pixels.

Represented symbolically and generally like this:


line( x1, y1, x2, y2 );

You can specify negative coordinate values and fractional (floating point) values, like 5.423.

You can also move the origin and rotate the coordinate system, like rearranging the C-plane in Rhino. That’s discussed later.

Try some more:


size(300,200);
line(10,20,200,160);
rect(40,10,220,55);
point(100,100);
ellipse(150,100,50,150);

Notice how the objects cover each other. Order matters, and new objects are always drawn on top of old ones.

Sketch Structure

The typical structure and “control flow” for a Processing sketch. All sketches will begin with this template.

Each sketch starts with the same basic structure. This allows you to define two functions, each that has a different purpose in the sketch.

When you first press run, all the lines of code between the braces in setup() are executed first, sequentially, top to bottom.

Then all the code between the braces in draw() are executed next, over and over, top to bottom.

Sketch Size

The size() function in the template to the right sets the size of the sketch at the start of the program. This is usually the first line in setup(). The first parameter is the width in pixels, and the second is the height.

Comments

Anything one a single line written after a double-slash is ignored by Processing.


line( 10, 10, 40, 50 );     // This is a comment.

These lines are called “comments,” and they can make parsing what you’re doing in a sketch much easier. Always comment code when it is not obvious what you are doing from the function names. I will put comments as explanatory notes.

Multiple lines can be commented by using a slash-asterisk symbol pair. These are also useful when debugging a sketch or removing code from execution when you don’t want to delete it.


/* All of these lines
   are comments.
   And are ignored
   by Processing.
*/
line( 50, 60, 10, 20 );

Templates

Thoughout the course, we will use different templates (like the one to the right) to start different types of sketches quickly, especially ones in 3D and that use a GUI. Record these templates as we go along so you can access them quickly.


void setup(){
  size( 300,200 );  // 300 pixels wide, 200 tall
  // One-time initialization code goes there. 
  // This only happens once, when you press "Run" or "Play".

}

void draw(){
  // Repeated code, each animation frame, here.

}