p5 2.0.1 → 2.0.3

package/types/shape/curves.d.ts

@@ -0,0 +1,740 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+
+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
+ * 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
+ * `bezier()` has twelve arguments because each point has x-, y-,
+ * and z-coordinates.
+ *
+ * @param x-coordinate of the first anchor point.
+ * @param y-coordinate of the first anchor point.
+ * @param x-coordinate of the first control point.
+ * @param y-coordinate of the first control point.
+ * @param x-coordinate of the second control point.
+ * @param y-coordinate of the second control point.
+ * @param x-coordinate of the second anchor point.
+ * @param y-coordinate of the second anchor point.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * strokeWeight(5);
+ * point(85, 20);
+ * point(15, 80);
+ * 
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(10, 10);
+ * point(90, 90);
+ * 
+ * // Draw a black bezier curve.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ * bezier(85, 20, 10, 10, 90, 90, 15, 80);
+ * 
+ * // Draw red lines from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * line(85, 20, 10, 10);
+ * line(15, 80, 90, 90);
+ * 
+ * describe(
+ * 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+ * );
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click the mouse near the red dot in the top-left corner
+ * // and drag to change the curve's shape.
+ * 
+ * let x2 = 10;
+ * let y2 = 10;
+ * let isChanging = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * describe(
+ * 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Draw the anchor points in black.
+ * stroke(0);
+ * strokeWeight(5);
+ * point(85, 20);
+ * point(15, 80);
+ * 
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(x2, y2);
+ * point(90, 90);
+ * 
+ * // Draw a black bezier curve.
+ * noFill();
+ * stroke(0);
+ * strokeWeight(1);
+ * bezier(85, 20, x2, y2, 90, 90, 15, 80);
+ * 
+ * // Draw red lines from the anchor points to the control points.
+ * stroke(255, 0, 0);
+ * line(85, 20, x2, y2);
+ * line(15, 80, 90, 90);
+ * }
+ * 
+ * // Start changing the first control point if the user clicks near it.
+ * function mousePressed() {
+ * if (dist(mouseX, mouseY, x2, y2) < 20) {
+ * isChanging = true;
+ * }
+ * }
+ * 
+ * // Stop changing the first control point when the user releases the mouse.
+ * function mouseReleased() {
+ * isChanging = false;
+ * }
+ * 
+ * // Update the first control point while the user drags the mouse.
+ * function mouseDragged() {
+ * if (isChanging === true) {
+ * x2 = mouseX;
+ * y2 = mouseY;
+ * }
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background('skyblue');
+ * 
+ * // Draw the red balloon.
+ * fill('red');
+ * bezier(50, 60, 5, 15, 95, 15, 50, 60);
+ * 
+ * // Draw the balloon string.
+ * line(50, 60, 50, 80);
+ * 
+ * describe('A red balloon in a blue sky.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A red balloon in a blue sky. The balloon rotates slowly, revealing that it is flat.');
+ * }
+ * 
+ * function draw() {
+ * background('skyblue');
+ * 
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ * 
+ * // Draw the red balloon.
+ * fill('red');
+ * bezier(0, 0, 0, -45, -45, 0, 45, -45, 0, 0, 0, 0);
+ * 
+ * // Draw the balloon string.
+ * line(0, 0, 0, 0, 20, 0);
+ * }
+ * </code>
+ * </div>
+ */
+function bezier(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
+
+/**
+ * @param z-coordinate of the first anchor point.
+ * @param z-coordinate of the first control point.
+ * @param z-coordinate of the second control point.
+ * @param z-coordinate of the second anchor point.
+ */
+function bezier(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 Bézier curve using interpolation.`bezierPoint()` calculates coordinates along a Bézier curve using the
+ * anchor and control points. It expects points in the same order as the
+ * bezier() function. `bezierPoint()` 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 anchor point.The second and third parameters, `b` and `c`, are the coordinates of the
+ * control points.The fourth parameter, `d`, is the coordinate of the last anchor 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
+ * 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 amount to interpolate between 0 and 1.
+ * @return coordinate of the point on the curve.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 85;
+ * let x2 = 10;
+ * let x3 = 90;
+ * let x4 = 15;
+ * let y1 = 20;
+ * let y2 = 10;
+ * let y3 = 90;
+ * let y4 = 80;
+ * 
+ * // Style the curve.
+ * noFill();
+ * 
+ * // Draw the curve.
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+ * 
+ * // Draw circles along the curve's path.
+ * fill(255);
+ * 
+ * // Top-right.
+ * let x = bezierPoint(x1, x2, x3, x4, 0);
+ * let y = bezierPoint(y1, y2, y3, y4, 0);
+ * circle(x, y, 5);
+ * 
+ * // Center.
+ * x = bezierPoint(x1, x2, x3, x4, 0.5);
+ * y = bezierPoint(y1, y2, y3, y4, 0.5);
+ * circle(x, y, 5);
+ * 
+ * // Bottom-left.
+ * x = bezierPoint(x1, x2, x3, x4, 1);
+ * y = bezierPoint(y1, y2, y3, y4, 1);
+ * circle(x, y, 5);
+ * 
+ * describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * describe('A black s-curve on a gray square. A white circle moves back and forth along the curve.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 85;
+ * let x2 = 10;
+ * let x3 = 90;
+ * let x4 = 15;
+ * let y1 = 20;
+ * let y2 = 10;
+ * let y3 = 90;
+ * let y4 = 80;
+ * 
+ * // Draw the curve.
+ * noFill();
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+ * 
+ * // Calculate the circle's coordinates.
+ * let t = 0.5 * sin(frameCount * 0.01) + 0.5;
+ * let x = bezierPoint(x1, x2, x3, x4, t);
+ * let y = bezierPoint(y1, y2, y3, y4, t);
+ * 
+ * // Draw the circle.
+ * fill(255);
+ * circle(x, y, 5);
+ * }
+ * </code>
+ * </div>
+ */
+function bezierPoint(a: number, b: number, c: number, d: number, t: number): number;
+
+/**
+ * Calculates coordinates along a line that's tangent to a Bézier 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.`bezierTangent()` calculates coordinates along a tangent line using the
+ * Bézier curve's anchor and control points. It expects points in the same
+ * order as the bezier() function. `bezierTangent()`
+ * 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 anchor point.The second and third parameters, `b` and `c`, are the coordinates of the
+ * control points.The fourth parameter, `d`, is the coordinate of the last anchor 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
+ * between them.
+ *
+ * @param coordinate of first anchor point.
+ * @param coordinate of first control point.
+ * @param coordinate of second control point.
+ * @param coordinate of second anchor point.
+ * @param amount to interpolate between 0 and 1.
+ * @return coordinate of a point on the tangent line.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 85;
+ * let x2 = 10;
+ * let x3 = 90;
+ * let x4 = 15;
+ * let y1 = 20;
+ * let y2 = 10;
+ * let y3 = 90;
+ * let y4 = 80;
+ * 
+ * // Style the curve.
+ * noFill();
+ * 
+ * // Draw the curve.
+ * bezier(x1, y1, x2, y2, x3, y3, x4, y4);
+ * 
+ * // Draw tangents along the curve's path.
+ * fill(255);
+ * 
+ * // Top-right circle.
+ * stroke(0);
+ * let x = bezierPoint(x1, x2, x3, x4, 0);
+ * let y = bezierPoint(y1, y2, y3, y4, 0);
+ * circle(x, y, 5);
+ * 
+ * // Top-right tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * let tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0);
+ * let ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ * 
+ * // Center circle.
+ * stroke(0);
+ * x = bezierPoint(x1, x2, x3, x4, 0.5);
+ * y = bezierPoint(y1, y2, y3, y4, 0.5);
+ * circle(x, y, 5);
+ * 
+ * // Center tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * tx = 0.1 * bezierTangent(x1, x2, x3, x4, 0.5);
+ * ty = 0.1 * bezierTangent(y1, y2, y3, y4, 0.5);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ * 
+ * // Bottom-left circle.
+ * stroke(0);
+ * x = bezierPoint(x1, x2, x3, x4, 1);
+ * y = bezierPoint(y1, y2, y3, y4, 1);
+ * circle(x, y, 5);
+ * 
+ * // Bottom-left tangent.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * tx = 0.1 * bezierTangent(x1, x2, x3, x4, 1);
+ * ty = 0.1 * bezierTangent(y1, y2, y3, y4, 1);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ * 
+ * describe(
+ * 'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'
+ * );
+ * }
+ * </code>
+ * </div>
+ */
+function bezierTangent(a: number, b: number, c: number, d: number, t: number): number;
+
+/**
+ * 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
+ * `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.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // 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.
+ * 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.
+ * strokeWeight(5);
+ * stroke(0);
+ * point(73, 24);
+ * point(73, 61);
+ * 
+ * // Draw the control points in red.
+ * stroke(255, 0, 0);
+ * point(5, 26);
+ * point(15, 65);
+ * 
+ * describe(
+ * 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+ * );
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let x1 = 5;
+ * let y1 = 26;
+ * let isChanging = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * describe(
+ * 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // 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.
+ * stroke(255, 0, 0);
+ * spline(x1, y1, x1, y1, 73, 24, 73, 61);
+ * spline(73, 24, 73, 61, 15, 65, 15, 65);
+ * 
+ * // Draw the anchor points in black.
+ * strokeWeight(5);
+ * stroke(0);
+ * point(73, 24);
+ * point(73, 61);
+ * 
+ * // Draw the control 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.
+ * function mousePressed() {
+ * if (dist(mouseX, mouseY, x1, y1) < 20) {
+ * isChanging = true;
+ * }
+ * }
+ * 
+ * // Stop changing the first control point when the user releases the mouse.
+ * function mouseReleased() {
+ * isChanging = false;
+ * }
+ * 
+ * // Update the first control point while the user drags the mouse.
+ * function mouseDragged() {
+ * if (isChanging === true) {
+ * x1 = mouseX;
+ * y1 = mouseY;
+ * }
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background('skyblue');
+ * 
+ * // Draw the red balloon.
+ * fill('red');
+ * spline(-150, 275, 50, 60, 50, 60, 250, 275);
+ * 
+ * // Draw the balloon string.
+ * line(50, 60, 50, 80);
+ * 
+ * describe('A red balloon in a blue sky.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A red balloon in a blue sky.');
+ * }
+ * 
+ * function draw() {
+ * background('skyblue');
+ * 
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ * 
+ * // Draw the red balloon.
+ * fill('red');
+ * spline(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);
+ * 
+ * // Draw the balloon string.
+ * line(0, 10, 0, 0, 30, 0);
+ * }
+ * </code>
+ * </div>
+ */
+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.
+ */
+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
+ * 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
+ * between them.
+ *
+ * @param coordinate of first anchor point.
+ * @param coordinate of first control point.
+ * @param coordinate of second control point.
+ * @param coordinate of second anchor point.
+ * @param amount to interpolate between 0 and 1.
+ * @return coordinate of a point on the curve.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 5;
+ * let y1 = 26;
+ * let x2 = 73;
+ * let y2 = 24;
+ * let x3 = 73;
+ * let y3 = 61;
+ * let x4 = 15;
+ * let y4 = 65;
+ * 
+ * // Draw the curve.
+ * noFill();
+ * spline(x1, y1, x2, y2, x3, y3, x4, y4);
+ * 
+ * // Draw circles along the curve's path.
+ * fill(255);
+ * 
+ * // Top.
+ * let x = splinePoint(x1, x2, x3, x4, 0);
+ * let y = splinePoint(y1, y2, y3, y4, 0);
+ * circle(x, y, 5);
+ * 
+ * // Center.
+ * x = splinePoint(x1, x2, x3, x4, 0.5);
+ * y = splinePoint(y1, y2, y3, y4, 0.5);
+ * circle(x, y, 5);
+ * 
+ * // Bottom.
+ * x = splinePoint(x1, x2, x3, x4, 1);
+ * y = splinePoint(y1, y2, y3, y4, 1);
+ * circle(x, y, 5);
+ * 
+ * describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * describe('A black curve on a gray square. A white circle moves back and forth along the curve.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 5;
+ * let y1 = 26;
+ * let x2 = 73;
+ * let y2 = 24;
+ * let x3 = 73;
+ * let y3 = 61;
+ * let x4 = 15;
+ * let y4 = 65;
+ * 
+ * // Draw the curve.
+ * noFill();
+ * spline(x1, y1, x2, y2, x3, y3, x4, y4);
+ * 
+ * // Calculate the circle's coordinates.
+ * let t = 0.5 * sin(frameCount * 0.01) + 0.5;
+ * let x = splinePoint(x1, x2, x3, x4, t);
+ * let y = splinePoint(y1, y2, y3, y4, t);
+ * 
+ * // Draw the circle.
+ * fill(255);
+ * circle(x, y, 5);
+ * }
+ * </code>
+ * </div>
+ */
+function splinePoint(a: number, b: number, c: number, d: number, t: number): number;
+
+/**
+ * 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
+ * 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 amount to interpolate between 0 and 1.
+ * @return coordinate of a point on the tangent line.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Set the coordinates for the curve's anchor and control points.
+ * let x1 = 5;
+ * let y1 = 26;
+ * let x2 = 73;
+ * let y2 = 24;
+ * let x3 = 73;
+ * let y3 = 61;
+ * let x4 = 15;
+ * let y4 = 65;
+ * 
+ * // Draw the curve.
+ * noFill();
+ * spline(x1, y1, x2, y2, x3, y3, x4, y4);
+ * 
+ * // Draw tangents along the curve's path.
+ * fill(255);
+ * 
+ * // Top circle.
+ * stroke(0);
+ * let x = splinePoint(x1, x2, x3, x4, 0);
+ * let y = splinePoint(y1, y2, y3, y4, 0);
+ * circle(x, y, 5);
+ * 
+ * // Top tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * let tx = 0.2 * splineTangent(x1, x2, x3, x4, 0);
+ * let ty = 0.2 * splineTangent(y1, y2, y3, y4, 0);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ * 
+ * // Center circle.
+ * stroke(0);
+ * x = splinePoint(x1, x2, x3, x4, 0.5);
+ * y = splinePoint(y1, y2, y3, y4, 0.5);
+ * circle(x, y, 5);
+ * 
+ * // Center tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * tx = 0.2 * splineTangent(x1, x2, x3, x4, 0.5);
+ * ty = 0.2 * splineTangent(y1, y2, y3, y4, 0.5);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ * 
+ * // Bottom circle.
+ * stroke(0);
+ * x = splinePoint(x1, x2, x3, x4, 1);
+ * y = splinePoint(y1, y2, y3, y4, 1);
+ * circle(x, y, 5);
+ * 
+ * // Bottom tangent line.
+ * // Scale the tangent point to draw a shorter line.
+ * stroke(255, 0, 0);
+ * tx = 0.2 * splineTangent(x1, x2, x3, x4, 1);
+ * ty = 0.2 * splineTangent(y1, y2, y3, y4, 1);
+ * line(x + tx, y + ty, x - tx, y - ty);
+ * 
+ * describe(
+ * 'A black curve on a gray square. A white circle moves back and forth along the curve.'
+ * );
+ * }
+ * </code>
+ * </div>
+ */
+function splineTangent(a: number, b: number, c: number, d: number, t: number): number;
+
+}
+
+export default function curves(p5: any, fn: any): void;