P5.js: webgl: fill does not respect HSB mode

[jcelerier]

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [x] Color
• [x] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Friendly error system
• [ ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [ ] Other (specify if possible)

Details about the bug:

Given:

function setup() {
  createCanvas(400, 400, WEBGL);
  background(0);
  colorMode(HSB, 100);
}

function draw() {
  lights();

  fill(frameCount % 100, 100, 100);
  stroke(frameCount % 100, 100, 100);

  sphere(100);
}

the stroke color correctly goes through all hues, but the fill color goes from black to red as if it was still in RGB.

Here is a repro: https://editor.p5js.org/jcelerier/sketches/O3_5dOXA1
Tested on latest edge and chrome on windows.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[KKVANONYMOUS]

@jcelerier I guess the lights() method creates the illusion that fill is not responding to HSB mode
If you use the following piece of code, you can see the difference.

function setup() {
  createCanvas(400, 400, WEBGL);
  background(0);
  colorMode(HSB,100);
}

function draw() {
  // lights();

  fill(frameCount % 100, 100, 100);
  stroke(100, frameCount % 100, 100);

  sphere(100);
}

Note that I have intentionally changed the stroke method. Otherwise, we would not be able to differentiate between fill and stroke methods.

[jcelerier]

But what if one wants to use lights() ? e.g. given

function setup() {
  createCanvas(400, 400, WEBGL);
  background(0);
  colorMode(HSB,100);
}

function draw() {
  lights();
  noStroke();

  fill(frameCount % 100, 100, 100);

  sphere(100);
}

I'd expect the color of the sphere to cycle through the hues, not to go from black to red

[stalgiag]

Thanks for the issue @jcelerier ! I think this is due to the fact that lights() is then also using HSB. The functions lights() calls :

ambientLight(128, 128, 128);
directionalLight(128, 128, 128, 0, 0, -1);

which produces the red to black in the example you posted because 128 is a very bright red with colorMode(HSB, 100). A fix for this in the library would be to reset the color mode to default before calling the functions in lights() or calling different functions depending on the color mode. In the short term, you can just call your light functions separately without using the lights() function. For example, this produces the desired results:

function setup() {
  createCanvas(400, 400, WEBGL);
  background(0);
  colorMode(HSB,100);
}

function draw() {
  noStroke();
  ambientLight(100, 0, 50);
  directionalLight(100, 0, 50, 0, 0, -1);
  fill(frameCount % 100, 100, 100);
  sphere(100);
}

[vulongphan]

@stalgiag Could I take on this issue?