Tuesday 10 March 2009

A start on my chunk on vertex() function

The vertex() function is a flexible way to draw lines and connect them into interesting shapes and patterns which can be repeated and varied however you like. Once you know how to repeat sections of code in a loop, use variables to change some characteristics of the line/shape, and apply trigonometry, even in a very basic way with limited understanding (as I have), then you can make some pleasing drawings with the vertex() function.

Vertices, as you may well know, are points in space which, taken together, define the shape and placing of an object, such as a line, triangle or polygon. A triangle has three vertices which define the points in space, and when joined together by lines, they make up the triangle shape. A polygon has n vertices, where n can be any number, and usually has equal length sides and equal internal angles. Trigonometry is the best and easiest way to define the vertices of a triangle or polygon, but don’t worry – I’ll show you how this can be done without going into technicals.

Since a vertex is a point in space, it follows that the vertex() function takes two arguments for the coordinates (or three if you are working in 3D):

vertex(x, y) (or vertex(x, y, z))

I’ll stick to 2D. Now, since vertices are used in processing to draw lines and shapes, we first of all want several of them – that’s easy, just add more calls to the vertex() function – and second of all we want to tell the compiler that they should be connected together. We do this by wrapping calls to vertex() in between calls to beginShape() and endShape(). beginShape() can take an argument defining how the vertices should be joined, such as POINTS, LINES or TRIANGLES, but I’ll just use the default (no arguments), which connects vertices in a filled line strip. In other words, the first vertex is connected by a line to the second vertex, which is connected by another line to the third vertex, and so on ad finitum. To generate an unfilled line strip, simply call noFill() somewhere in your code before beginShape(). endShape() can be passed the CLOSE argument, which closes the loop of vertices you have created to make a complete shape.

That should be all you need to start experimenting with the vertex() function. Things get more interesting though if you’re willing to dabble in a little trigonometry. Trigonometry is essential for drawing polygonal shapes with the vertex() function, and you don’t have to be a master to use it to draw some simple shapes. As you’ll probably soon see, my grasp of trigonometry is sketchy at best, but I’ve managed to use it to draw my sample program, which I’ll now talk you through.