Drawing Shapes

If you have ever created something, you will have gone through a series of steps to reach a result. Drawing images to a computer screen is no different!

Paint by Numbers

Whatever you wish to draw can be broken down into a neat little "paint by numbers" painting. You choose a brush and a color, and then you fill in a shape. You do that often enough, and you'll end up with a pretty picture!

Shapes

Processing has a bunch of shapes built in. In earlier examples you'll already have seen circle(); and rect(); but there are several other shapes, too. These commands generally take a bunch of numbers that are usually pixel coordinates or sizes.

rect(5, 20, 70, 15);

This will draw a rectangle. The four numbers specify its position and size. We call these numbers parameters or arguments that we pass along with the command. The order of these parameters is important, and we can look them up in the reference for rect().

Rectangle

The four parameters to rect() are:

• X-Coordinate: 5
• Y-Coordinate: 20
• Width: 70
• Height: 15

Normally, X and Y point to the upper left corner of the rectangle, but the reference happily informs us that this behavior can be changed.

So, coming back to our earlier line of code, we would have started drawing a rectangle at 5 pixels over to the right, 20 pixels down from the top. We would then have drawn a rectangle 70 pixels wide and 15 pixels tall!

Even more Parameters

There are quite a few more options regarding how you can draw rectangles, but for this, I'm sending you to the reference docs :-)

Circle

The circle() normally takes three parameters:

circle(70, 120, 100);

• X-Coordinate: 70
• Y-Coordinate: 120
• Extent: 100 (think: diameter!)

This is a pretty boring one, so we'll just move on.

Line

A line() is drawn between two points. So you need to give four parameters:

line(10, 5, 70, 90);

• Start at X-Coordinate: 10
• Start at Y-Coordinate: 5
• End at X-Coordinate: 70
• End at Y-Coordinate: 90

This draws a diagonal line from roughly top left to bottom right.

Point, Triangle, Quad and Ellipse

Most of the basic shapes work pretty much like the ones above. They take parameters in Pixels and draw either a point(), a triangle(), a quad() or an ellipse(). Please refer to their individual (linked) reference pages for details!

Arc

The arc() deserves its own headline because it is special in one particular way: It has parameters that are not pixel coordinates! An arc is basically a piece of a pie chart, so we need to somehow define how large to cut this slice!

arc(50, 55, 30, 30, 0.7, 1.8);

This works very similar to the circle or the ellipse, but has additional parameters:

• X-Coordinate (center): 50 pixels
• Y-Coordinate (center): 55 pixels
• Width: 30 pixels
• Height: 30 pixels
• Start of the arc: 0.7 radians
• End of the arc: 1.8 radians

So, let's talk about radians.

Radians

From math class, you may remember that we have different ways of measuring angles. Humans commonly like to read stuff in degrees, where a full circle would be 360° and a right angle is 90° and so on. Computers often like to have their angles specified in radians.

Radians don't count from 0–360° but from 0–2π (or 0–6.28…). You can think of radians as "how long do I need to travel along the arc of a unit-circle. In Processing, 0 is 3 o'clock (or to the right). It then starts counting clockwise.

Radians and Degrees

With this knowledge, we can decode the final two parameters of the arc: 0.7rad is at roughly 40° (or 4 o'clock) and 1.8rad is at roughly 100° (or 6 o'clock). We should expect that arc to be a pretty typical slice of pizza and our screenshot confirms this. It is roughly one sixth of a full circle.

Try some shapes!

Try using various shapes. This is also a good opportunity to make some experiments with how the drawn shapes will be ordered.

Experiment with arc and its weird radians. What happens if you go beyond 6.28?

Relevant excerpt from Learning Processing

(the section starts at 27:58 and runs through 39:19, the video should start and stop on these automatically.)