# Background change based on music

**URL:** <https://discourse.processing.org/t/background-change-based-on-music/34794>\
**Category:** Libraries\
**Created:** [January 22, 2022, 10:18pm UTC](https://discourse.processing.org/t/background-change-based-on-music/34794 "2022-01-22T22:18:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alix](https://avatars.discourse-cdn.com/v4/letter/a/f6c823/32.png) [@Alix](https://discourse.processing.org/u/Alix)\
**Post date:** [January 22, 2022, 10:18pm UTC](https://discourse.processing.org/t/background-change-based-on-music/34794/1 "2022-01-22T22:18:34Z")

</div>

Hey,  
I’ve been desperately searching for a solution. Is there any possibility that the background color changes from white to red, regarding the amplitude as how the circle does from black in this example?

https://openprocessing.org/sketch/1433658/embed/?

Thank you!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 22, 2022, 10:51pm UTC](https://discourse.processing.org/t/background-change-based-on-music/34794/2 "2022-01-22T22:51:55Z")

</div>

Hello,

> [@Alix](#):
>
> Is there any possibility that the background color changes from white to red

Yes!

I was able to do this with:

`colorMode(HSB, 100);`

And I varied the saturation (sat is between 0 and 100) with:  
`color(60, sat, 100); //This is blue`

References:

- [https://p5js.org/](https://p5js.org/)
- [https://p5js.org/reference/#/p5/colorMode](https://p5js.org/reference/#/p5/colorMode)
- [https://p5js.org/reference/#/p5/color](https://p5js.org/reference/#/p5/color)
- [learn | p5.js](https://p5js.org/learn/color.html)

Background changes with amplitude:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/507a15aba83daf9fe014f53679d3cee994507d0c.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Alix](https://avatars.discourse-cdn.com/v4/letter/a/f6c823/32.png) [@Alix](https://discourse.processing.org/u/Alix)\
**Post date:** [January 23, 2022, 12:51pm UTC](https://discourse.processing.org/t/background-change-based-on-music/34794/3 "2022-01-23T12:51:21Z")

</div>

Perfect—worked out 🙂  
Merci!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 23, 2022, 3:56pm UTC](https://discourse.processing.org/t/background-change-based-on-music/34794/4 "2022-01-23T15:56:39Z")

</div>

Hello,

This is also available:  
[https://p5js.org/reference/#/p5/lerpColor](https://p5js.org/reference/#/p5/lerpColor)

There is often more than one way to achieve an outcome.

Another reference (also added to my last post) for this topic:  
[https://p5js.org/learn/color.html](https://p5js.org/learn/color.html)

`:)`