Programming computers to do useful and interesting tasks requires that we write instructions in a language that the computer understands, called a programming language. In this course, we’ll use Processing, a Java-based language designed for visual applications.

The Processing Environment

Programs are developed using a development environment of some sort. Common environments include Eclipse, Visual Studio, and Netbeans. The basic elements of the Processing development environment are shown here:

You write program commands in the program area, press the run button (the play button just above the program area), and Processing will display a new window showing your visual output. Textual output, if there is any, is shown below the program area. As one would expect, this empty program produces an empty output.

Exercise 3.a.1: If necessary, install the Processing environment. The environment starts up with an empty program, called a sketch in Processing. Pressing the play button on an empty program should display a new window with an empty canvas (as shown above).

Basic Sketches

Processing allows basic visual output to be generated by calling graphical methods with respect to a coordinate plane. Methods are called very much as functions are called in Excel, with the name of method first followed by a parenthesized list of argument values (e.g., point(30, 40)).

This program issues one command. It calls the point method to render a single point of color, called a pixel, on an x-y coordinate plane with the origin, point (0, 0), on the upper left. The point is placed the specified number of pixels to the right of the origin (i.e., 30) and below the origin (i.e., 40). This model is common for computational graphics packages. The default drawing color is black and the default background color is gray.

This speck of an example may seem a bit simple, but in computing it is generally best to start simple, very simple, and build from there. The next example draws a point and a circle.

This program includes two commands, executed one after the other. The first renders a point in the middle of the 100x100 pixel canvas and the second renders an ellipse with the given center point, width and height. We drew the ellipse first because it would have covered up the point had it been drawn second.

Note that circles are ellipses with equivalent width and height (i.e., the diameter). One might have wished for a circle method, which would be easier to use than the ellipse method because it would only require a center point and a diameter, but computing packages tend to provide a smaller number of more generalized methods, like ellipse(), that can be used in a greater variety of situations.

Exercise 3.a.2:
Use a sequence of graphical methods to draw a simple face, such as the one shown here. For more methods, see the Processing reference manual (http://processing.org/reference/) for more “2D Primitives”. See, in particular, line() and rect(), which you’ll use to draw the mouth and nose respectively.

When you have your basic face working, try the following extensions:

  • Double the size if your face sketch. To do this, you’ll need to increase the default sketch size, 100x100, using the size(width, height) method.

  • Give your face a smiley mouth. To do this, you’ll need to use the arc() method, which can be a bit tricky to specify properly. Look at the examples in the reference manual and ask questions if you need help.

These extensions required that you learn new graphical methods by reading reference documentation. Get used to this. Processing invites and even begs us to play with new graphical methods in our sketches.

Color

Color is an important aspect of the visual world that computing systems model using a variety of digital encoding schemes. No scheme is perfect, but there are good schemes in common use that provide a useful approximation of color. We’ll consider two such schemes, grayscale and RGB.

Grayscale Color

One simple encoding scheme is to restrict the set of possible colors to shades of gray ranging from white to black and to represent these shades with a single number between 0 and 255.

Black is represented by 0 indicating no light; white is represented by 255 indicating full light; shades of gray are represented by numbers between 0 and 255.

RGB Color

RGB is a more sophisticated color encoding scheme that supports colors beyond “black and white” using a additive model that encodes colors according to the relative intensities of Red, Green and Blue (RGB).

Black is represented by no red, green or blue (0, 0, 0); white is represented by full intensity red, green and blue (255, 255, 255); other mixed shades are represented by specific intensities of the three additive primary colors.

The Processing environment provides a tool that makes finding the right color a bit easier.

This tool allows you to either choose a color from the color palette or to directly specify the RGB values. Note that it also supports HSB (Hue-Saturation-Brightness), another color encoding scheme.

As an example of the use of color, consider the improved smiley face example shown here.

 
background(255);
smooth();   // This improves the rendering.

// Draw the yellow circle.
fill(250, 250, 90);
ellipse(50, 50, 75, 75);

//Draw the eyes.
fill(0);
ellipse(38, 40, 10, 20);
ellipse(63, 40, 10, 20);

// Draw the mouth
noFill();
strokeWeight(2);
arc(50, 48, 50, 50, radians(40), radians(140));
// See the reference for a discussion of arcs and radians.

// Draw the reflections in the eyes.
stroke(255);
strokeWeight(2);
point(40, 38);
point(65, 38);

Note the following features of the this program:

Exercise 3.a.3. Modify the face program you programmed earlier as follows:

Manipulating Other Types of Objects

Programs are not limited to geometric figures and color. They can manipulate anything for which there is a digital encoding scheme, including characters, numbers, images, audio clips and video.

Images

Processing can load and render images as shown in this example.

 
// a simple image
// kvlinden, 12may2009

size(120,120);
background(0);
image(loadImage("blueMarble.gif"),10,10);

Note the following features of the this program:

Fonts

Processing can create, load and render text fonts as shown in this example.

 
// a simple saying
// kvlinden, 12may2009

size(375,200);
background(255);
textFont(loadFont("Papyrus-Regular-80.vlw"), 80);
fill(160,110,31);
text("1000 miles", 0, 120);
textFont(loadFont("BlackadderITC-Regular-54.vlw"), 54); 
fill(232,161,47,150);
text("A journey of", 80, 55);
text("starts with one step.", 10, 155);

Note the following features of the this program:

Processing allows you to combine geometric figures, images, text into a single sketch.

Exercise 3.a.4 As a final exercise, create a personal logo or poster that includes whatever geometric shapes, images and fonts you’d like to use. Here are a few examples.

Checking In

Submit all the code for your face sketch and your logo/poster.