Colour Interpolation

Storing Colours Into Variables

Colour interpolation works by finding a third colour between two colours. The color() function can be used to define these two colours. Depending on the colour mode set with the colorMode() function, the parameters passed to the color() function are interpreted as RGB or HSB values. For this exercise, the colour mode is set to HSB in setup().

To show how colour interpolation works, I first drew 100 squares on the canvas. 10 on each column and 10 on each row.

function draw() {
  for (let x = 0; x < 10; x++) {
    for (let y = 0; y < 10; y++) {
      noStroke();
      rect(x * 50 + 10, y * 50 + 10, 20, 20);
    }
  }
}

The two colours which would be used for colour interpolation are created and stored into variables startColor and endColor. The first colour has a hue of 360 degrees, while the second colour has a hue of 180 degrees. The following lines of code were added before noStroke();.

let startColor = color(360, 100, 100);
let endColor = color(180, 100, 100);

Finding Another Colour Between Two Colours

The lerpColor() function finds a third colour between two colours by interpolating them. The amount of interpolation between these colours are based on a number between 0 and 1. This function accepts three parameters: the first colour or in this exercise, the colour stored in the starColor variable, the second colour (endColor), and the interpolation amount. As shown in the code below, the interpolation amount is set to the x value divided by 10, which would return a float value. If the value is equal to 0.1, then it is near the first colour. 0.9 is near the second colour and 0.5 is between those colours.

let c = lerpColor(startColor, endColor, x/10);
fill(c);