Vertex Functions Part 2

The strokeJoin() function can take three different options. The one we have seen, ROUND, but also MITER which is the default option and BEVEL. These effect the way the end caps come together, and as you can see from figure 2, the points of the triangle are slightly rounded. We will come back to this later on in the chapter.

In order for us to see how the internal recording works the following sketch has a look at recreating the functionality found with the vertex() function, but with the use of the point() and line() function. (Code 4) To produce figure 3.

Code 4;
void setup(){ 
  size(200, 200); 
  background(0); 
//Sets up arrays to store coordinates 
  float[]x = new float[5]; 
  float[]y = new float[5]; 
//sets up 2D array to group together coordinates 
  float [][]xy = {x, y}; 
//Creates a starting point from which to run 
  float pointsX = width*0.1; 
  float pointsY = height*0.9; 
//sets the starting points 
  xy[0][0] = pointsX; 
  xy[1][0] = pointsY; 
//iterates over each of the positions in the array's to assign   
//coordinates dependent on the previous coordinates 
  for (int i = 1; i<xy[o].length; i++){
    if(i ==1){ 
      pointsX +=width*0.4; 
      pointsY -=height*0.8; 
       xy[0][i] = pointsX;  
      xy[1][i] = pointsY;
        } 
    if(i==2){ 
      pointsX +=width*0.4; 
      pointsY +=height*0.8; 
      xy[0][i] = pointsX; 
      xy[1][i] = pointsY; 
    } 
    if(i==3){ 
      pointsX -= width*0.8; 
      pointsY -=height*0.55; 
      xy[0][i] = pointsX; 
      xy[1][i] = pointsY;
    } 
    if(i==4){
      pointsX +=width*0.8; 
      xy[0][i] = pointsX; 
      xy[1][i] = pointsY; 
    } 
  } 
  star(xy); 
} 
//function called to plot a star and join the points. 
void star(float[][]pts){ 
  stroke(255); 
  smooth();
  for(int i = 0; i<pts[0].length; i++){ 
    strokeWeight(5); 
//Plot the points from the input arrays 
    point(pts[0][i], pts[1][i]); 
    strokeWeight(0.5); 
//Join the points together with a thin line 
    if(i>0){ 
      line(pts[0][i],pts[1][i],pts[0][i-1], pts[1][i - 1]); 
    } 
//If the last position in the array join to the first point. 
    if(i == pts[0].length-1){ 
      line(pts[0][i], pts[1][i], pts[0][0], pts[1][0]); 
    } 
  } 
} 

Figure 3: Star Plotter Sketch

At first glance the code may look quite daunting, however as we go through it you will find the majority familiar with what has previously been covered.

First off, the function setup() which is used to setup the display size, the colour is set and several array's are created and then populated. As we can recall the use of magic numbers is considered poor coding technique, so each position in the array has been setup as a percentage of the width and height assigned to the x and y coordinates. In this example consider if we had used magic numbers and the size of the display is changed. The output sketch in the display will be the same size regardless of the box size, however with the use of percentages dependent on the initial setup size, the sketch will always be proportional in size to the size of the display.