Per-polygon fills in 2D mode

[davepagurek]

Increasing access

This is a thing in WebGL so getting as close to this as possible in 2D can help with consistency.

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)

Feature enhancement details

In 2D mode, a limitation of the base canvas API is that every shape drawn can only have one color.

While we advertised one color per shape in 2D mode, in 1.x, some of the shape modes used to draw multiple shapes under the hood, including TRIANGLE_STRIP. Our initial shape implementation for 2.0 assumes that every shape in 2D mode is just one color, but we could in theory put this back for TRIANGLES, TRIANGLE_STRIP, QUAD_STRIP, and QUADS modes. (Unlike WebGL, it will not interpolate between vertices, but we can still change color per polygon.) We likely will want to continue to render the full thing as one shape for performance if the color does not change.

[LalitNarayanYadav]

Hi @davepagurek
I’ve submitted a PR that implements per-polygon fills in 2D mode as discussed in #7722.
It updates shape modes like TRIANGLES, TRIANGLE_STRIP, QUADS, etc., to apply fill and stroke based on the last vertex of each polygon.

Could you please take a look when you get a chance? I'd really appreciate your feedback!

[limzykenneth]

Thanks @LalitNarayanYadav. Your PR is filed against the main branch which is currently the source code for the 1.x version of p5.js, however this issue applies to the dev-2.0 branch or the 2.0 version of p5.js. It might be a bit confusing as we didn't clearly indicate in the issue enough.

In 1.x this feature already works, so we don't need an implementation/PR for the main branch. We need an implementation for 2.0 where there are major changes in the internals of beginShape() endShape() hence the need for a new implementation.

I hope that made sense.

[LalitNarayanYadav]

Thanks for the clarification, @limzykenneth! That makes sense now—I misunderstood the target branch for this feature.

Would you recommend that I rebase and submit the PR against the dev-2.0 branch instead? If there are any specific guidelines or differences I should be aware of when implementing this in 2.0, I’d really appreciate any pointers.

Looking forward to your feedback!

[limzykenneth]

The main branch and the dev-2.0 branch have diverge significantly especially in the vertex section that this issue relates to, which means rebase is not recommended. Starting from the dev-2.0 branch implementation from scratch is needed here.

The implementation is potentially very different in dev-2.0 so you may want to study that implementation first before trying to implement solution to this issue.