Welcome to the forum.
The error message states
Expected at most 5 arguments, but received more in bezierVertex(). For more information,
and you had six arguments. The reference shows that this function expects any where from 2 to 5 parameters.
pls just compare
switching the p5.js version back to
p5.js V1 xx
and it works
So it did
V2 has introduced some breaking changes.
It looks to me that in V1 bezierVertex can accept multiple points hence in your example 3 points (6 arguments), in V2 it can only accept 1 point. So it you change the code
to
beginShape(); // ________________________ Start drawing the shape.
vertex(30, 20); // ______________________ Add the first anchor point.
bezierVertex(80, 0); // _ Add the Bézier vertex.
bezierVertex(80, 75); // _ Add the Bézier vertex.
bezierVertex(30, 75); // _ Add the Bézier vertex.
endShape(); // __________________________ Stop drawing the shape.
It will work in V2
the new code style and documentation completely ignores the difference between
anchor points and ?control points?
bezierVertex(80, 0); // ___ control point ( angle adjust )
bezierVertex(80, 75); // __ control point ( angle adjust )
I have rarely if ever used the bezier???(...)
functions and the documentation for bezierVertex
for V2 is as clear as mud so I can’t comment further.
There is no real difference between them. A Bezier curve can be made with any number of control points ≥3
The curve will pass through the first and last point (traditionally called anchor points) but not the intermediate points (traditionally called control points) as these simply control the path of the curve .
The best known curve is the cubic Bezier with 4 points and is of order 3 (order = nbrPoints -1) and along with the quadratic Bezier (3 points, order 2) and are the ones most commonly used in computer graphics.
There is no upper limit to the order of a Bezier curve but the effort to calculate the curves path / shape increases rapidly with the order.
Just to add on to what @quark has already explained: the other benefit of breaking up points into multiple calls is that you can change other p5 state in between calls! e.g. changing the stroke color:
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(0);
translate(-width/2, -height/2)
noFill()
strokeWeight(8)
beginShape()
stroke('red')
bezierVertex(20, 20)
stroke('yellow')
bezierVertex(280, 20)
stroke('lime')
bezierVertex(280, 280)
stroke('cyan')
bezierVertex(20, 280)
endShape()
}
thanks, that seems to be a impressive WEBGL feature,
( so not work in my example, only the last selected color is used for the line between the 2 anchor points )
Cool! Making some sankey diagrams?