# Color mixing shader produces different results in p5.js editor versus local environment

**URL:** <https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133>\
**Category:** p5.js\
**Created:** [June 3, 2023, 7:28pm UTC](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133 "2023-06-03T19:28:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Misha.studio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/misha.studio/32/16056_2.png) [@Misha.studio](https://discourse.processing.org/u/Misha.studio)\
**Post date:** [June 3, 2023, 7:28pm UTC](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133/1 "2023-06-03T19:28:27Z")

</div>

Hi there! I’m working on a project where I’m exploring pigment color mixing using spectral.js. To improve my code I created a [sketch](https://editor.p5js.org/Misha.studio/sketches/tc1g8jhMr) with a color mix shader using the p5.js editor. When I got the shader working it was time to add this functionality to my local project. I soon saw that the implemented code didn’t produce the same smooth anti-aliased result as in the p5.js editor. My first thought was that I didn’t implemented it right but after a lot of debugging I decided to copy/paste the code from the p5.js editor and run it locally - and the same thing happened. A not so smooth anti-aliased result when running locally versus a smoother result running in the p5.js editor. See image below for a zoomed-in side-by-side comparison:

 ![Smooth anti-aliasing when using the p5.js editor versus a jagged result in local environment](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/0/10a84c8907b20c6d920ebc1011955b26889df330.png)

Here’s the link to the p5.js sketch  
[https://editor.p5js.org/Misha.studio/sketches/tc1g8jhMr](https://editor.p5js.org/Misha.studio/sketches/tc1g8jhMr)

**Could somebody run this sketch locally to see if they get the same different results or to check if I’m missing something?**

Btw: I’m on a Mac and run my code in Chrome or Safari (same results)

Thanks!

---

<div class="post-metadata">

**Author:** ![Misha.studio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/misha.studio/32/16056_2.png) [@Misha.studio](https://discourse.processing.org/u/Misha.studio)\
**Post date:** [June 5, 2023, 6:49am UTC](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133/2 "2023-06-05T06:49:15Z")

</div>

I just saw the download feature in p5.js editor and tried to run that version locally with clean results. It seems I’m still doing something wrong in my project setup. Will investigate further 🕵🏻‍♂️

---

<div class="post-metadata">

**Author:** ![Misha.studio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/misha.studio/32/16056_2.png) [@Misha.studio](https://discourse.processing.org/u/Misha.studio)\
**Post date:** [June 5, 2023, 3:01pm UTC](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133/3 "2023-06-05T15:01:30Z")

</div>

Alright. I think I got the culprit. It appears the p5.js online editor is using p5.js version 1.4.1 which produces the right result. The latest p5.js library is version 1.6.0 which produces different anti-aliasing for some reason. Posted an [issue](https://github.com/processing/p5.js/issues/6182) on Github.

---

<div class="post-metadata">

**Author:** ![paulstgeorge](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@paulstgeorge](https://discourse.processing.org/u/paulstgeorge)\
**Post date:** [June 9, 2023, 2:18pm UTC](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133/4 "2023-06-09T14:18:06Z")

</div>

This is very interesting. Thank you @Misha.studio  
Mixbox is also good [https://scrtwpns.com/mixbox/](https://scrtwpns.com/mixbox/).

BUT BUT  
Isn’t it the case that artists want to know how to mix a target colour from given available colours (rather than what colour will result from mixing two or more ‘pigments’)?

Do you think this is possible in Processing?

Also, spectral.js [https://onedayofcrypto.art/](https://onedayofcrypto.art/) provides results for mixing red and green which is obviously nonsense (not real world).

---

<div class="post-metadata">

**Author:** ![Misha.studio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/misha.studio/32/16056_2.png) [@Misha.studio](https://discourse.processing.org/u/Misha.studio)\
**Post date:** [June 12, 2023, 6:13am UTC](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133/5 "2023-06-12T06:13:31Z")

</div>

Hi Paul, to answer your BUT BUT - In generative design I think it can also be the other way around, let the system try all kinds of mixing based on rules you develop.

To turn it around and see which pigments are used for a color… 🤔 I think you would need to reverse Mixbox or Spectral js functionality 🤷‍♂️ Interesting question!

---

<div class="post-metadata">

**Author:** ![paulstgeorge](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@paulstgeorge](https://discourse.processing.org/u/paulstgeorge)\
**Post date:** [June 12, 2023, 7:37am UTC](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133/6 "2023-06-12T07:37:27Z")

</div>

I think you could mix to a target colour without touching Mixbox or Spectral, but my way is probably not the best or the most efficient. Starting with a method for approximate equality\*\*, you input the target colour and the pigments you want to mix, then do a trial mix with Mixbox. Is it close enough: no: change the ratio. Is it close enough: yes: break.

\*\* an interesting side project…  
e = tolerable difference  
are two numbers close?  
get the difference between the two numbers  
if the difference is no more than [e] then the two numbers are close enough