Per-polygon fills in 2D mode

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.

Start by tracing p5.js 2D rendering for TRIANGLES, TRIANGLE_STRIP, QUAD_STRIP, and QUADS modes, comparing it with the existing WebGL behavior described in the issue. Determine how per-polygon colors should work while preserving single-shape rendering when colors do not change. Done means these modes support distinct colors per polygon in 2D without requiring WebGL interpolation.