WebGL stroke color interpolation breaks strokes when using QUADS or retained geometry

[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
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

main branch

Web browser and version

Firefox 108.0

Operating System

MacOS 12.5.1

Steps to reproduce this

We recently added stroke color interpolation in #5915 to match how fill interpolation works. However, it currently doesn't support:

• geometry that doesn't have any vertex colors supplied (e.g. spheres), which previously defaulted to the currently set stroke
• immediate mode shapes that automatically repeat vertices for you (TRIANGLE/QUAD_STRIP, QUADS, TRIANGLE_FAN, etc)

For the code below, both shapes should have solid black strokes:

Code	Output
function setup() { createCanvas(400, 400, WEBGL) } function draw() { push() background(255) stroke(0) fill(200) push() translate(-100, 0) sphere(50) pop() push() translate(100, 0) beginShape(QUADS) vertex(-20, -20) vertex(-20, 20) vertex(20, -20) vertex(20, 20) endShape(CLOSE) pop() }