# 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:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![WakeMeAtThree](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/wakemeatthree/32/38_2.png) [@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")

</div>

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));
  }
}

```

---

_[View the full topic](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433)._