Structure of a Processing Sketch

There are two main pieces of a Processing sketch; the setup and the draw functions.

Inside of setup(){  }, you choose options that are set once. These are things like the size of the canvas, the color mode, pre-loaded images, and other one time tasks.

Inside of draw(){  }, you put code for the drawing that you will do on the screen. draw() will repeat this code (typically 20-50 times per second) so that animation is possible.

Key syntax

The curly braces { } that start and end the setup() and draw() functions create a block of code from many lines of code. Everything inside of the curly braces makes up those functions. The small arrow to the left of the number line can be used to condense the curly braces.

Each operation in the function ends with semicolon.

How does it work?

The trail left behind by the circle is created by covering the screen with a semi-transparent, black rectangle.

xxxxxxxxxx

  fill(0, 20);

  rect(0, 0, width, height);

Each cycle through the draw loop makes previously drawn circles fade to the black background color.

You try...

Add ellipseMode(CORNER); inside of setup. How does the behavior change?

Change the parameters inside of the first fill command of the draw loop. What does each do?

Location on the Canvas

The first thing to learn about working in Processing is how to orient yourself on your canvas.

Unlike your Algebra class, the Processing canvas origin is in the top-left corner. Take a look at the examples below.

Image from: Processing.org

For a detailed introduction to what it means to draw on the canvas, try Dan Shiffman's Drawing Tutorial.

Key syntax

size(w, h); The size function is used to set the size of the canvas.

An important detail when drawing is that shapes are drawn in order from bottom to top. You can cover early parts of your drawing with other shapes.

You try...

Rearrange the lines of code so that the red rectangle is under the blue ellipse.

Add a second ellipse to the image. Place it at the bottom-right corner of the rectangle.

Draw a line from the bottom-left corner of the rectangle to the top-right corner of the rectangle.

Line

Lines in Processing can be built using the line() function .

xxxxxxxxxx

// draw a line from (100,200) to (300,250)

line(100,200, 300,250);

The first two parameters are the x and y of the starting point. the second two parameters are the end point.

Key syntax

There are several mode options that can be used.

stroke(color); is used to change the color of the line

strokeWeight(pixels);  is used to adjust the thickness of the line

strokeCap();  is used to adjust the end style of lines.

You can also make a point(x, y).

You try...

Finish the box by adding a lines in the correct location.

Change the stroke weight and color.

Improve the illusion of an empty box by adding an extra line.

Shape

Shapes in Processing are built from 2D Primitives.

All shapes are enclosed by a line unless you turn it off with noStroke(); Set the line color with with stroke(color) 

A shape's fill color is set with fill(color);  unless you use the noFill();  function.

Key syntax

rect(x, y, w, h);  A rectangle. Several different modes can be used to determine how the rectangle is placed. Additional arguments can be used to set the radius of the corners.

ellipse(x, y, w, h);  An ellipse or circle. Several modes can be used to determine how the ellipse is placed.

triangle(x1, y1, x2, y2, x3, y3);  A triangle. The parameters are three coordinate pairs.

quad(x1, y1, x2, y2, x3, y3, x4, y4);  A quadrilateral. The parameters are four coordinate pairs.

arc(x, y, w, h, start, end); An arc is a fraction of a circle. The start and end parameters are angles specified in radians.

You try...

Add an outline stroke to the triangle. Was an outline added to the rectangle also? How can you fix that?

Remove the fill from the quadrilateral.

Create an abstract face from some shape primitives.

RGB Color

The RGB color model is used on computers because they mix the light from three LEDs (red, green, and blue) to create the range of colors that we see on our screens.

When setting a color in RGB mode, three values are used to set the amount of red, green and blue light. No light of a color is 0. Full brightness is 255. You can set the background color with background(R,G,B); 

A fourth argument can be used with fill(R,G,B,alpha);  or stroke(R,G,B,alpha);  The alpha channel sets the opacity of the color (completely transparent is 0). These settings carry forward; once you change the color, all shapes will be drawn using those colors.

Use a color picker  to choose colors quickly.

HSB Color

The HSB color mode is more common in design and art. Hue describes the color, Saturation the depth of color, and Brightness the lightness of the color.

Most people use colorMode(HSB, 360, 100,100);  so that the Hue is the degree position on a color wheel and Saturation and Brightness are percents.

In HSB mode, stroke() and fill() will change their behavior.

For a more complete discussion of the color modes in Processing, try Shiffman's Color Tutorial.

Try this...

Add an alpha channel to the fill color for the ellipse.

Create a palette of colors that you like and record their RGB values for use later.

Look at the background commands. Can you explain why background(0,0,100) gives white?

The color wheels are show with different saturation and brightness levels. Change the background from white to black.

Moving the Canvas

When drawing a figure, it is convenient to draw relative to the center of the figure.

In Processing, you can change the origin and angle of the canvas. This can make it convenient to move the figure you have created around the screen.

translate(x,y);  Change the position of (0,0) in the canvas.

rotate(angle); Similar to translate, but now the canvas rotates. Angles are in radians.

pushMatrix(); and popMatrix();   These work together to allow you to quickly return to your old canvas origin.

You try...

See if you can sort out why each circle appears where it does on the grid.

Add a circle after the yellow circle so that it appears at 500,500.

Add a translate(100,100); before the pushMatrix(); How does the image change? What happens if you put that line of code between pushMatrix(); and popMatrix();?