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

p5.js
1

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 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
Smooth anti-aliasing when using the p5.js editor versus a jagged result in local environment1920×1080 22.6 KB

Here’s the link to the p5.js sketch
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!

2

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 🕵🏻‍♂️

3

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 on Github.

1 Like
4

This is very interesting. Thank you @Misha.studio
Mixbox is also good 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/ provides results for mixing red and green which is obviously nonsense (not real world).

5

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… :thinking: I think you would need to reverse Mixbox or Spectral js functionality :man_shrugging: Interesting question!

6

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

1 Like