p5 2.0.4 → 2.0.5

package/types/p5.d.ts

@@ -3456,7 +3456,7 @@ declare class p5 {
    * Draws a Bézier curve.Bézier curves can form shapes and curves that slope gently. They're defined
    * by two anchor points and two control points. Bézier curves provide more
    * control than the spline curves created with the
-   * curve() function.The first two parameters, `x1` and `y1`, set the first anchor point. The
+   * spline() function.The first two parameters, `x1` and `y1`, set the first anchor point. The
    * first anchor point is where the curve starts.The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two control
    * points. The control points "pull" the curve towards them.The seventh and eighth 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
@@ -3519,13 +3519,11 @@ declare class p5 {
 
   /**
    * Draws a curve using a Catmull-Rom spline.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.The first two parameters, `x1` and `y1`, set the first control point. This
-   * point isn’t drawn and can be thought of as the curve’s starting point.The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two anchor
-   * points. The anchor points are the start and end points of the curve’s
-   * visible segment.The seventh and eighth parameters, `x4` and `y4`, set the last control
-   * point. This point isn’t drawn and can be thought of as the curve’s ending
-   * point.Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
+   * cables that are attached to a set of points. By default (`ends: INCLUDE`),
+   * the curve passes through all four points you provide, in order
+   * `p0(x1,y1)` -> `p1(x2,y2)` -> `p2(x3,y3)` -> `p3(x4,y4)`. Think of them as
+   * points on a curve. If you switch to `ends: EXCLUDE`, p0 and p3 act
+   * like control points and only the middle span `p1->p2` is drawn.Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
    * `spline()` has twelve arguments because each point has x-, y-, and
    * z-coordinates.
  *
@@ -3543,15 +3541,15 @@ declare class p5 {
   spline(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number): void;
 
   /**
-   * Calculates coordinates along a spline curve using interpolation.`splinePoint()` calculates coordinates along a spline curve using the
-   * anchor and control points. It expects points in the same order as the
+   * Calculates coordinates along a spline curve using interpolation.`splinePoint()` calculates coordinates along a spline curve using four
+   * points p0, p1, p2, p3. It expects points in the same order as the
    * spline() function. `splinePoint()` works one axis
-   * at a time. Passing the anchor and control points' x-coordinates will
-   * calculate the x-coordinate of a point on the curve. Passing the anchor and
-   * control points' y-coordinates will calculate the y-coordinate of a point on
-   * the curve.The first parameter, `a`, is the coordinate of the first control point.The second and third parameters, `b` and `c`, are the coordinates of the
-   * anchor points.The fourth parameter, `d`, is the coordinate of the last control point.The fifth parameter, `t`, is the amount to interpolate along the curve. 0
-   * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+   * at a time. Passing the points' x-coordinates will
+   * calculate the x-coordinate of a point on the curve. Passing the
+   * points' y-coordinates will calculate the y-coordinate of a point on
+   * the curve.The first parameter, `a`, is the coordinate of point p0.The second and third parameters, `b` and `c`, are the coordinates of
+   * points p1 and p2.The fourth parameter, `d`, is the coordinate of point p3.The fifth parameter, `t`, is the amount to interpolate along the span
+   * from p1 to p2. `t = 0` is p1, `t = 1` is p2, and `t = 0.5` is halfway
    * between them.
  *
    * @param
@@ -3564,15 +3562,14 @@ declare class p5 {
 
   /**
    * Calculates coordinates along a line that's tangent to a spline curve.Tangent lines skim the surface of a curve. A tangent line's slope equals
-   * the curve's slope at the point where it intersects.`splineTangent()` calculates coordinates along a tangent line using the
-   * spline curve's anchor and control points. It expects points in the same
-   * order as the spline() function. `splineTangent()`
-   * works one axis at a time. Passing the anchor and control points'
-   * x-coordinates will calculate the x-coordinate of a point on the tangent
-   * line. Passing the anchor and control points' y-coordinates will calculate
-   * the y-coordinate of a point on the tangent line.The first parameter, `a`, is the coordinate of the first control point.The second and third parameters, `b` and `c`, are the coordinates of the
-   * anchor points.The fourth parameter, `d`, is the coordinate of the last control point.The fifth parameter, `t`, is the amount to interpolate along the curve. 0
-   * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+   * the curve's slope at the point where it intersects.`splineTangent()` calculates coordinates along a tangent line using four
+   * points p0, p1, p2, p3. It expects points in the same order as the
+   * spline() function. `splineTangent()` works one
+   * axis at a time. Passing the points' x-coordinates returns the x-component of
+   * the tangent vector; passing the points' y-coordinates returns the y-component.
+   * The first parameter, `a`, is the coordinate of point p0.The second and third parameters, `b` and `c`, are the coordinates of
+   * points p1 and p2.The fourth parameter, `d`, is the coordinate of point p3.The fifth parameter, `t`, is the amount to interpolate along the span
+   * from p1 to p2. `t = 0` is p1, `t = 1` is p2, and `t = 0.5` is halfway
    * between them.
  *
    * @param
@@ -3607,49 +3604,44 @@ declare class p5 {
   bezierOrder(): number;
 
   /**
-   * Adds a spline curve segment to a custom shape.`splineVertex()` adds a curved segment to custom shapes. The spline curves
-   * it creates are defined like those made by the
-   * curve() function. `splineVertex()` must be called
-   * between the beginShape() and
+   * 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. Splines are defined by two
-   * anchor points and two control points. `splineVertex()` must be called at
-   * least four times between
+   * 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:`beginShape();
+   * 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 control point.
-   * splineVertex(84, 91);
+   * // Add the first point.
+   * splineVertex(25, 80);
    * 
-   * // Add the anchor points to draw between.
-   * splineVertex(68, 19);
-   * splineVertex(21, 17);
+   * // Add the second point.
+   * splineVertex(20, 30);
    * 
-   * // Add the second control point.
-   * splineVertex(32, 91);
+   * // Add the last point.
+   * splineVertex(85, 60);
    * 
-   * 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
-   * `splineVertex()` with the coordinates of the control points:`beginShape();
+   * endShape();`Passing in `CLOSE` to `endShape()` closes the spline smoothly.`beginShape();
    * 
-   * // Add the first control point and draw a segment to it.
-   * splineVertex(84, 91);
-   * splineVertex(84, 91);
+   * // Add the first point.
+   * splineVertex(25, 80);
    * 
-   * // Add the anchor points to draw between.
-   * splineVertex(68, 19);
-   * splineVertex(21, 17);
+   * // Add the second point.
+   * splineVertex(20, 30);
    * 
-   * // Add the second control point.
-   * splineVertex(32, 91);
+   * // Add the second point.
+   * splineVertex(85, 60);
    * 
-   * // Uncomment the next line to draw the segment to the second control point.
-   * // splineVertex(32, 91);
-   * 
-   * endShape();`The first two parameters, `x` and `y`, set the vertex’s location. For
-   * example, calling `splineVertex(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
+   * 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().
@@ -3666,19 +3658,43 @@ declare class p5 {
   splineVertex(x: number, y: number, z: number, u: number, v: number): void;
 
   /**
-   * Sets the property of a curve.For example, set tightness,
-   * use `splineProperty('tightness', t)`, with `t` between 0 and 1,
-   * at 0 as default.Spline curves are like cables that are attached to a set of points.
-   * Adjusting tightness adjusts how tightly the cable is
-   * attached to the points. The parameter, tightness, determines
-   * how the curve fits to the vertex points. By default,
-   * tightness is set to 0. Setting tightness to 1, as in
-   * `splineProperty('tightness', 1)`, connects the curve's points
-   * using straight lines. Values in the range from –5 to 5
-   * deform curves while leaving them recognizable.This function can also be used to set 'ends' property
-   * (see also: the curveDetail() example),
-   * such as: `splineProperty('ends', EXCLUDE)` to exclude
-   * vertices, or `splineProperty('ends', INCLUDE)` to include them.
+   * 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
  *
    * @param
    * @param

package/types/shape/curves.d.ts

@@ -7,7 +7,7 @@ declare module 'p5' {
  * Draws a Bézier curve.Bézier curves can form shapes and curves that slope gently. They're defined
  * by two anchor points and two control points. Bézier curves provide more
  * control than the spline curves created with the
- * curve() function.The first two parameters, `x1` and `y1`, set the first anchor point. The
+ * spline() function.The first two parameters, `x1` and `y1`, set the first anchor point. The
  * first anchor point is where the curve starts.The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two control
  * points. The control points "pull" the curve towards them.The seventh and eighth 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
@@ -374,49 +374,72 @@ function bezierTangent(a: number, b: number, c: number, d: number, t: number): n
 
 /**
  * Draws a curve using a Catmull-Rom spline.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.The first two parameters, `x1` and `y1`, set the first control point. This
- * point isn’t drawn and can be thought of as the curve’s starting point.The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two anchor
- * points. The anchor points are the start and end points of the curve’s
- * visible segment.The seventh and eighth parameters, `x4` and `y4`, set the last control
- * point. This point isn’t drawn and can be thought of as the curve’s ending
- * point.Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
+ * cables that are attached to a set of points. By default (`ends: INCLUDE`),
+ * the curve passes through all four points you provide, in order
+ * `p0(x1,y1)` -> `p1(x2,y2)` -> `p2(x3,y3)` -> `p3(x4,y4)`. Think of them as
+ * points on a curve. If you switch to `ends: EXCLUDE`, p0 and p3 act
+ * like control points and only the middle span `p1->p2` is drawn.Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
  * `spline()` has twelve arguments because each point has x-, y-, and
  * z-coordinates.
  *
- * @param x-coordinate of the first control point.
- * @param y-coordinate of the first control point.
- * @param x-coordinate of the first anchor point.
- * @param y-coordinate of the first anchor point.
- * @param x-coordinate of the second anchor point.
- * @param y-coordinate of the second anchor point.
- * @param x-coordinate of the second control point.
- * @param y-coordinate of the second control point.
+ * @param x-coordinate of point p0.
+ * @param y-coordinate of point p0.
+ * @param x-coordinate of point p1.
+ * @param y-coordinate of point p1.
+ * @param x-coordinate of point p2.
+ * @param y-coordinate of point p2.
+ * @param x-coordinate of point p3.
+ * @param y-coordinate of point p3.
  * @example <div>
  * <code>
  * function setup() {
+ * createCanvas(200, 200);
+ * background(240);
+ * noFill();
+ * 
+ * stroke(0);
+ * strokeWeight(2);
+ * spline(40, 60, 100, 40, 120, 120, 60, 140);
+ * 
+ * strokeWeight(5);
+ * point(40, 60);
+ * point(100, 40);
+ * point(120, 120);
+ * point(60, 140);
+ * 
+ * describe('A black spline passes smoothly through four points');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
  * createCanvas(100, 100);
  * 
  * background(200);
  * 
+ * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn.
+ * splineProperty('ends', EXCLUDE);
+ * 
  * // Draw a black spline curve.
  * noFill();
  * strokeWeight(1);
  * stroke(0);
  * spline(5, 26, 73, 24, 73, 61, 15, 65);
  * 
- * // Draw red spline curves from the anchor points to the control points.
+ * // Draw red spline curves from the points.
  * stroke(255, 0, 0);
  * spline(5, 26, 5, 26, 73, 24, 73, 61);
  * spline(73, 24, 73, 61, 15, 65, 15, 65);
  * 
- * // Draw the anchor points in black.
+ * // Draw the points in black.
  * strokeWeight(5);
  * stroke(0);
  * point(73, 24);
  * point(73, 61);
  * 
- * // Draw the control points in red.
+ * // Draw the points in red.
  * stroke(255, 0, 0);
  * point(5, 26);
  * point(15, 65);
@@ -445,13 +468,16 @@ function bezierTangent(a: number, b: number, c: number, d: number, t: number): n
  * function draw() {
  * background(200);
  * 
+ * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn.
+ * splineProperty('ends', EXCLUDE);
+ * 
  * // Draw a black spline curve.
  * noFill();
  * strokeWeight(1);
  * stroke(0);
  * spline(x1, y1, 73, 24, 73, 61, 15, 65);
  * 
- * // Draw red spline curves from the anchor points to the control points.
+ * // Draw red spline curves from the points.
  * stroke(255, 0, 0);
  * spline(x1, y1, x1, y1, 73, 24, 73, 61);
  * spline(73, 24, 73, 61, 15, 65, 15, 65);
@@ -462,25 +488,25 @@ function bezierTangent(a: number, b: number, c: number, d: number, t: number): n
  * point(73, 24);
  * point(73, 61);
  * 
- * // Draw the control points in red.
+ * // Draw the points in red.
  * stroke(255, 0, 0);
  * point(x1, y1);
  * point(15, 65);
  * }
  * 
- * // Start changing the first control point if the user clicks near it.
+ * // Start changing the first point if the user clicks near it.
  * function mousePressed() {
  * if (dist(mouseX, mouseY, x1, y1) < 20) {
  * isChanging = true;
  * }
  * }
  * 
- * // Stop changing the first control point when the user releases the mouse.
+ * // Stop changing the first point when the user releases the mouse.
  * function mouseReleased() {
  * isChanging = false;
  * }
  * 
- * // Update the first control point while the user drags the mouse.
+ * // Update the first point while the user drags the mouse.
  * function mouseDragged() {
  * if (isChanging === true) {
  * x1 = mouseX;
@@ -497,6 +523,9 @@ function bezierTangent(a: number, b: number, c: number, d: number, t: number): n
  * 
  * background('skyblue');
  * 
+ * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn.
+ * splineProperty('ends', EXCLUDE);
+ * 
  * // Draw the red balloon.
  * fill('red');
  * spline(-150, 275, 50, 60, 50, 60, 250, 275);
@@ -520,6 +549,9 @@ function bezierTangent(a: number, b: number, c: number, d: number, t: number): n
  * function draw() {
  * background('skyblue');
  * 
+ * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn.
+ * splineProperty('ends', EXCLUDE);
+ * 
  * // Rotate around the y-axis.
  * rotateY(frameCount * 0.01);
  * 
@@ -536,29 +568,29 @@ function bezierTangent(a: number, b: number, c: number, d: number, t: number): n
 function spline(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
 
 /**
- * @param z-coordinate of the first control point.
- * @param z-coordinate of the first anchor point.
- * @param z-coordinate of the second anchor point.
- * @param z-coordinate of the second control point.
+ * @param z-coordinate of point p0.
+ * @param z-coordinate of point p1.
+ * @param z-coordinate of point p2.
+ * @param z-coordinate of point p3.
  */
 function spline(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number): void;
 
 /**
- * Calculates coordinates along a spline curve using interpolation.`splinePoint()` calculates coordinates along a spline curve using the
- * anchor and control points. It expects points in the same order as the
+ * Calculates coordinates along a spline curve using interpolation.`splinePoint()` calculates coordinates along a spline curve using four
+ * points p0, p1, p2, p3. It expects points in the same order as the
  * spline() function. `splinePoint()` works one axis
- * at a time. Passing the anchor and control points' x-coordinates will
- * calculate the x-coordinate of a point on the curve. Passing the anchor and
- * control points' y-coordinates will calculate the y-coordinate of a point on
- * the curve.The first parameter, `a`, is the coordinate of the first control point.The second and third parameters, `b` and `c`, are the coordinates of the
- * anchor points.The fourth parameter, `d`, is the coordinate of the last control point.The fifth parameter, `t`, is the amount to interpolate along the curve. 0
- * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+ * at a time. Passing the points' x-coordinates will
+ * calculate the x-coordinate of a point on the curve. Passing the
+ * points' y-coordinates will calculate the y-coordinate of a point on
+ * the curve.The first parameter, `a`, is the coordinate of point p0.The second and third parameters, `b` and `c`, are the coordinates of
+ * points p1 and p2.The fourth parameter, `d`, is the coordinate of point p3.The fifth parameter, `t`, is the amount to interpolate along the span
+ * from p1 to p2. `t = 0` is p1, `t = 1` is p2, and `t = 0.5` is halfway
  * between them.
  *
- * @param coordinate of first control point.
- * @param coordinate of first anchor point.
- * @param coordinate of second anchor point.
- * @param coordinate of second control point.
+ * @param coordinate of point p0.
+ * @param coordinate of point p1.
+ * @param coordinate of point p2.
+ * @param coordinate of point p3.
  * @param amount to interpolate between 0 and 1.
  * @return coordinate of a point on the curve.
  * @example <div>
@@ -568,7 +600,7 @@ function spline(x1: number, y1: number, z1: number, x2: number, y2: number, z2:
  * 
  * background(200);
  * 
- * // Set the coordinates for the curve's anchor and control points.
+ * // Set the coordinates for the curve's four points (p0, p1, p2, p3).
  * let x1 = 5;
  * let y1 = 26;
  * let x2 = 73;
@@ -616,7 +648,7 @@ function spline(x1: number, y1: number, z1: number, x2: number, y2: number, z2:
  * function draw() {
  * background(200);
  * 
- * // Set the coordinates for the curve's anchor and control points.
+ * // Set the coordinates for the curve's four points (p0, p1, p2, p3).
  * let x1 = 5;
  * let y1 = 26;
  * let x2 = 73;
@@ -646,31 +678,73 @@ function splinePoint(a: number, b: number, c: number, d: number, t: number): num
 
 /**
  * Calculates coordinates along a line that's tangent to a spline curve.Tangent lines skim the surface of a curve. A tangent line's slope equals
- * the curve's slope at the point where it intersects.`splineTangent()` calculates coordinates along a tangent line using the
- * spline curve's anchor and control points. It expects points in the same
- * order as the spline() function. `splineTangent()`
- * works one axis at a time. Passing the anchor and control points'
- * x-coordinates will calculate the x-coordinate of a point on the tangent
- * line. Passing the anchor and control points' y-coordinates will calculate
- * the y-coordinate of a point on the tangent line.The first parameter, `a`, is the coordinate of the first control point.The second and third parameters, `b` and `c`, are the coordinates of the
- * anchor points.The fourth parameter, `d`, is the coordinate of the last control point.The fifth parameter, `t`, is the amount to interpolate along the curve. 0
- * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
+ * the curve's slope at the point where it intersects.`splineTangent()` calculates coordinates along a tangent line using four
+ * points p0, p1, p2, p3. It expects points in the same order as the
+ * spline() function. `splineTangent()` works one
+ * axis at a time. Passing the points' x-coordinates returns the x-component of
+ * the tangent vector; passing the points' y-coordinates returns the y-component.
+ * The first parameter, `a`, is the coordinate of point p0.The second and third parameters, `b` and `c`, are the coordinates of
+ * points p1 and p2.The fourth parameter, `d`, is the coordinate of point p3.The fifth parameter, `t`, is the amount to interpolate along the span
+ * from p1 to p2. `t = 0` is p1, `t = 1` is p2, and `t = 0.5` is halfway
  * between them.
  *
- * @param coordinate of first control point.
- * @param coordinate of first anchor point.
- * @param coordinate of second anchor point.
- * @param coordinate of second control point.
+ * @param coordinate of point p0.
+ * @param coordinate of point p1.
+ * @param coordinate of point p2.
+ * @param coordinate of point p3.
  * @param amount to interpolate between 0 and 1.
  * @return coordinate of a point on the tangent line.
  * @example <div>
  * <code>
  * function setup() {
+ * createCanvas(120, 120);
+ * describe('A black spline on a gray canvas. A red dot moves along the curve on its own. A short line shows the tangent direction at the dot.');
+ * }
+ * 
+ * function draw() {
+ * background(240);
+ * 
+ * const x1 = 15, y1 = 40;
+ * const x2 = 90, y2 = 25;
+ * const x3 = 95, y3 = 95;
+ * const x4 = 30, y4 = 110;
+ * 
+ * noFill();
+ * stroke(0);
+ * strokeWeight(2);
+ * spline(x1, y1, x2, y2, x3, y3, x4, y4);
+ * 
+ * const t = 0.5 + 0.5 * sin(frameCount * 0.03);
+ * 
+ * const px = splinePoint(x1, x2, x3, x4, t);
+ * const py = splinePoint(y1, y2, y3, y4, t);
+ * 
+ * let tx = splineTangent(x1, x2, x3, x4, t);
+ * let ty = splineTangent(y1, y2, y3, y4, t);
+ * 
+ * const m = Math.hypot(tx, ty) || 1;
+ * tx = (tx / m) * 16;
+ * ty = (ty / m) * 16;
+ * 
+ * stroke(0);
+ * strokeWeight(2);
+ * line(px, py, px + tx, py + ty);
+ * 
+ * noStroke();
+ * fill('red');
+ * circle(px, py, 7);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
  * createCanvas(100, 100);
  * 
  * background(200);
  * 
- * // Set the coordinates for the curve's anchor and control points.
+ * // Set the coordinates for the curve's four points (p0, p1, p2, p3).
  * let x1 = 5;
  * let y1 = 26;
  * let x2 = 73;