p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

beginShape(POINTS) doesn't use stroke() per vertex()

Open ffd8 opened this issue 7 months ago • 2 comments

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:

  1. Create a complex shape with beginShape(POINTS) ... endShape()
  2. Set custom stroke() before each vertex() coordinate
  3. POINTS doesn't apply custom stroke(), however LINES, TESS, TRIANGLES does

Snippet:

Here's an example.

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): Image

beginShape(LINES): Image

beginShape(): Image

ffd8 avatar May 22 '25 22:05 ffd8

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...

ffd8 avatar May 22 '25 22:05 ffd8

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.)

davepagurek avatar May 23 '25 11:05 davepagurek