# Fade between random colours for a background
**URL:** https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433
**Category:** Coding Questions
**Created:** [July 2, 2018, 12:39pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433 "2018-07-02T12:39:23Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Carpece](https://discourse.processing.org/u/Carpece)
#### Post date: [July 2, 2018, 12:39pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/1 "2018-07-02T12:39:23Z")
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.
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [July 2, 2018, 12:44pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/2 "2018-07-02T12:44:37Z")
Hey,
Could you post your code ? (use the `` in the message editor)
---
### Author:  [@MxFxM](https://discourse.processing.org/u/MxFxM)
#### Post date: [July 2, 2018, 1:13pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/3 "2018-07-02T13:13:12Z")
I would recommend HSB color mode for fading colors. Look at this from the reference:
[https://processing.org/reference/colorMode\_.html](https://processing.org/reference/colorMode_.html)
or some other tutorials.
---
### Author:  [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)
#### Post date: [July 2, 2018, 1:40pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/4 "2018-07-02T13:40:18Z")
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).
```javascript
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));
}
}
```
---
### Author:  [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [July 2, 2018, 8:59pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/5 "2018-07-02T20:59:55Z")
Check for fading posts. For instance:
> [A Better Way to Fade? - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/13189/a-better-way-to-fade)
> [Gradually change color - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/23620/gradually-change-color)
Kf
---
### Author:  [@Carpece](https://discourse.processing.org/u/Carpece)
#### Post date: [July 4, 2018, 3:36am UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/6 "2018-07-04T03:36:14Z")
```auto
function setup() {
createCanvas(720, 400);
frameRate(2);
}
function draw() {
background(random(255), random(255), random(255));
}
```
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [July 4, 2018, 8:53am UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/7 "2018-07-04T08:53:37Z")
With `colorMode(HSB)` :
```auto
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;
}
```
---
### Author:  [@Carpece](https://discourse.processing.org/u/Carpece)
#### Post date: [July 4, 2018, 6:06pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/8 "2018-07-04T18:06:59Z")
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
---
### Author:  [@WakeMeAtThree](https://discourse.processing.org/u/WakeMeAtThree)
#### Post date: [July 4, 2018, 7:27pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/9 "2018-07-04T19:27:42Z")
> [@WakeMeAtThree](#):
>
> 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)); } }
You can use a [smoothstep function](https://en.wikipedia.org/wiki/Smoothstep) to get a pause with a nice transition between colors. Here’s how previous code looks like now:
```javascript
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).
---
### Author:  [@Carpece](https://discourse.processing.org/u/Carpece)
#### Post date: [July 5, 2018, 7:14am UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/10 "2018-07-05T07:14:54Z")
Many thanks @WakeMeAtThree, you make my day!
Gracias!
---
### Author:  [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)
#### Post date: [June 9, 2022, 2:11pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/11 "2022-06-09T14:11:43Z")
Hi, I was wondering how to transition from just two colours back and forth over time?
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 9, 2022, 8:23pm UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/12 "2022-06-09T20:23:40Z")
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?
---
### Author:  [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)
#### Post date: [June 10, 2022, 1:06am UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/13 "2022-06-10T01:06:18Z")
@josephh
Hi, I’ve figured it out, thank you!
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [June 10, 2022, 11:15am UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/14 "2022-06-10T11:15:49Z")
Hello @locky.mcdonald,
Related:
[https://discourse.processing.org/t/ball-moving-linear-and-cosinusoidal/15209](https://discourse.processing.org/t/ball-moving-linear-and-cosinusoidal/15209)
Focus on this:
> [@Ball moving - Linear and Cosinusoidal](https://discourse.processing.org/t/ball-moving-linear-and-cosinusoidal/15209/1):
>
> ```auto
> //modulated cosinusoidal
> if (true)
> {
> count = 1-(0.5*cos(theta) + 0.5);
>
> ```
You can also make it sinusoidal.
`:)`