Vertex Functions Part 1

Vertex Functions

A vertex is basically another word for a point. Yet the syntax of a vertex() function is notably different to that of the point() function.

For example in order to draw two points on a display screen using the point() function you could call a similar code to that shown in code 1..

Code 1;

size(200,200);
background(0);
strokeWeight(10);
stroke(255);
smooth();
point((width*0.2),height/2);
point((width*0.8),height/2); 

Figure 1: vertex() and point() examples Sketch.

Code 2 ;

size(200,200);
background(0);
strokeWeight(10);
stroke(255);
smooth();
beginShape(POINTS);
vertex((width*0.2), height/2);
vertex((width*0.8), height/2);
endShape();

Code 2 shows how the use of a vertex() function would produce the same outcome (See figure 1) as using the point() function. The display area is broken down into coordinate locations (200 in width by 200 in height for this example) each of these references a point location or vertex, which are the arguments taken by each of the two functions.

You will probably have noticed that there is an inclusion of beginShape() function, and endShape() function, which the vertex() function can be found nestling in. The beginShape() function has predefined mode arguments, these are POINTS, LINES, TRIANGLES, TRIANGLE_STRIP, TRIANGLE_FAN, QUADS, and QUAD_STRIP, if no mode is defined line strip is used instead. The beginShape() function essentially begins the recording of the drawing instructions and endShape() stops the recording. The benefit of this is that the data can be plotted based on different drawing algorithms, using the different modes within the beginShape() and endShape() functions

The vertex() functions we saw above are specifically for displaying 2D coordinates where two arguments are fed to the function. The vertex() function also allows for displaying 3D coordinates with the use of three arguments and a display renderer such as P3D or opengl. The syntax of both are as follows;

vertex(x, y);
vertex(x, y, z);

Just to take a moment out in order to see some vertex() functions in action, we have seen a simple use of the POINTS mode (code 2) so this time lets have a look at the mode TRIANGLES (code 3 and figure 2)

Code 3;

size(200,200);
background(0);
stroke(255);
strokeWeight(4);
smooth();
noFill();
beginShape(TRIANGLES);
strokeJoin(ROUND);
vertex((width*0.2), height*0.8);
vertex((width*0.8), height*0.8);
vertex(width/2, (height*0.2));
endShape();

Figure 2: TRIANGLE mode sketch example.

You should be familiar by now with the size() and background() functions. The stroke() function takes an argument from 0 to 255, with 0 being black and white being 255. The strokeWeight() function is the thickness of the line. The noFill() function ensures that the area enclosed within the shape isn't automatically filled. For example if the noFill() function were to be omitted then the display would be that of a solid white triangle.

There were two functions that I purposely left out as they require slightly more detail, the smooth() function and the strokeJoin() function.