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:
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:
beginShape() parameters, consult the reference.
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.
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.
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
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
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.
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:
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
endContour() functions for this purpose.
The first challenge is the outer circle. The contour functions are used within a
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
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
endContour() function. Of course, you cannot observe the effect unless you add a fill:
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
The curves need not be pixel-perfect replicas, as this is just something to get you used to working with them.