Custom Shapes
The p5.js library includes the functionsbeginShape()
, endShape()
, and vertex()
which allow us to create more complex shapes.
In this exercise, these functions were used to draw the HSB colour wheel.
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.