splineProperty()

Gets or sets a given spline property.

Use splineProperty() to adjust the behavior of splines created with splineVertex() or spline(). You can control two key aspects of a spline: its end behavior (ends) and its curvature (tightness).

By default, the ends property is set to INCLUDE, which means the spline passes through every point, including the endpoints. You can also set it to EXCLUDE i.e. splineProperty('ends', EXCLUDE), which makes the spline pass through all points except the endpoints.

INCLUDE case will have the spline passing through all points, like this:

splineProperty('ends', INCLUDE); // no need to set this, as it is the default
spline(25, 46, 93, 44, 93, 81, 35, 85);

point(25, 46);
point(93, 44);
point(93, 81);
point(35, 85);

EXCLUDE case will have the spline passing through the middle points, like this:

splineProperty('ends', INCLUDE);
spline(25, 46, 93, 44, 93, 81, 35, 85);

point(25, 46);
point(93, 44);
point(93, 81);
point(35, 85);

By default, the tightness property is set to 0, producing a smooth curve that passes evenly through the vertices. Negative values make the curve looser, while positive values make it tighter. Common values range between -1 and 1, though values outside this range can also be used for different effects.

For example, To set tightness, use splineProperty('tightness', t), (default: t = 0).

Here's the example showing negetive value of tightness, which creates a rounder bulge:

splineProperty('tightness', -5)
stroke(0);
strokeWeight(2);
spline(25, 46, 93, 44, 93, 81, 35, 85);

Here's the example showing positive value of tightness, which makes the curve tighter and more angular:

splineProperty('tightness', 5)
stroke(0);
strokeWeight(2);
spline(25, 46, 93, 44, 93, 81, 35, 85);

In all cases, the splines in p5.js are cardinal splines. When tightness is 0, these splines are often known as Catmull-Rom splines