Repository navigation
[p5.js 2.0+ Bug Report]: TRIANGLES Requires Multiples of 3 #9319
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- WebGPU
- p5.strands
- Build process
- Unit testing
- Internationalization
- Friendly errors
- Other (specify if possible)
p5.js version
2.3.4
Web browser and version
No response
Operating system
No response
Steps to reproduce this
Steps:
Creating a custom shape using the beginShape(TRIANGLES) option in v2.0+ requires the number of vertices to be exactly a multiple of 3 or it will hit a runtime error and not draw anything. The error is not a particularly friendly one: TypeError: can't access property "position", v1 is undefined
In p5 V1, extra vertices that could not be wrangled into a triangle (e.g. a shape with 4 vertices) were simply ignored.
I think the V1 method makes a lot more sense, and we should go back to ignoring extra vertices. This would also maintain some continuity for people porting V1 code to V2.
Snippet:
https://editor.p5js.org/lewi0622/sketches/lnZLG0GhN
beginShape(TRIANGLES);
vertex(random(width), random(height));
vertex(random(width), random(height));
vertex(random(width), random(height));
//uncommment fourth vertex to see issue in v2+, not in an issue in v1
// vertex(random(width), random(height));
endShape();
Activity
[-][p5.js 2.0+ Bug Report]:[/-][+][p5.js 2.0+ Bug Report]: TRIANGLES Requires Multiples of 3[/+]MYMISERABLEMIND17 commentedon Oct 22, 2026
Hey! I investigated this issue.
In
src/shape/custom_shapes.js, when vertices are added toTRIANGLES(as well asLINESandQUADS), extra vertices that do not form a complete primitive create a trailing primitive with fewer than the required vertex capacity (e.g. 1 or 2 vertices for a triangle). InPrimitiveToPath2DConverterandPrimitiveToVerticesConverter,visitTriangledestructures[v0, v1, v2] = triangle.verticesand accessesv1.position, which throwsTypeError: Cannot read properties of undefined (reading 'position')when the vertex count is not a multiple of 3. A similar issue occurs inGeometryBuilder.jswhere the loop bound in WebGL mode indexed past the end of the vertex array.I have implemented guards across:
PrimitiveToPath2DConverter(visitLine,visitTriangle,visitQuad): skips incomplete primitives (vertices.length < capacity).PrimitiveToVerticesConverter: guards against pushing incomplete contours.svg_export.js: guards against emitting SVG polygon/line elements for incomplete primitives.GeometryBuilder.js: updated loop boundi < geometry.vertices.length - 2forTRIANGLESin WebGL mode to prevent out-of-bounds vertex index access.test/unit/core/vertex.jscoveringTRIANGLES(1, 2, 4 vertices in 2D and WebGL),LINES(1, 3 vertices), andQUADS(1, 3, 5 vertices).All tests in
test/unit/core/(19/19 in vertex.js, 290/290 core tests),npm run lint(0 errors),npm run test:types, andnpm run buildpass cleanly. The branchfix/triangles-modulo-3-9319is pushed to my fork: https://github.com/MYMISERABLEMIND17/p5.js/tree/fix/triangles-modulo-3-9319Could you please assign this issue to me so I can open the PR? Thanks!