2025-02-25-HSB-Demo

function setup() {

  createCanvas(400, 400);

  colorMode(HSB, 360, 100, 100);

}

​

function draw() {

  background(0, 0, 100);

  // Determine the right boundary (either mouseX or canvas width)

  let rightEdge = min(mouseX, width);

  // Draw lines from left edge to rightEdge

  for (let i = 0; i < rightEdge; i++) {

    // Map the x position to the full hue range (0-360)

    // This ensures the full spectrum is shown regardless of how far right mouseX is

    let hue = map(i, 0, rightEdge-1, 0, 360);

    stroke(hue, 100, 100);

    line(i, 0, i, height);

  }

}