Fade between random colours for a background

p5.js Coding Questions
4

Hi Carpece!

I would use lerpColor() to interpolate between a startColor and newColor. The interpolation amount could be based on frameRate, but I personally prefer using an incrementing float that I can vary its speed. To keep changing to another color, just assign startColor to newColor + generate a new random newColor + reset interpolation amt once it reaches 1 (as in once it finishes its interpolation).

let amt, startColor, newColor;

function setup() {
  createCanvas(400, 400);
  
  startColor = color(255,255,255);
  newColor = color(random(255),random(255),random(255));
  amt = 0;

  background(startColor);
   
}

function draw() {
  background(lerpColor(startColor, newColor, amt));
  amt += 0.01;
  if(amt >= 1){
    amt = 0.0;
    startColor = newColor;
    newColor = color(random(255),random(255),random(255));
  }
}
3 Likes