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).