curveVertex()

Adds a spline curve segment to a custom shape.

curveVertex() adds a curved segment to custom shapes. The spline curves it creates are defined like those made by the curve() function. curveVertex() must be called between the beginShape() and endShape() functions.

Spline curves can form shapes and curves that slope gently. They’re like cables that are attached to a set of points. Splines are defined by two anchor points and two control points. curveVertex() must be called at least four times between beginShape() and endShape() in order to draw a curve:

beginShape();

// Add the first control point.
curveVertex(84, 91);

// Add the anchor points to draw between.
curveVertex(68, 19);
curveVertex(21, 17);

// Add the second control point.
curveVertex(32, 91);

endShape();

The code snippet above would only draw the curve between the anchor points, similar to the curve() function. The segments between the control and anchor points can be drawn by calling curveVertex() with the coordinates of the control points:

beginShape();

// Add the first control point and draw a segment to it.
curveVertex(84, 91);
curveVertex(84, 91);

// Add the anchor points to draw between.
curveVertex(68, 19);
curveVertex(21, 17);

// Add the second control point.
curveVertex(32, 91);

// Uncomment the next line to draw the segment to the second control point.
// curveVertex(32, 91);

endShape();

The first two parameters, x and y, set the vertex’s location. For example, calling curveVertex(10, 10) adds a point to the curve at (10, 10).

Spline curves can also be drawn in 3D using WebGL mode. The 3D version of curveVertex() has three arguments because each point has x-, y-, and z-coordinates. By default, the vertex’s z-coordinate is set to 0.

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