Source Code. Projects. Nerd Stuff. Art Stuff.

Lesson 1: Drawing

Processing is a programming environment designed for artists. Some of its main strengths are that it is intuitive, powerful, open-source, and it provides visual feedback on what you’re doing. It is flexible in that it has room for many libraries written for compatibility with sound, computer vision, and digital fabrication.

Like human languages, programming languages belong to families of related languages. Processing is a dialect of a programming language called Java; the language syntax is almost identical, but Processing adds custom features related to graphics and interaction. The graphic elements of Processing are related to PostScript (a foundation of PDF) and OpenGL (a 3D graphics specification). Because of these shared features, learning Processing is an entry-level step to programming in other languages and using different software tools.

Visit http://processing.org/download/ to download Processing for your operating system. The latest version (Processing 2.0) is in beta and has features that are meant to integrate well with JavaScript.

To get started, draw a shape by typing:

1
ellipse(50, 50, 80, 80);

This line of code means “draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels.” The numbers inside parentheses are called parameters, and these are the values the function uses to carry out tasks according to your specifications. Click the Run button, which looks like this:

and you should see your circle:

There are other shapes you can draw, including rectangles, arcs, lines, points, and triangles, and you can visit the Processing Language Reference page for more information (for this example, the “2D Primitives” section is of particular import). Later, you’ll learn how to control and track mouse movement using one of Processing’s many built-in functions to add interactivity, among many other things, but as a quick example, enter the following into your sketch window:

void setup() {
  size(480, 120);
  smooth();
}

void draw() {
  if (mousePressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

You should see something like this:

This program creates a window that is 480 pixels wide and 120 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black. The details of how this works will be covered later, but for now, run the code, move the mouse, and click to experience it.

You can press the stop button to stop the running of a sketch

The downward arrow to save

and the Open button (an upward facing arrow) to select which of your files to open.

The New button will create a new sketch:

You can also select many of these options and find keyboard shortcuts by using the drop-down menus at the top.

At first, drawing on a computer screen is like working on graph paper. It starts as a careful technical procedure, but as new concepts are introduced, drawing simple shapes with software expands into animation and interaction.

A computer screen is a grid of light elements called pixels. Each pixel has a position within the grid defined by coordinates. In Processing, the x-coordinate is the distance from the left edge of the Display Window and the y-coordinate is the distance from the top edge. We write coordinates of a pixel like this: (x, y). So, if the screen is 200×200 pixels, the upper- left is (0, 0), the center is at (100, 100), and the lower-right is (199, 199).

The Display Window is created and images are drawn inside through code elements called functions. Functions are the basic building blocks of a Processing program. The behavior of a function is defined by its parameters. For example, almost every Processing program has a size() function to set the width and height of the Display Window.

The size() function has two parameters: the first sets the width of the window and the second sets the height. To draw a window that is 800 pixels wide and 600 high, write:

1
size(800, 600);

Processing includes a group of functions to draw basic shapes (see the Processing Reference). Simple shapes like lines can be combined to create more complex forms like a leaf or a face. To draw a single line, we need four parameters: two for the starting loca- tion and two for the end.

As an example, you can draw a more complex shape by typing:

1
2
3
4
size(480, 120);
quad(158, 55, 199, 14, 392, 66, 351, 107);
triangle(347, 54, 392, 9, 392, 66);
triangle(158, 55, 290, 91, 290, 112);

and you should see this:

Again, check the reference page for information on what shape functions accept which parameters and how they work.

Note: many curved drawing functions such as circle and arc will take angle measurements in radians. If you would prefer to use degree measurement, Processing has a built-in degree to radian converter function, which can be placed inside a function parameter:

1
arc(90, 60, 80, 80, 0, radians(90));

Also note that the drawing order will be affected by the order your lines of code are written in. Lines that come after others will place a shape on top of previous ones.

See the reference on how to affect a shapes stroke (or line) weight: http://processing.org/reference/strokeWeight_.html

The parameters for color take a numerical value within the range of 0 to 255, where 255 is white, 128 is mid-range, and 0 is black.

As an example on how to fill colors into shapes, use the fill() function:

size(480, 120);                 
background(0);                  // Black
fill(204);                      // Light gray
ellipse(132, 82, 200, 200);     // Light gray circle
fill(153);                      // Light gray
ellipse(228, -16, 200, 200);    // Light gray circle
fill(102);                      // Light gray
ellipse(268, 118, 200, 200);    // Light gray circle

You should see something like this:

Note: Two forward slashes indicate a comment. These are good practice to use to make sense of your code and improve readibility for yourself and others. Commented lines of code will not be read by processing and are not executed.

To set colors (other than single channel grayscale shades) to fill() or stroke(), you would use RGB color notation, where the first number indicated Red, the second Green, and the third Blue. See the color reference for details about how this works. There is an optional, fourth parameter which can set a color’s transparency. This is known as the alpha value, and it is also given a value between 0 and 255.