[p5.js 2.0 Beta Bug Report]: HSB colors ending up black

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0 beta 6

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

These pages on the beta site use fill() with colors created in HSB mode:

• https://beta.p5js.org/examples/listing-data-with-arrays-random-poetry/
• https://beta.p5js.org/examples/angles-and-motion-triangle-strip/

On 1.x, these have colors, and we would expect this behaviour to continue in 2.x:

• https://p5js.org/examples/listing-data-with-arrays-random-poetry/
• https://p5js.org/examples/angles-and-motion-triangle-strip/

[davepagurek]

Some more debugging: it seems that this is an issue in colorjs's serialize() not working with our custom HSB color space. @limzykenneth anything look off to you about that implementation that might be the culprit?

[limzykenneth]

I'm not acutally using the custom HSB color space as the color.js HSV color space is equivalent so I'm using that instead. The problem might be that HSV color which it will be serialized to is not natively supported as CSS string. I'll look into a possible solution for this.

[davepagurek]

oh should it be using HSV? When I put a breakpoint in the toString() call in fill(), it looks like it's using HSB, is that a bug?

[limzykenneth]

What is the output of toString()?

[davepagurek]

It's getting set to rgb(0% 0% 0%) currently

[limzykenneth]

I'll have a look tomorrow.

[limzykenneth]

@davepagurek I just had a test and from what I can see, HSB color is working correctly, in that it returns an rgb string of the created color in HSB. I think the issue here is with begin/endShape() and how they read the renderer fill state color value. To test I replace the last bit of the triangle strip example between beginShape and endShape with:

fill(270, 100, 100);
ellipse(width/2, height/2, 100);

and I see a purple circle at the center of the canvas.

[limzykenneth]

@davepagurek Did you perhaps fix this yesterday or at some point after beta 6 because I can't replicate issue with the random poetry example with latest dev-2.0

[davepagurek]

I added some clamping to the inputs to color() since @ksen0 noticed that some sketches would pass in values over the max, and this would max out the colors to be just black or just white. Maybe that was going on in the poetry sketch?

[davepagurek]

For the triangle strip one, it works in WebGL:

I think this is because we used to draw each triangle in the strip separately in 2D, and now draw all primitives as one path for performance. We could possibly try to overhaul the rendering to support this case, but I actually assumed this was WebGL before because I think we never officially documented that per-vertex fills would work in 2D (I believe in 1.x it doesnt for all the other beginShape modes), so we could also say that this is already in undefined behaviour territory? And just update this example to use WebGL?

[limzykenneth]

Yeah I think clamping probably fixed it and probably should be done for this case.

I think it would be nice to support per vertex fill in 2D as well if at all possible. We don't have to implement it now if it can be considered undocumented feature, and implement it later as a feature enhancement.

[davepagurek]

Cool, I think we're safe to close this issue then, and I'll make a new one for per-polygon fills in 2D as a feature enhancement.

[davepagurek]

New issue: #7722