« 2.1: Curves |
2.3: Strings »

## Vertices

You can think of vertices as the dots in a connect-the-dots style drawing puzzle. A triangle requires three vertices; a pentagon, five; a five-pointed star (★), ten; and so forth. By connecting vertices using lines and curves, the shape possibilities become limitless. A *vertex* (singular) is not limited to two-dimensional space – for instance, Blender’s Suzanne (a monkey head) has around five-hundred vertices positioned in 3D space.

Create a new sketch and save it as “vertices”. Within the new vertices folder, add a “data” folder containing the grid.png file from your last sketch.

Now draw a square using vertices:

The `beginShape()`

and `endShape()`

functions should be self-explanatory. But, the shape will not automatically close unless you use `endShape(CLOSE)`

. However, an active `fill()`

will fill a shape however it can:

There are also various parameters one can provide the `beginShape()`

function to determine how the enclosed vertices are connected, if at all:

For other `beginShape()`

parameters, consult the reference.

### Bézier Vertices

The `bezierVertex()`

function allows one to create curved shape lines. There’s also a `curveVertex()`

for Catmull-Rom-type curves, but lesson 2 will focus on the Bézier type, as these allow for greater control and more graceful curves.

The `bezierVertex()`

function takes the following arguments, expanded across multiple lines here for easier comprehension:

To get a better grip on how this function works, we’ll work toward completing the remaining shapes depicted below. The pale blue lines/circles provide a visual indication of where the handles and control-points lie (so there’s no need to recreate them).

You’ll be referencing this image repeatedly through this section. It may be useful to save a copy and open a preview of it alongside your Processing editor.

#### S-Bend

The S-bend is comprised of two vertices, both of which are attached to control points. Of course, this is a curve, so you could draw it using a `bezier()`

function. However, the purpose of this section is to introduce shapes. Within a `beginShape()`

, you can mix `bezierVertex()`

, `curveVertex()`

and `vertex()`

however necessary. But, the first time a `bezierVertex()`

is used, it must be prefaced with a `vertex()`

. Begin a new shape and place the first (in this case, upper) vertex:

Now add the second vertex using `bezierVertex()`

:

I’ll admit, it’s a bit confusing. But, with the positions of the vertices presented for you in the reference image, it’s really just a matter of writing in the correct sequence of coordinates.

#### Heart

You can think of the heart shape as two lines connecting two vertices. To begin, draw one half of the shape:

All that’s left for you to do is complete the right-half of the heart. Add a second `bezierVertex()`

line and fill-in the arguments:

#### Chinese Coin

Round metal coins with square holes in the centre were first introduced in China many centuries ago. The violet-filled shape resembles such a coin, albeit with none of the relief/engraving. Its form requires that one shape be subtracted from another. Processing provides the `beginContour()`

and `endContour()`

functions for this purpose.

The first challenge is the outer circle. The contour functions are used within a `beginShape()`

and `endShape()`

, so using an `ellipse`

function is not an option. However, circles can be drawn using Bézier curves:

You can begin by forming a circle using a diamond shape:

With your vertices in place, you can now convert the `vertex()`

functions to `bezierVertex()`

functions. Remember, though: the first point must be a `vertex()`

.

To save you having to workout where the control points lie, here are the missing arguments:

With the circle in place, you can go about removing a square from the middle. This is a relatively straightforward exercise, but there’s one crucial thing to be aware of: one must use *reverse winding* for the subtracted shape. Read through the circle code again and notice how all of the vertices are plotted in a clockwise manner; this means that the *square*’s vertices must be plotted counter-clockwise, i.e. opposite to the winding of the shape from which it will subtract.

Place the square’s vertices within a `beginContour()`

and `endContour()`

function. Of course, you cannot observe the effect unless you add a fill:

## Bézier Task

Time for a challenge!

Create a new sketch and save it as “bezier_task”. Within the sketch’s folder, create a “data” sub-folder and add a copy of the grid.png, along well as this image file:

Add the following setup code:

When you run the sketch, you’ll see four Bézier curves. Recreate them using `bezierVertex()`

.

The curves need not be pixel-perfect replicas, as this is just something to get you used to working with them.

2.3: Strings »

Complete list of Processing.py lessons