Design Computation

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