Custom Shapes

Setting Up the Canvas

By default, the mode in which the angles would be interpreted and calculated is set to RADIANS. In this exercise, the angleMode() is set to DEGREES. The colorMode, similar to the previous exercises, is set to HSB. This is because we're creating a colour wheel. Each major colour on the HSB colour wheel are at 30 degree intervals. Other initial properties that are defined for this exercise are the width and height of the canvas and the background colour. The outline of the shapes are also disabled by the noStroke() function.

function setup() {
  createCanvas(500, 500);
  background(224);
  angleMode(DEGREES);
  colorMode(HSB, 360, 100, 100);
  noStroke();
}

The following are values needed to create the colour wheel. These values are defined in the setup() function.

centerX = width/2;
centerY = height/2;
numOfSegments = 12;
stepAngle = 360/numOfSegments;
radius = 100;

The centerX and centerY values will be used to place the centre point of the colour wheel on the centre of the canvas. The numOfSegments refers to the number of points of the colour wheel. stepAngle determines the angle at which a point is drawn within the colour wheel and the radius is the distance between the centre and the boundary of the colour wheel.

Drawing the Colour Wheel

To draw the HSB colour wheel, I used the beginShape(), endShape(), and vertex() functions. beginShape() starts recording the vertices that define the form of a complex shape. This function accepts a parameter which affects the kind of shape that would be drawn. In this exercise, I passed the TRIANGLE_FAN constant to the beginShape() function, which should draw the segments of the colour wheel. The endShape() function is called to end the recording and to complete the complex shape. The vertex() function has to be used within beginShape() and endShape. The vertex coordinates for the custom shape are defined by using this function.

function draw() {
  beginShape(TRIANGLE_FAN);
    vertex(centerX, centerY);
    for (let i = 0; i <= 360; i += stepAngle) {
      let vx = (radius * cos(i)) + centerX;
      let vy = (radius * sin(i)) + centerY;
      fill(i, 100, 100);
      vertex(vx, vy);
    }
  endShape();
}

In the above code, the custom shape starts at the centre of the canvas. This point would be the centre of the colour wheel. It is followed by a for loop. This loop initialises i (which represents an angle) to 0, checks that i is less than 360 (360 degrees is a full circle), draws a segment of the colour wheel, and increments i by 30 (This is the quotient of 360/12 and as previously mentioned, the major colours are at 30 degree intervals on the HSB colour wheel). Within the for loop, the rest of the vertices are drawn. A segment of the colour wheel looks like a triangle and we have its hypotenuse already, the value assigned to the radius variable. To find the adjacent side, the radius is multiplied by the cosine of i and the product is added to a centre point, the centreX value. If the product is not added to the centre point, the segment would be placed incorrectly on the canvas. The adjacent value is stored in the vx variable. The opposite side is calculated in a similar way but in reverse. The opposite value is stored in the vy variable. The adjacent and opposite values are vertices and are passed to the vertex() function. The hue colour of each segment depends on the angle.