Mixing vertex() with curveVertex() in beginContour() breaks in 2D mode #6555
Description
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
1.8.0
Web browser and version
Firefox 117
Operating System
macOS 14.0
Steps to reproduce this
Steps:
In beginShape:
- Create an outline using regular
vertex - Create a contour using
curveVertex
Expected (works in WebGL mode):
Actual results in 2D mode:
It looks like 2D mode is combining all the vertices into one big path.
Snippet:
Broken 2D mode code: (live)
function setup() {
createCanvas(200, 200);
background(200);
translate(width/2-50,height/2-50);
beginShape();
vertex(0, 0);
vertex(100, 0);
vertex(100, 100);
vertex(0, 100);
vertex(0, 0);
beginContour();
curveVertex(84, 91);
curveVertex(84, 91);
curveVertex(68, 19);
curveVertex(21, 17);
curveVertex(32, 91);
curveVertex(32, 91);
endContour();
endShape();
point(84, 91);
point(68, 19);
point(21, 17);
point(32, 91);
}Working WebGL code: (live)
function setup() {
createCanvas(200, 200, WEBGL);
background(200);
translate(-50, -50);
beginShape();
vertex(0, 0);
vertex(100, 0);
vertex(100, 100);
vertex(0, 100);
vertex(0, 0);
beginContour();
curveVertex(84, 91);
curveVertex(84, 91);
curveVertex(68, 19);
curveVertex(21, 17);
curveVertex(32, 91);
curveVertex(32, 91);
endContour();
endShape();
point(84, 91);
point(68, 19);
point(21, 17);
point(32, 91);
}