02 Static Form

Slideshow Version

Static Form

This module covers the basics of interacting with Processing’s drawing API (application programming interface).

The Mandelbrot set is probably the most recognized fractal ever. The simple equation, f(z) = z 2 + c generates this complex form. It was formulated and explored mathematically by Benoit Mandelbrot, who teaches at Yale and researches at IBM, before computers were able to visualize it. (Click to zoom in. Press ‘-’ to decrease the detail, and ‘=’ to increase. Press any other key to reset.) See the source code for this sketch here.


  1. All
    In Processing, pgs. xix – 11.
    In Algorithmic Architecture, excerpt, “A Brief History of Algotecture”, Kostas Terzidis. Download here.
  2. Newbies
    In Processing, Shape 1. pgs. 17 – 18 (stop before “Expressions, Statements”), 23 – 35.
    Color 1: pgs. 85 – 90.
    The book skips ahead without explaining data, variables, etc. thoroughly, and may be confusing for newbies. This omits the potentially confusing parts.
  3. Experienced
    In Processing, pgs. 12 – 35.
    Color 1: pgs. 85 – 93.
  4. For the Ambitious…
    In Processing, Shape 2: Vertices. pgs. 69 – 77.


The static form assignment can be found here.

Design Computation Framework

Teaching design computation is a unique task. We want to focus on concepts, but those concepts are sometimes best understood through actually writing code.

Semantic Architectural Models

We want to identify parts of a design problem that we can reason about computationally. This means reducing those aspects of the problem into the following:

  • Data = Things we know
  • Parameters = The way we describe a design object
  • State = The current design option at any given moment
  • Actions = Stuff we can do to change the “state” of the design
  • Processes = Structured reasoning (conditions, loops, functions, etc.)

This course is about how each one of these things works, how to implement them, and how to apply them to design problems.

Semantics of Design Computation

Developing models that become part of a design process means the model must support our reasoning and the fact that we may change either our reasoning or the output of the model at any time.

  • Generation
    Formal description, variation, differentiation.
  • Manipulation
    Behavior, rules, user interface, action.
  • Evaluation
    Measurement, assessment, optimization, evolution.

Computational Thought Strategies

An ever-evolving list of strategies adapted from computational science that we can apply as designers.

  • Abstraction vs Implementation
  • High-level vs Low-level
  • Top-down vs Bottom-up
  • Information and Representation
  • Tools, Models, and Systems
  • Technique, Workflow, Process

What is code?

The Matrix (Warner Brothers, 1999) used the world of hackers and computers to portray a philosophical battle between choice and control. Computer code is inherently about control, exemplified by “the machines” of The Matrix.

Code is a means of control. It is a symbolic representation of computational language used to describe computational processes and reasoning.

Understanding the underlying reason for how code has evolved means learning a little about how the internals of a computer works.


  1. Introduction to Code
    1. What is Code?
    2. Definitions
    3. Examples
    4. Before diving in…

Computation and Code

Computation is rational and mathematical, but this doesn’t mean deterministic.

More important, it embodies a way of thinking, and is thus more relevant to the process of design than to a particular formal output.

Code represents the computational process as a set of instructions. Each step is “encoded” in a particular way so it can be fed into a computer, and the computer can evaluate those steps for us.

Linguistic Analogy

Code is organized into programming “languages” that take on some of the same characteristics as spoken languages: syntax, meaning, etc.

You already know this way of thinking. If you were to write down each step of modeling a building in Rhino (draw line, extrude line up in to a surface, duplicate surface, rotate, etc.), those steps would comprise a script that could be automated to repeat those steps. Whenever you think about what you need to model next in terms of a logical statement (“If this exists, then I should do that…”), that adds a rule to your process that, if consistent enough, could probably be encoded as well.

Types of Code

Code is really about description. We want to be able to describe parts of a design problem carefully and precisely, working our way from abstract ideas to code-driven implementation.

  1. Pseudocode
    An English analog to source code.
  1. Machine code
    A low-level, machine-only readable representation of computer instructions. This is ultimately what the computer executes, and some programmers and computer scientists program at this level.
  1. Source code
    Human-readable representation of machine instructions.

Scripting versus Programming

Internal architectures of computers are often diagrammed as a series of “layers.” Applications are built on top of an operating system, which is built for a particular processor and computer system. Generally speaking, scripting talks to the application layer, and programming can interface to the operating system and CPU layers.


Scripting was originally a process of writing code to automate applications. AppleScript, for instance, can be used to automate typical commands for software on Mac OS X. “Shell scripting” for Linux and Unix can automate file-handling tasks, compiling, installations, among others. RhinoScript is used to command Rhino, for the sake of efficiency or to add complex functionality.


Programming is a more general term for writing sets of instructions to command a computer or operating system. It is usually on a “lower-level” than scripting, which commands applications.

The distinction between the two is often blurry (e.g. Ruby is a full-featured programming language used as a scripting language for SketchUp), and the terms are often used interchangeably in architectural discourse (though “scripting” seems to be more fashionable than “programming”).

Low-Level Languages

A small portion of assembly code from http://www.assembly.happycodings.com/code1.html that reproduces the Fibonacci sequence, where (starting with 1 and 1) the sum of two adjacent numbers determines the successive number: (1, 1, 2, 3, 5, 8, 13, 21, 34, …). Observe how many lines of code it takes to produce this simple sequence.

Low-level languages are those closest to the mechanical workings of a computer’s processor. They typically have a degree of human unfriendliness and take a trained eye to read them.

Assembly Code

The assembly code above is almost as low-level as we can get. These instructions give individual commands to tell a processor to store numbers in registers, add values together, manage a stack or queue, etc.

It is also not immediately obvious what these instructions will do when they are executed, except for the human-readable comments the programmer has inserted for us,

This is still a level above “machine code,” which is completely human unreadable and takes special software to view and edit the code in a meaningful way.

Machine Code

Machine code is binary code, usually represented as hexadecimal, that are the fundamental instructions for a CPU, like an Intel Core 2 Duo.


“Binary” is a number system that uses only two digits (instead of decimal’s ten digits) to represent numbers. It’s easy for computers to represent either 0 or 1, using the absence or presence of voltage (usually 0 or 12 volts, and sometimes -5 V and 5 V).

            Binary = Decimal
                 0 = 0
                 1 = 1
                10 = 2
                11 = 3
               100 = 4
               101 = 5
               110 = 6
               111 = 7
              1000 = 8
              1001 = 9
              1010 = 10
              1011 = 11
              1100 = 12
              1101 = 13
              1110 = 14
              1111 = 15

Particular sets of binary digits have names that you may recognize.

1 digit = “bit”, 4 digits = “nibble”, 8 bits = “byte”, 16 bits = “word”, 32 bits = “dword”, 64 bits = “quadword”.

Other “Low-Level” Languages

Probably the most popular programming language in the world, C is the basis for C++, and is syntactically the basis for Java, JavaScript, Processing, and others. It is human-readable, and extended through innumerable libraries. Once compiled into machine code, well-written code is fast and extremely powerful (meaning it makes few assumptions, so the programmer has more control).

The “object-oriented” version of C. It has the notion of “classes” of “objects,” or user-defined data types (instead of numbers, you can program in terms of “People” or “Chairs”). We will discuss objects and classes of objects towards the middle of the course.

High-Level Languages

Code written in Ruby that reproduces the first n digits of the Fibonacci sequence. See how much shorter this is than the assembly code version?

High-level languages are those that are less directly related to the workings of a computer and more closely related to what a human is trying to achieve.

They could be thought of as attempting to mimic the thinking and language of humans, but this isn’t entirely accurate. They still have a kind of computerized abstraction to them, so their defining characteristic is really in the number and types of assumptions they make.

Programmers work in high-level languages when they want more automation in terms of how the inner workings of the computer are handled, so they can write code faster. The resulting programs however, often sacrifice performance and consume more memory, among other side effects. But this loss in performance often isn’t a concern for us.


Processing is a high-level language. We can use this fact to our advantage, since its commands are those that are more directly applicable to design and visualization tasks, like drawing shapes, specifying drawing colors, etc. All the extra instructions needed to manage a computer’s inner workings are hidden from us.

Other High-Level Languages

A language developed by Yukihiro “matz” Matsumoto that has gained a large following in recent years, mainly in the web application sector. Twitter, for example, is built with a web framework called Ruby-on-Rails, which uses Ruby as a base language. Ruby is also the scripting language for SketchUp.

An extremely popular programming and scripting language that is similar in structure to Ruby. It has a clarity of syntax and flexibility that many programmers find attractive, as well as a rigorous implementation of computer science concepts that other languages lack. It has numerous pre-packaged libraries for complex functionality, everything from Internet interfaces to scientific computing (so does Ruby).

A language developed by Sun Microsystems that was intended as a cross-platform delivery system. That is, applications could be programmed once, then run on Linux, Unix, Windows, and Apple systems without any further effort. Java also runs on server platforms (the Enterprise Edition) and can drive applications on mobile devices as well. It is the foundation for Processing, which allows us to make applets for web browsers and applications for any system.

Before Diving In

These lectures will be interactive, learn-by-doing sessions; they will be online so you can refer to them later.

          Code will be written like this for whatever lesson we're working on. You can usually just copy and paste the code into the Processing IDE window.

I recommend that when you create variations of the code, you paste them into text files or into some application that manages text to record them for later reference. I also recommend you add comments to the code as we go along, so you can remember what each statement or piece of code does.

Applications like Evernote turn your code snippets into searchable databases accessible from multiple devices. (It also has incredible optical character recognition.) I just use simple text files and Spotlight in Mac OS to make code searchable.

Introduction to Processing

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


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


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.


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.


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:


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.


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 );


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.

2D Drawing

Processing has a robust geometry library. It behaves slightly differently from other programs like Rhino or languages like Rhinoscript. This unit shows how to use the basic drawing functions.


  1. Basic Geometry
    1. Basic drawing functions: point, line, rect, ellipse, etc.
    2. Specifying colors: background, stroke, and fill
    3. Specifying transparency: alpha values
    4. Adjusting rendering properties: smooth()
  2. More Geometry
    1. Shapes: beginShape() … endShape()
    2. Colors and vertices

Basic Drawing Functions

A simple applet to demonstrate the bezier() function. Download the source code here, run the sketch, then press a key to get the function in text from the console so you can paste it into another sketch. You will need to create a font and add its name to the laodFont() function in setup(). (The moving dot demonstrates that it is possible to evaluate any point on the curve, like in Rhino, showing that Processing geometries can be parameterized, not just rasterized.)

Geometries in Processing are hybrid, having the characteristics of both pixellated raster geometry and vector geometry. They are 3-dimensional, even if you give just 2-dimensional arguments.

Basic Geometry

This is simply a catalog of some of the more useful drawing functions. We will look at these alongside their entries in the Processing reference to get a feel for how to read the API.

          point( x, y );
          point( x, y, z );

Draws a single point, one pixel in size, at the coordinates specified.

          line( x1, y1, x2, y2 );
          line( x1, y1, z1, x2, y2, z2 );

Draws a line, either in two-dimensions or three-dimensions.

          rect( x, y, width, height );

Draws a rectangle. By default, the first two parameters are the coordinates of the upper-left corner. By using rectMode(), you can change the required parameters to two corners, a center plus width and height, or a center and two radii.

          ellipse( x, y, width, height );

Draws an ellipse similarly to how rect() draws a rectangle. Use the ellipseMode() function to change the parameters for all successive ellipses after the ellipseMode() call.

          bezier( anchor1x, anchor1y, control1x, control1y, control2x, control2y, anchor2x, anchor2y );

Draws a Bezier curve given two anchor points and two control points. An example:

          bezier(85, 20, 10, 10, 90, 90, 15, 80);

Specifying Colors

Demonstrating HSB color mode with transparency.

Coloring drawn objects in Processing is similar to Illustrator. You can set a stroke and a fill, with an alpha transparency.

The default color mode accepts three numbers for the red, green, and blue (RGB) values of the color, each between 0 and 255.

          stroke( red, green, blue );
          fill( red, green, blue );
          stroke( 255, 0, 0 );        // Bright red.
          fill( 255, 200, 200 );      // Pink.
          // All objects drawn afterwards will have these
          // colors for fill and stroke.
          stroke( 128 );      // 50% gray
          noStroke();         // Don't draw a stroke.
          noFill();           // And don't draw a fill.

Clearing the Background

Changing the color of the background has the added effect of clearing the sketch window. You usually do this once at the beginning of draw() to clear the animation frame.

          // Fill the sketch window with white.
          background( 255 );
          // Fill the sketch window with 50% gray.
          background( 128 );
          // Fill the sketch window with deep blue.
          background( 30, 60, 120 );

Hue, Saturation, Brightness (HSB)

colorMode() can be used to change the parameters of stroke() and fill().

          // Colors on this line are RGB.
          colorMode( HSB ); // Colors after this are HSB.
          fill( 150, 255, 200 );
          // hue = 150, blue
          // brightness = 255, very bright
          // saturation = 200, 78% saturated
          // HSB mode with range 0-100 instead of 0-255.
          colorMode( HSB, 100 );
          // Back to RGB color mode, range = 0 to 255.
          colorMode( RGB );
          // ... now with values ranging from 0 to 100.
          colorMode( RGB, 100 );