# Does changing colorMode affect performance?

**URL:** <https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032>\
**Category:** p5.js\
**Created:** [October 30, 2018, 5:09pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032 "2018-10-30T17:09:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![inersha](https://avatars.discourse-cdn.com/v4/letter/i/c89c15/32.png) [@inersha](https://discourse.processing.org/u/inersha)\
**Post date:** [October 30, 2018, 5:09pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/1 "2018-10-30T17:09:59Z")

</div>

Hello there!

Does changing colorMode() from RGB to HSB affect performance in any way? In other words, does it require more processing power to convert everything back to RGB if you switch to using HSB?

I’ve switched to HSB because I find it easier to programmatically change colours, but I’m worried it may have ever so slightly slowed down the speed of my sketch. It could certainly be a number of other things, but I just wanted to rule out that switching to HSB might have had a negative impact on the performance of my sketch.

Thanks in advance!

**EDIT:**

Here is a performance comparison between **RGB** and **HSB** color modes. Please let me know if you notice one performing worse than the other!

[http://bitcoinrain.io/testing/rgb.html](http://bitcoinrain.io/testing/rgb.html)  
[http://bitcoinrain.io/testing/hsb.html](http://bitcoinrain.io/testing/hsb.html)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [October 30, 2018, 5:32pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/2 "2018-10-30T17:32:58Z")

</div>

I don’t know off the top of my head, but the best way to answer questions like this is to just try it out.

What happens when you create a simple sketch that shows one million colored circles? Do you notice a performance difference between color modes?

I’d be curious about the answer myself, so please report back with what you find!

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [October 30, 2018, 6:32pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/3 "2018-10-30T18:32:20Z")

</div>

Since the image is stored in RGB format then the HSB values must be converted to RGB first so I would think that performance will be slightly reduced, but as Kevin suggested try it.

> [@inersha](#):
>
> but I’m worried it may have ever so slightly slowed down the speed of my sketch

Did you start with using RGB and then switch to HSB? If not how would you notice the difference?

If the sketch is performing OK then why worry?

---

<div class="post-metadata">

**Author:** ![inersha](https://avatars.discourse-cdn.com/v4/letter/i/c89c15/32.png) [@inersha](https://discourse.processing.org/u/inersha)\
**Post date:** [October 31, 2018, 3:50pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/4 "2018-10-31T15:50:49Z")

</div>

> I’d be curious about the answer myself, so please report back with what you find!

Thanks Kevin, I’ve given it a try. Here is my comparison:

[http://bitcoinrain.io/testing/rgb.html](http://bitcoinrain.io/testing/rgb.html)  
[http://bitcoinrain.io/testing/hsb.html](http://bitcoinrain.io/testing/hsb.html)

Is it me, or does it appear as though the **RGB version performs _ever so slightly_ better** than the HSB version?

> Since the image is stored in RGB format then the HSB values must be converted to RGB first so I would think that performance will be slightly reduced, but as Kevin suggested try it.

Thanks, I was curious if this was the case.

And yes, I switched to HSB and felt like I noticed a difference, but wasn’t sure if it was due to my laptop using up resources elsewhere at the time or something.

The performance is still OK, but I was sad to feel that I lost the silky-smooth animation that I had with RGB because I switched to a color mode that I find easier to work with.

Out of curiosity, do you notice any difference between the RGB and HSB versions above?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 31, 2018, 4:07pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/5 "2018-10-31T16:07:03Z")

</div>

Too really benchmark it, I would not perform the test like this. You can’t just see with your eyes because the difference won’t be that big plus I think Processing cap the framerate at 60 fps so it won’t be enough anyway to see the effect.

Instead, just use a for loop that draw a rectangle with a color over and over until you’ve reach 1 million rectangle (for example). Get the time before the for loop, the time after the for loop, do the difference and compare both of the color mode.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [October 31, 2018, 4:10pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/6 "2018-10-31T16:10:12Z")

</div>

It looks like you’re calculating the color once when creating the particles, so I think it should not have any effect, or? (except for a possible tiny initial delay)

It would be different if you would be calculating a new color for each particle on every frame. In that case, if it was harder to calculate an HSB color than an RGB color, you might see a difference.

But based on this [https://editor.p5js.org/abe/sketches/H1l2zLD2X](https://editor.p5js.org/abe/sketches/H1l2zLD2X) it doesn’t seem to have much effect.

But @jb4x is right. To really test it, maybe don’t even draw anything? Then you can measure how much time it takes to calculate billions of RGB or HSB colors, without any other elements interfering the measurement.

---

<div class="post-metadata">

**Author:** ![inersha](https://avatars.discourse-cdn.com/v4/letter/i/c89c15/32.png) [@inersha](https://discourse.processing.org/u/inersha)\
**Post date:** [October 31, 2018, 4:30pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/7 "2018-10-31T16:30:58Z")

</div>

Thanks everyone, it seems as though the difference is negligible at worst.

Moving on from this, where would you say is the best place to start for trying to analyze/pinpoint which parts of my code are affecting the performance of my sketch the most?

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 31, 2018, 4:45pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/8 "2018-10-31T16:45:39Z")

</div>

You can use the [millis()](https://processing.org/reference/millis_.html) function, and put it in specific places in your code to be able to get the time some parts of your code are taken.

For small project it can be done the dirty way but for bigger project you might want to build a custom class so you can easily tag time that you measure and then display the result by tag in the shape of a table.

There is probably some library that already exists.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 31, 2018, 4:58pm UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/9 "2018-10-31T16:58:56Z")

</div>

Every time we invoke functions such as **color()**, **background()**, **fill()**, **stroke()**, a new p5.Color is instantiated, unless we pass to them an already existing p5.Color instance as their argument. 🧐

Dunno whether changing **colorMode()** can affect the performance of instantiating a p5.Color. 🤷‍♂️

But if we cache p5.Color instances created by **color()** as our custom palette, and reuse them for the other color changing functions, we’ll avert the whole color conversion stuff, w/ added bonus of less work for JS’ GC: 💡

[OpenProcessing.org/sketch/602737](http://OpenProcessing.org/sketch/602737)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 1, 2018, 9:47am UTC](https://discourse.processing.org/t/does-changing-colormode-affect-performance/5032/10 "2018-11-01T09:47:13Z")

</div>

## Optimizing-p5.js-Code-for-Performance

> **[processing/p5.js](https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...