Having trouble with colorMode and WEBGL on OpenProcessing

p5.js Coding Questions
1

I’m trying to build this sketch on openprocessing:

it’s a fork of someone else’s sphere mapping sketch, which uses WEBGL.
i’m trying to apply a lofi text mode filter over the top.

i’ve copied some text mode code that I had working in a different sketch, but that one did not use WEBGL and was not on openprocessing. It sort of works here but I’m having some persistent problems.

  • when i get the colors, i’m trying to resample them to a smaller color space (HSB 2,2,2) - but it seems to ignore my call to colorMode() and just draws colors in true color.
  • when i get the brightness of each sample i’m expecting to get a range of values, so that different samples are assigned different characters, but i’m pulling the same brightness value for each sample and so i’m drawing the same ‘█’ character everywhere… as though every sample has brightness 255. this is upsetting because it is pushing through the colors from the input and I can see that they don’t all have the same brightness
2

It seems like a big part of the problem is that using the copy() function to copy from the main canvas to the buffer is not working. I’m not sure this is supported. I was able to get something working by creating a separate WEBGL buffer with createGraphics. Additionally it is not clear why you are using this color mode at all when you then specified 0 to 255 as the range in your call to map: map(bri,0,255,0,len-1). (Note the values in the pixels array and the color produced by the 'rgb(...)' string will be unaffected by color mode, only the value returned by brightness() will be affected).

Sorry I don’t have time to explain everything I changed, I was mostly just fiddling until it worked:

2 Likes
3

thanks for that
i like the glBuffer, i tried to do that myself but couldnt get it to work with the forked sphere mapping sketch

the brightness thing should be reversed like

const charIndex = round(map(bri, briDepth, 0, 0, len - 1));

that sorts that, ive updated the original sketch to reflect those changes

i still want to quantize the output colors to use the smaller palette, it seems like copy() and image() neither will work with that? i thought i’d used image() elsewhere to do it (edit: not in webgl i guess)