beginShape(POINTS) doesn't use stroke() per vertex()
Most appropriate sub-area of p5.js?
- [ ] Accessibility
- [x] Color
- [ ] Core/Environment/Rendering
- [ ] Data
- [ ] DOM
- [ ] Events
- [ ] Image
- [ ] IO
- [ ] Math
- [ ] Typography
- [ ] Utilities
- [x] WebGL
- [ ] Build process
- [ ] Unit testing
- [ ] Internationalization
- [ ] Friendly errors
- [ ] Other (specify if possible)
p5.js version
1.11.7
Web browser and version
Chrome
Operating system
MacOS
Steps to reproduce this
Steps:
- Create a complex shape with
beginShape(POINTS)...endShape() - Set custom
stroke()before eachvertex()coordinate POINTSdoesn't apply customstroke(), howeverLINES,TESS,TRIANGLESdoes
Snippet:
noFill()
// *** remove/replace POINTS and works as expected
beginShape(POINTS) // LINES or TRIANGLES or empty works fine
for(let i=0; i < 50; i++){
stroke(random(255), random(255), random(255))
vertex(random(-width/2, width/2), random(-width/2, width/2), random(-width/2, width/2))
}
endShape()
Maybe it's a newer feature that it does the color lerping between the stroke/vertex changes?? Looks great! Would just be nice if POINTS mode also reflected the specific stroke() given.
beginShape(POINTS):
beginShape(LINES):
beginShape():
Figured out a hacky solution of drawing with beginShape(LINES) and adding an extra vertex that's just a slight offset... but shouldn't be necessary and there must be an issue with POINTS mode...
I think this is happening because while regular meshes take in a per-vertex color in their shader and pass it along, the point shader does not. Updating the point shader to do the same could resolve this issue.
(Also, while maybe not the quickest solution, another approach could be to try to remove the separate point shader and try to turn points into lines so that they use the same system.)