# Having trouble with colorMode and WEBGL on OpenProcessing

**URL:** <https://discourse.processing.org/t/having-trouble-with-colormode-and-webgl-on-openprocessing/35531>\
**Category:** Coding Questions\
**Created:** [March 3, 2022, 7:30am UTC](https://discourse.processing.org/t/having-trouble-with-colormode-and-webgl-on-openprocessing/35531 "2022-03-03T07:30:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![brackish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/brackish/32/15832_2.png) [@brackish](https://discourse.processing.org/u/brackish)\
**Post date:** [March 3, 2022, 7:30am UTC](https://discourse.processing.org/t/having-trouble-with-colormode-and-webgl-on-openprocessing/35531/1 "2022-03-03T07:30:31Z")

</div>

I’m trying to build this sketch on openprocessing:  
https://openprocessing.org/sketch/1503819/embed/?  
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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [March 3, 2022, 10:13am UTC](https://discourse.processing.org/t/having-trouble-with-colormode-and-webgl-on-openprocessing/35531/2 "2022-03-03T10:13:10Z")

</div>

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:

https://openprocessing.org/sketch/1503978/embed/?plusEmbedHash=MmMzOGI3NWI2OWZmZTQzZWFkMWExNjMxNDI0OTYyOGI2NjBjMjdjNGJmZjVlN2U5NWI2NDA4MjI3ZWU2YjZjZjczNGExODM0MWU1MWQ3YThjY2MwNGJmNDFiMzZmY2ZhMTg1MTZjZDU5MGY3ZDliMjY4NDk1YWNkMjBmNmJiODdOMDk5OE5SdGV0ZXNxYUxPdHY0YUxBdWhnbnZwNUhaVE5sejdVWVRUdFZ4TkhUVWJaMmpRMEN0SHR1WjIyNlZITDFlMCtabGFDMXVrdnVtVWF1SGVsZz09&plusEmbedTitle=true

---

<div class="post-metadata">

**Author:** ![brackish](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/brackish/32/15832_2.png) [@brackish](https://discourse.processing.org/u/brackish)\
**Post date:** [March 3, 2022, 12:00pm UTC](https://discourse.processing.org/t/having-trouble-with-colormode-and-webgl-on-openprocessing/35531/3 "2022-03-03T12:00:44Z")

</div>

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)