Transformations
The sketch created in the previous exercise was modified to change how the colour wheel gets drawn on the canvas by using transformations.Mapping
In this exercise, the values required for the colour wheel: numOfSegments
,
stepAngle
, centerX
, centerY
, and radius
are defined in the draw()
function. This is because the mouse position controls
the number of segments of the colour wheel. To do this, the mouseX
coordinate is taken and scaled
to a new number by using the map()
function. In the code below, mouseX
is scaled from a value in the range of 0 to the right edge of the window (width
) to
a range between 20 and 60.
function draw() {
numOfSegments = map(mouseX, 0, width, 20, 60);
stepAngle = 360/numOfSegments;
centerX = width/2;
centerY = height/2;
radius = 100;
}
Translations
The coordinate system which starts at point (0, 0) can be moved by using the
translate()
function. If a sketch has multiple translations,
the push()
and pop()
functions are used to save
the drawing state and transformation settings and then restore these settings.
The following code is included in the draw()
function.
push();
translate(centerX, centerY);
beginShape(TRIANGLE_FAN);
vertex(0, 0);
for (let i = 0; i <= 360; i += stepAngle) {
let vx = radius * cos(i);
let vy = radius * sin(i);
fill(i, 100, 100);
vertex(vx, vy);
}
endShape();
pop();
Instead of adding the centre points to the adjacent and opposite (vx
and vy
),
the coordinate system is moved from (0, 0) to the centre of the canvas (centerX
and centerY
).