# 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:

- 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:

- 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!

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.

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