# Fading Background Colors

**URL:** https://discourse.processing.org/t/fading-background-colors/30164
**Category:** p5.js
**Created:** [May 19, 2021, 1:57am UTC](https://discourse.processing.org/t/fading-background-colors/30164 "2021-05-19T01:57:00Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Pepita](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Pepita](https://discourse.processing.org/u/Pepita)
#### Post date: [May 19, 2021, 1:57am UTC](https://discourse.processing.org/t/fading-background-colors/30164/1 "2021-05-19T01:57:00Z")

</div>

Hi!  
I am trying to fade that background from one color to another. I’ve had success by following this very helpful post :

> [@Fade between random colours for a background](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433/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); startC…

But I would like to fade another color in afterwards (so that there will be 3 color changes). Not having much luck, I thought the way to go would to be add another if statement but clearly I’m over looking something super obvious.

Here’s my code:

\</

```
function setup(){

startColor = color(0);
newColor = color(84, 76, 166, 65);

amt = 0;

background(startColor);

```

}

```
    function draw(){
    
    background(lerpColor(startColor, newColor, smoothstep(0.3,0.9,amt)));
    
    amt += 0.001;

    if(amt >= 1){

    //amt = 0.0

    startColor = newColor;

    newColor = color(134, 124, 242, 95)

    }

```

///Additional Color

```
    if(amt >= 1.5){

    amt = 0.0

    startColor = newColor;

    newColor = color(109, 164, 166, 65)

    }

```

}

```
function smoothstep(edge0, edge1, x){

x = constrain((x - edge0) / (edge1 - edge0), 0.0, 1.0);

return x * x * (3 -2 * x);

```

}  
/\>