Colour Interpolation
In this class, we were introduced to colour interpolation and how to apply it to graphics created using the p5.js library.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);