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

p5 v2 API: Implement `splineVertex`

Open quinton-ashley opened this issue 7 months ago • 2 comments

splineVertex in p5.js v2 is the new way to draw curves. It seems unnecessary to turn this into a breaking change by removing curveVertex. In q5 I think it'd be nice to have both for backwards compatibility. Here's the info from p5.js v2 beta 2 release:

We've renamed curveVertex to splineVertex and have given it more options. By default, it will now go through every splineVertex, so you no longer have to double up the first/last point to get it to go through it:

beginShape();
curveVertex(10, 10);
curveVertex(10, 10);
curveVertex(15, 40);
curveVertex(40, 35);
curveVertex(25, 15);
curveVertex(15, 25);
curveVertex(15, 25);
endShape();
beginShape();

splineVertex(10, 10);
splineVertex(15, 40);
splineVertex(40, 35);
splineVertex(25, 15);
splineVertex(15, 25);

endShape();

Similarly, endShape(CLOSE) (or endContour(CLOSE) if you're in a contour) will cause a spline to smoothly loop back on itself so you no longer need to double up any points:

beginShape();
curveVertex(15, 25);
curveVertex(10, 10);
curveVertex(15, 40);
curveVertex(40, 35);
curveVertex(25, 15);
curveVertex(15, 25);
curveVertex(10, 10);
curveVertex(15, 40);
endShape();
beginShape();

splineVertex(10, 10);
splineVertex(15, 40);
splineVertex(40, 35);
splineVertex(25, 15);
splineVertex(15, 25);


endShape(CLOSE);

quinton-ashley avatar Mar 18 '25 14:03 quinton-ashley