Reference bezierVertex()

bezierVertex()

Adds a Bézier curve segment to a custom shape.

bezierVertex() adds a curved segment to custom shapes. The Bézier curves it creates are defined like those made by the bezier() function. bezierVertex() must be called between the beginShape() and endShape() functions. The curved segment uses the previous vertex as the first anchor point, so there must be at least one call to vertex() before bezierVertex() can be used.

The first four parameters, x2, y2, x3, and y3, set the curve’s two control points. The control points "pull" the curve towards them.

The fifth and sixth parameters, x4, and y4, set the last anchor point. The last anchor point is where the curve ends.

Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of bezierVertex() has eight arguments because each point has x-, y-, and z-coordinates.

Note: bezierVertex() won’t work when an argument is passed to beginShape().

Examples

Syntax

bezierVertex(x2, y2, x3, y3, x4, y4)
bezierVertex(x2, y2, z2, x3, y3, z3, x4, y4, z4)

Parameters

x2
Number:

x-coordinate of the first control point.

y2
Number:

y-coordinate of the first control point.

x3
Number:

x-coordinate of the second control point.

y3
Number:

y-coordinate of the second control point.

x4
Number:

x-coordinate of the anchor point.

y4
Number:

y-coordinate of the anchor point.

z2
Number:

z-coordinate of the first control point.

z3
Number:

z-coordinate of the second control point.

z4
Number:

z-coordinate of the anchor point.

Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/vertex.js and open a pull request!

Related References