Fade between random colours for a background

p5.js Coding Questions
1

Hi, I’m trying to design a fading transition between random colours for the background (based on time).
I thought it could be done with frameRate, but doesn’t respond. Any suggestion? Thanks in advance.

2

Hey,

Could you post your code ? (use the </> in the message editor)

3

I would recommend HSB color mode for fading colors. Look at this from the reference:
https://processing.org/reference/colorMode_.html
or some other tutorials.

1 Like
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
5

Check for fading posts. For instance:

A Better Way to Fade? - Processing 2.x and 3.x Forum
Gradually change color - Processing 2.x and 3.x Forum

Kf

6 
function setup() {
  createCanvas(720, 400);
  frameRate(2);
}

function draw() {
  background(random(255), random(255), random(255));
}
7

With colorMode(HSB) :

let hue = 0;

function setup(){
  createCanvas(500,500);
  colorMode(HSB,255);
}

function draw(){
  background(hue,255,255);
  hue += 0.1;
  if (hue > 255) hue = 0;
}
8

Thanks a lot both @josephh and @WakeMeAtThree !!
Now I’m looking for set a pause between old and new color… I’ve tried with update() but it doesn’t work…

Regards

9

You can use a smoothstep function to get a pause with a nice transition between colors. Here’s how previous code looks like now:

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, smoothstep(0.3,0.7,amt)));
  amt += 0.01;
  if(amt >= 1){
    amt = 0.0;
    startColor = newColor;
    newColor = color(random(255),random(255),random(255));
  }
}

function smoothstep(edge0, edge1, x) {
    x = constrain((x - edge0) / (edge1 - edge0), 0.0, 1.0); 
    return x * x * (3 - 2 * x);
  }

You can play with the slope of the step by changing the edges from 0.3-0.7 to something else (0.2-0.3 or 0.3-0.9).

10

Many thanks @WakeMeAtThree, you make my day!
Gracias!

11

Hi, I was wondering how to transition from just two colours back and forth over time?

12

Hi @locky.mcdonald,

The above code snippets show how to fade between random colors by changing a variable that controls the lerp. In your case you need a value that “goes back and forth” or alternate between two values.

For example going from 0 to 1 then 0 then 1…

Can you think of a function that alternate smoothly between two values?

1 Like
13

@josephh

Hi, I’ve figured it out, thank you!

1 Like
14

Hello @locky.mcdonald,

Related:
https://discourse.processing.org/t/ball-moving-linear-and-cosinusoidal/15209

Focus on this:

You can also make it sinusoidal.

:)

1 Like