3D Mode(WEBGL) Changes the colors of mysketch

p5.js Coding Questions
1

Hi, I just changed a 2d sketch to be 3D with the WEBGL option.

I wanted to shift perpective, and that works perfectly, but somehow the colors are now different.

Im guessing now its using some kind of 3d lamp, but i want to keep my shadeless colors. is there a way to keep my colors as in my 2d sketch?

Thanks:

Here is the 2d sketch:

And here is the 3d one:

1 Like
2

Interesting discovery! I has to do with opacity, and this is a minimum example showing the issue:

function setup() {
  createCanvas(100, 100, WEBGL);
  background("#140c28")
  fill("rgba(250, 64, 24, 0.5)")
  ellipse(50, 50, 80, 80);
}

The colors are different with/without WEBGL.

1 Like
3

hi Hamoid! So… Is it a bug? I mean a certain color should be rendered equally both in 3d and 2d right? And is there a way to get the colors I want? thanks! :slight_smile:

4

I think it may be a bug. If you were only using transparency to achieve different darknesses (and you don’t actually need transparency) you could use something like

`hsl(20, 50%, ${random(20,50)}%)`

instead of rgba(), right?

1 Like
5

Yeah you are right… ill just use another color instead of opacity … will also make it faster probanby.

thanks!

6

I just ran into this same problem, trying to draw transparent black rects over a shader graphic. It doesn’t look black it looks gray :frowning: where would I look to fix this?

In the meantime I’ve had to resort to creating a black transparent png and drawing that instead of a rect…not ideal.