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.

[LalitNarayanYadav]

Thanks again, @limzykenneth! I Got it; I’ll start fresh from the dev-2.0 branch and study the updated shape and vertex implementation before attempting the feature there.

If there’s any documentation or reference you’d recommend for understanding the new 2.0 internals, especially around beginShape() and endShape()—I’d really appreciate the help.

Looking forward to contributing to the 2.0 effort!

[GregStanton]

Hi @LalitNarayanYadav! Thanks so much for offering to help. This comment provides an overall idea of the new code structure for custom shapes, which mostly lives in src/shape/custom_shapes.js in the dev-2.0 branch.

However, a cleanup phase is currently in progress for custom shapes. In this draft PR, I've already started by moving the contents of vertex.js into custom_shapes.js and deleting vertex.js.

Do you think you might be interested in working on this issue after the cleanup is finished? One of the reasons for the original refactor was to make this area of the codebase easier to understand. If you'd be interested in working on this issue after the cleanup, it'd be a great test of whether or not we succeeded in that regard.

If that sounds okay to you (and everyone else), I could ping you once the cleanup is complete. Just let me know if you'd like me to do that, or if you have any other questions. If anyone has a different idea of how to proceed, I'm open to suggestions.

[LalitNarayanYadav]

Hi @GregStanton , thank you for the update and the helpful context!

Yes, I’d definitely be interested in working on this issue after the cleanup is complete. It sounds like a great opportunity to get familiar with the new structure and contribute meaningfully to the 2.0 branch. Please do ping me once the cleanup wraps up—I'll be happy to dive in then.

Looking forward to it!