splineVertex()

Connects points with a smooth curve (a spline).

splineVertex() adds a curved segment to custom shapes. The curve it creates follows the same rules as the ones made with the spline() function. splineVertex() 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. splineVertex() draws a smooth curve through the points you give it. beginShape() and endShape() in order to draw a curve:

If you provide three points, the spline will pass through them. It works the same way with any number of points.

beginShape();

// Add the first point.
splineVertex(25, 80);

// Add the second point.
splineVertex(20, 30);

// Add the last point.
splineVertex(85, 60);

endShape();

Passing in CLOSE to endShape() closes the spline smoothly.

beginShape();

// Add the first point.
splineVertex(25, 80);

// Add the second point.
splineVertex(20, 30);

// Add the second point.
splineVertex(85, 60);

endShape(CLOSE);

By default (ends: INCLUDE), the curve passes through all the points you add with splineVertex(), similar to the spline() function. To draw only the middle span p1->p2 (skipping p0->p1 and p2->p3), set splineProperty('ends', EXCLUDE). You don’t need to duplicate vertices to draw those spans.

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

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