P5 js V 2.0.5 bezierVertex error

code in online editor

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.

1 Like

pls just compare
switching the p5.js version back to

p5.js V1 xx
and it works

So it did :grin:

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

1 Like

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()
}

Live: Clumsy expert by davepagurek -p5.js Web Editor

3 Likes

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 )

that is the shape i was looking for:

online editor bezier shape

thanks again for your help.

Cool! Making some sankey diagrams?

1 Like

how you know?