From 0738de260cc5ec708a7d846a7c72e61e8f54a2a2 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Wed, 14 May 2025 03:13:19 +0530 Subject: [PATCH 01/32] updating keyTyped() function in dev-2.0 branch --- src/events/keyboard.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/events/keyboard.js b/src/events/keyboard.js index cbe99cf33d..ebadecc5bd 100644 --- a/src/events/keyboard.js +++ b/src/events/keyboard.js @@ -663,7 +663,6 @@ function keyboard(p5, fn){ }; - /** * A function that's called once when keys with printable characters are pressed. * @@ -795,7 +794,7 @@ function keyboard(p5, fn){ * */ fn._onkeypress = function(e) { - if (e.which === this._lastKeyCodeTyped) { + if (e.which === this._lastKeyCodeTyped && e.repeat) { // prevent multiple firings return; } From cf31b713f4326a827b9bc92419bb9d656e0df528 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 28 Jul 2025 19:45:21 +0530 Subject: [PATCH 02/32] Create auto-close-issues.yml --- .github/workflows/auto-close-issues.yml | 38 +++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 .github/workflows/auto-close-issues.yml diff --git a/.github/workflows/auto-close-issues.yml b/.github/workflows/auto-close-issues.yml new file mode 100644 index 0000000000..01e7e949a3 --- /dev/null +++ b/.github/workflows/auto-close-issues.yml @@ -0,0 +1,38 @@ +name: Close Linked Issues on PR Merge + +on: + pull_request: + types: + - closed + branches: + - 2.0 + - dev-2.0 + +jobs: + close_issues: + if: github.event.pull_request.merged == true + runs-on: ubuntu-latest + steps: + - name: Extract and Close Issues + uses: actions/github-script@v7 + with: + script: | + const prBody = context.payload.pull_request.body; + const issueRegex = /(Fixes|Resolves|Closes)\s+#(\d+)/gi; + let match; + while ((match = issueRegex.exec(prBody)) !== null) { + const issueNumber = parseInt(match[2], 10); + console.log(`Closing issue #${issueNumber}`); + await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: issueNumber, + body: `Closed by merged PR #${context.payload.pull_request.number}` + }); + await github.rest.issues.update({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: issueNumber, + state: "closed" + }); + } From 09ce776216d6c360fb2bad01d0b85edfdb597e5b Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 28 Jul 2025 19:53:04 +0530 Subject: [PATCH 03/32] Update p5.Geometry.js --- src/webgl/p5.Geometry.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js index d8b1f2e0b5..c7cc72cac3 100644 --- a/src/webgl/p5.Geometry.js +++ b/src/webgl/p5.Geometry.js @@ -6,7 +6,6 @@ * @requires p5.Geometry */ -//some of the functions are adjusted from Three.js(http://threejs.org) import * as constants from '../core/constants'; import { DataArray } from './p5.DataArray'; From 3ca7e6cf80bd830ef62ca13bcc190a2c41833d86 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 28 Jul 2025 20:26:29 +0530 Subject: [PATCH 04/32] Update README.txt --- lib/README.txt | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/README.txt b/lib/README.txt index b2116cd872..ad65e31eb8 100644 --- a/lib/README.txt +++ b/lib/README.txt @@ -1,6 +1,5 @@ # Welcome to p5.js -You have downloaded the complete p5.js library ZIP file, yay! # Contents of the p5 folder From 11bfaa523b9a54fdd266a1007b2dda527530b01a Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 28 Jul 2025 20:31:17 +0530 Subject: [PATCH 05/32] Revert "Update README.txt" --- lib/README.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/README.txt b/lib/README.txt index ad65e31eb8..b2116cd872 100644 --- a/lib/README.txt +++ b/lib/README.txt @@ -1,5 +1,6 @@ # Welcome to p5.js +You have downloaded the complete p5.js library ZIP file, yay! # Contents of the p5 folder From a9fd0d4788310d9e22bf9f01c5ed2b938f6fb0a5 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 28 Jul 2025 20:33:14 +0530 Subject: [PATCH 06/32] Revert "Update p5.Geometry.js" --- src/webgl/p5.Geometry.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/webgl/p5.Geometry.js b/src/webgl/p5.Geometry.js index c7cc72cac3..d8b1f2e0b5 100644 --- a/src/webgl/p5.Geometry.js +++ b/src/webgl/p5.Geometry.js @@ -6,6 +6,7 @@ * @requires p5.Geometry */ +//some of the functions are adjusted from Three.js(http://threejs.org) import * as constants from '../core/constants'; import { DataArray } from './p5.DataArray'; From 24fb3eba683ecc4de984d285195c37d77089fd2b Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 17 Aug 2025 04:39:08 +0530 Subject: [PATCH 07/32] fixing typo and rephrasing docs of splineProperty. --- src/shape/custom_shapes.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 9e22f0b75c..789524f33d 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2061,17 +2061,21 @@ function customShapes(p5, fn) { * Sets the property of a curve. * * For example, set tightness, - * use `splineProperty('tightness', t)`, with `t` between 0 and 1, - * at 0 as default. + * To set tightness, use `splineProperty('tightness', t)`, + * (default: t = 0). * - * 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. + * + * Spline curves behave like a cable threaded through a + * set of vertices (points). The tightness parameter controls + * how closely that cable is attached to the vertices. By default, + * the value of `tightness (t)` is 0, which produces a smooth + * spline. Setting `t = 1` (for example, `splineProperty('tightness', 1)`) + * connects the vertices with straight line segments. + * Values between 0 and 1 make the curve follow the vertices more tightly. + * Negative values loosen the curve and create rounder bulges whereas values + * greater than 1 can create sharper corners or slight overshoot. In + * practice, values in the range `–5 to 5` deform the curve while keeping + * it recognizable. * * This function can also be used to set 'ends' property * (see also: the curveDetail() example), From 1f49e142751a7bead52a70892625daab5bb4b4d2 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 17 Aug 2025 04:52:13 +0530 Subject: [PATCH 08/32] delete testing files --- .github/workflows/auto-close-issues.yml | 38 ------------------------- 1 file changed, 38 deletions(-) delete mode 100644 .github/workflows/auto-close-issues.yml diff --git a/.github/workflows/auto-close-issues.yml b/.github/workflows/auto-close-issues.yml deleted file mode 100644 index 01e7e949a3..0000000000 --- a/.github/workflows/auto-close-issues.yml +++ /dev/null @@ -1,38 +0,0 @@ -name: Close Linked Issues on PR Merge - -on: - pull_request: - types: - - closed - branches: - - 2.0 - - dev-2.0 - -jobs: - close_issues: - if: github.event.pull_request.merged == true - runs-on: ubuntu-latest - steps: - - name: Extract and Close Issues - uses: actions/github-script@v7 - with: - script: | - const prBody = context.payload.pull_request.body; - const issueRegex = /(Fixes|Resolves|Closes)\s+#(\d+)/gi; - let match; - while ((match = issueRegex.exec(prBody)) !== null) { - const issueNumber = parseInt(match[2], 10); - console.log(`Closing issue #${issueNumber}`); - await github.rest.issues.createComment({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: issueNumber, - body: `Closed by merged PR #${context.payload.pull_request.number}` - }); - await github.rest.issues.update({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: issueNumber, - state: "closed" - }); - } From 49d31eb696c5de6e4ee543af02f031eb119a1f2c Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 17 Aug 2025 04:53:57 +0530 Subject: [PATCH 09/32] typo --- src/shape/custom_shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 789524f33d..2e1dc40b3e 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2058,7 +2058,7 @@ function customShapes(p5, fn) { }; /** - * Sets the property of a curve. + * Sets the property of a spline. * * For example, set tightness, * To set tightness, use `splineProperty('tightness', t)`, From 5be62efcdd7282fbd281bf72712381dc02af0b3e Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 17 Aug 2025 21:35:03 +0530 Subject: [PATCH 10/32] fixes --- src/shape/custom_shapes.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 2e1dc40b3e..e1ce9b3ca4 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2102,7 +2102,8 @@ function customShapes(p5, fn) { * // Set the curve's tightness using the mouse. * let t = map(mouseX, 0, 100, -5, 5, true); * splineProperty('tightness', t); - * + * // 'ends' defaults to INCLUDE; uncomment to see the effect: + * // splineProperty('ends', EXCLUDE); * // Draw the curve. * noFill(); * beginShape(); From 39e92acd9045e01b1fcbdba363df3cc5ef39f9e9 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 17 Aug 2025 21:38:19 +0530 Subject: [PATCH 11/32] fixes --- src/shape/custom_shapes.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index e1ce9b3ca4..8ed6d8a4e2 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2092,7 +2092,7 @@ function customShapes(p5, fn) { * // Move the mouse left and right to see the curve change. * * function setup() { - * createCanvas(100, 100); + * createCanvas(200, 200); * describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right'); * } * @@ -2107,12 +2107,12 @@ function customShapes(p5, fn) { * // Draw the curve. * noFill(); * beginShape(); - * splineVertex(10, 26); - * splineVertex(10, 26); - * splineVertex(83, 24); - * splineVertex(83, 61); - * splineVertex(25, 65); - * splineVertex(25, 65); + * splineVertex(60, 76); + * splineVertex(60, 76); + * splineVertex(133, 74); + * splineVertex(133, 111); + * splineVertex(75, 115); + * splineVertex(75, 115); * endShape(); * } * From 24b2ca88d9ecf1ab077fba4ab84ec87e76ddffad Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 18 Aug 2025 02:34:37 +0530 Subject: [PATCH 12/32] fixing the link from curve() to spline() --- src/shape/custom_shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 8ed6d8a4e2..87f2b5bbdf 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -1652,7 +1652,7 @@ function customShapes(p5, fn) { * * `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 + * spline() function. `splineVertex()` must be called * between the beginShape() and * endShape() functions. * From a4981a09a12571b40134b7fad240ab33c6caed99 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 18 Aug 2025 03:16:03 +0530 Subject: [PATCH 13/32] fixing spline() examples. --- src/shape/curves.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index ef0d0bc448..ff73112f50 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -501,6 +501,9 @@ function curves(p5, fn){ * * 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); @@ -546,7 +549,10 @@ function curves(p5, fn){ * * 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); @@ -598,7 +604,10 @@ function curves(p5, fn){ * createCanvas(100, 100); * * 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); @@ -621,7 +630,10 @@ function curves(p5, fn){ * * 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); * From c8a5a71ea295fb89465588fec77342ee03c2ecb0 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 18 Aug 2025 03:19:35 +0530 Subject: [PATCH 14/32] fixing splinePoint() and splineTangent() --- src/shape/curves.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index ff73112f50..74a7ed1009 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -710,7 +710,10 @@ function curves(p5, fn){ * 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); + * * // Set the coordinates for the curve's anchor and control points. * let x1 = 5; * let y1 = 26; @@ -758,7 +761,10 @@ function curves(p5, fn){ * * 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); + * * // Set the coordinates for the curve's anchor and control points. * let x1 = 5; * let y1 = 26; @@ -837,6 +843,9 @@ function curves(p5, fn){ * * 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); + * * // Set the coordinates for the curve's anchor and control points. * let x1 = 5; * let y1 = 26; From 34ddffe6084db36a18b44140d3bf27fbe4f55c7b Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 18 Aug 2025 03:33:11 +0530 Subject: [PATCH 15/32] adding little detail about splineProperty(ends) --- src/shape/custom_shapes.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 87f2b5bbdf..2cb51dca64 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2082,6 +2082,12 @@ function customShapes(p5, fn) { * such as: `splineProperty('ends', EXCLUDE)` to exclude * vertices, or `splineProperty('ends', INCLUDE)` to include them. * + * Set `splineProperty('ends', EXCLUDE)` to draw only the middle + * segment of a spline with four points. For example, with points + * `(a,b)`, `(c,d)`, `(e,f)`, `(g,h)` the call `spline(a,b, c,d, e,f, g,h)` + * will render only the segment from `(c,d)` to `(e,f)`, + * skipping the outer spans `(a,b)->(c,d)` and `(e,f)->(g,h)`. + * * @method splineProperty * @param {String} property * @param value Value to set the given property to. From 9099bac119c3ff2ed9abe0c2817f8f88d71bf42f Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 18 Aug 2025 03:55:52 +0530 Subject: [PATCH 16/32] adding an example sketch for splineProperty 'ends' --- src/shape/custom_shapes.js | 62 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 2cb51dca64..e01c87a470 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2123,7 +2123,69 @@ function customShapes(p5, fn) { * } * * + * + * @example + *
+ * + * function setup() { + * createCanvas(360, 140); + * background(240); + * noFill(); + * + * // Right panel: ends = INCLUDE (all spans). + * push(); + * translate(10, 10); + * stroke(220); + * rect(0, 0, 160, 120); + * fill(30); + * textSize(11); + * text('ends: INCLUDE (all spans)', 8, 16); + * noFill(); + * + * splineProperty('ends', INCLUDE); + * stroke(0); + * strokeWeight(2); + * spline(25, 46, 93, 44, 93, 81, 35, 85); + * + * // vertices + * strokeWeight(5); + * stroke(0); + * point(25, 46); + * point(93, 44); + * point(93, 81); + * point(35, 85); + * pop(); + * + * // Right panel: ends = EXCLUDE (middle only). + * push(); + * translate(190, 10); + * stroke(220); + * rect(0, 0, 160, 120); + * noStroke(); + * fill(30); + * text('ends: EXCLUDE ', 18, 16); + * noFill(); + * + * splineProperty('ends', EXCLUDE); + * stroke(0); + * strokeWeight(2); + * spline(25, 46, 93, 44, 93, 81, 35, 85); + * + * // vertices + * strokeWeight(5); + * stroke(0); + * point(25, 46); + * point(93, 44); + * point(93, 81); + * point(35, 85); + * pop(); + * + * describe('Left panel shows spline with ends INCLUDE (three spans). Right panel shows EXCLUDE (only the middle span). Four black points mark the vertices.'); + * } + * + *
*/ + /** * @method splineProperty * @param {String} property From ba0c64a4619341edea61ef78c3e7f835678320a0 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 18 Aug 2025 03:58:49 +0530 Subject: [PATCH 17/32] some minor fixes --- src/shape/curves.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index 74a7ed1009..bc96c2738f 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -501,7 +501,7 @@ function curves(p5, fn){ * * background(200); * - * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and 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. @@ -550,7 +550,7 @@ function curves(p5, fn){ * 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. + * // Exclude the ends and 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. @@ -605,7 +605,7 @@ function curves(p5, fn){ * * background('skyblue'); * - * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and 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. @@ -631,7 +631,7 @@ function curves(p5, fn){ * 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. + * // Exclude the ends and 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. @@ -711,7 +711,7 @@ function curves(p5, fn){ * * background(200); * - * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. * splineProperty('ends', EXCLUDE); * * // Set the coordinates for the curve's anchor and control points. @@ -762,7 +762,7 @@ function curves(p5, fn){ * 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. + * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. * splineProperty('ends', EXCLUDE); * * // Set the coordinates for the curve's anchor and control points. @@ -843,7 +843,7 @@ function curves(p5, fn){ * * background(200); * - * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. * splineProperty('ends', EXCLUDE); * * // Set the coordinates for the curve's anchor and control points. From ec7a3aa052c0ea9201e4a5e01eda5b1b1678b389 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 18 Aug 2025 04:00:36 +0530 Subject: [PATCH 18/32] fixing docs --- src/shape/custom_shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index e01c87a470..0b189092b2 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -1648,7 +1648,7 @@ function customShapes(p5, fn) { /** - * Adds a spline curve segment to a custom shape. + * Connects points with a smooth curve (a spline). * * `splineVertex()` adds a curved segment to custom shapes. The spline curves * it creates are defined like those made by the From c085c124d0e859c906a04b5db94dea90bc214f61 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 18 Aug 2025 04:12:06 +0530 Subject: [PATCH 19/32] fixes --- src/shape/curves.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index bc96c2738f..b5b31dd1ed 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -501,7 +501,7 @@ function curves(p5, fn){ * * background(200); * - * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and 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. @@ -550,7 +550,7 @@ function curves(p5, fn){ * function draw() { * background(200); * - * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and 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. @@ -605,7 +605,7 @@ function curves(p5, fn){ * * background('skyblue'); * - * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and 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. @@ -631,7 +631,7 @@ function curves(p5, fn){ * function draw() { * background('skyblue'); * - * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and 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. @@ -711,7 +711,7 @@ function curves(p5, fn){ * * background(200); * - * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. * splineProperty('ends', EXCLUDE); * * // Set the coordinates for the curve's anchor and control points. @@ -762,7 +762,7 @@ function curves(p5, fn){ * function draw() { * background(200); * - * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. * splineProperty('ends', EXCLUDE); * * // Set the coordinates for the curve's anchor and control points. @@ -843,7 +843,7 @@ function curves(p5, fn){ * * background(200); * - * // Exclude the ends and skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. + * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. * splineProperty('ends', EXCLUDE); * * // Set the coordinates for the curve's anchor and control points. From cd194986cafb4da7287c5d2e20273d0dcaa513d3 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Fri, 22 Aug 2025 06:10:16 +0530 Subject: [PATCH 20/32] curve()---->spline() --- src/shape/custom_shapes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 0b189092b2..ef9a42568e 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -1680,7 +1680,7 @@ function customShapes(p5, fn) { * ``` * * The code snippet above would only draw the curve between the anchor points, - * similar to the curve() function. The segments + * similar to the spline() function. The segments * between the control and anchor points can be drawn by calling * `splineVertex()` with the coordinates of the control points: * From 7da91e311599c6a02d8191b07ab51c4016a8f884 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sat, 23 Aug 2025 06:25:02 +0530 Subject: [PATCH 21/32] Removing control/anchor point usage. --- src/shape/custom_shapes.js | 73 ++++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 35 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index ef9a42568e..6ce63672db 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -1657,37 +1657,40 @@ function customShapes(p5, fn) { * 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: * + * * ```js * beginShape(); * - * // Add the first control point. + * // Add the first point. * splineVertex(84, 91); * - * // Add the anchor points to draw between. + * // Add the next points in order. * splineVertex(68, 19); * splineVertex(21, 17); * - * // Add the second control point. + * // Add the last point. * splineVertex(32, 91); * * endShape(); * ``` * - * The code snippet above would only draw the curve between the anchor points, - * similar to the spline() function. The segments - * between the control and anchor points can be drawn by calling - * `splineVertex()` with the coordinates of the control points: - * + * + * 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. + * ```js * beginShape(); * - * // Add the first control point and draw a segment to it. + * // Add the first point and draw a segment to it. * splineVertex(84, 91); * splineVertex(84, 91); * @@ -1695,10 +1698,10 @@ function customShapes(p5, fn) { * splineVertex(68, 19); * splineVertex(21, 17); * - * // Add the second control point. + * // Add the second point. * splineVertex(32, 91); * - * // Uncomment the next line to draw the segment to the second control point. + * // Uncomment the next line to draw the segment to the second point. * // splineVertex(32, 91); * * endShape(); @@ -1735,20 +1738,20 @@ function customShapes(p5, fn) { * // Start drawing the shape. * beginShape(); * - * // Add the first control point. + * // Add the first point. * splineVertex(32, 91); * * // Add the anchor points. * splineVertex(21, 17); * splineVertex(68, 19); * - * // Add the second control point. + * // Add the second point. * splineVertex(84, 91); * * // Stop drawing the shape. * endShape(); * - * // Style the anchor and control points. + * // Style the points. * strokeWeight(5); * * // Draw the anchor points in black. @@ -1756,7 +1759,7 @@ function customShapes(p5, fn) { * point(21, 17); * point(68, 19); * - * // Draw the control points in red. + * // Draw the points in red. * stroke(255, 0, 0); * point(32, 91); * point(84, 91); @@ -1782,7 +1785,7 @@ function customShapes(p5, fn) { * // Start drawing the shape. * beginShape(); * - * // Add the first control point and draw a segment to it. + * // Add the first point and draw a segment to it. * splineVertex(32, 91); * splineVertex(32, 91); * @@ -1790,13 +1793,13 @@ function customShapes(p5, fn) { * splineVertex(21, 17); * splineVertex(68, 19); * - * // Add the second control point. + * // Add the second point. * splineVertex(84, 91); * * // Stop drawing the shape. * endShape(); * - * // Style the anchor and control points. + * // Style the points. * strokeWeight(5); * * // Draw the anchor points in black. @@ -1804,7 +1807,7 @@ function customShapes(p5, fn) { * point(21, 17); * point(68, 19); * - * // Draw the control points in red. + * // Draw the points in red. * stroke(255, 0, 0); * point(32, 91); * point(84, 91); @@ -1830,7 +1833,7 @@ function customShapes(p5, fn) { * // Start drawing the shape. * beginShape(); * - * // Add the first control point and draw a segment to it. + * // Add the first point and draw a segment to it. * splineVertex(32, 91); * splineVertex(32, 91); * @@ -1838,14 +1841,14 @@ function customShapes(p5, fn) { * splineVertex(21, 17); * splineVertex(68, 19); * - * // Add the second control point and draw a segment to it. + * // Add the second point and draw a segment to it. * splineVertex(84, 91); * splineVertex(84, 91); * * // Stop drawing the shape. * endShape(); * - * // Style the anchor and control points. + * // Style the points. * strokeWeight(5); * * // Draw the anchor points in black. @@ -1853,7 +1856,7 @@ function customShapes(p5, fn) { * point(21, 17); * point(68, 19); * - * // Draw the control points in red. + * // Draw the points in red. * stroke(255, 0, 0); * point(32, 91); * point(84, 91); @@ -1893,7 +1896,7 @@ function customShapes(p5, fn) { * // Start drawing the shape. * beginShape(); * - * // Add the first control point and draw a segment to it. + * // Add the first point and draw a segment to it. * splineVertex(x1, y1); * splineVertex(x1, y1); * @@ -1901,14 +1904,14 @@ function customShapes(p5, fn) { * splineVertex(21, 17); * splineVertex(68, 19); * - * // Add the second control point and draw a segment to it. + * // Add the second point and draw a segment to it. * splineVertex(84, 91); * splineVertex(84, 91); * * // Stop drawing the shape. * endShape(); * - * // Style the anchor and control points. + * // Style the anchor and points. * strokeWeight(5); * * // Draw the anchor points in black. @@ -1916,25 +1919,25 @@ function customShapes(p5, fn) { * point(21, 17); * point(68, 19); * - * // Draw the control points in red. + * // Draw the points in red. * stroke(255, 0, 0); * point(x1, y1); * point(84, 91); * } * - * // 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; @@ -1954,7 +1957,7 @@ function customShapes(p5, fn) { * // Start drawing the shape. * beginShape(); * - * // Add the first control point and draw a segment to it. + * // Add the first point and draw a segment to it. * splineVertex(32, 91); * splineVertex(32, 91); * @@ -1962,7 +1965,7 @@ function customShapes(p5, fn) { * splineVertex(21, 17); * splineVertex(68, 19); * - * // Add the second control point. + * // Add the second point. * splineVertex(84, 91); * splineVertex(84, 91); * From 177e9b58c2661b69776d79e7e7183e3519d5e18f Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sat, 23 Aug 2025 06:26:56 +0530 Subject: [PATCH 22/32] updating anchor/control points wordings in curve.js --- src/shape/curves.js | 154 +++++++++++++++++++++----------------------- 1 file changed, 72 insertions(+), 82 deletions(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index b5b31dd1ed..9fce36cc47 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -12,7 +12,7 @@ function curves(p5, fn){ * 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. + * spline() function. * * The first two parameters, `x1` and `y1`, set the first anchor point. The * first anchor point is where the curve starts. @@ -462,35 +462,27 @@ function curves(p5, fn){ /** * 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. + * 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 simply as + * “points on the 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. * * @method spline - * @param {Number} x1 x-coordinate of the first control point. - * @param {Number} y1 y-coordinate of the first control point. - * @param {Number} x2 x-coordinate of the first anchor point. - * @param {Number} y2 y-coordinate of the first anchor point. - * @param {Number} x3 x-coordinate of the second anchor point. - * @param {Number} y3 y-coordinate of the second anchor point. - * @param {Number} x4 x-coordinate of the second control point. - * @param {Number} y4 y-coordinate of the second control point. + * @param {Number} x1 x-coordinate of point p0. + * @param {Number} y1 y-coordinate of point p0. + * @param {Number} x2 x-coordinate of point p1. + * @param {Number} y2 y-coordinate of point p1. + * @param {Number} x3 x-coordinate of point p2. + * @param {Number} y3 y-coordinate of point p2. + * @param {Number} x4 x-coordinate of point p3. + * @param {Number} y4 y-coordinate of point p3. * @chainable * * @example @@ -501,7 +493,7 @@ function curves(p5, fn){ * * background(200); * - * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. + * // 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. @@ -510,18 +502,18 @@ function curves(p5, fn){ * 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); @@ -550,7 +542,7 @@ function curves(p5, fn){ * function draw() { * background(200); * - * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. + * // 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. @@ -559,7 +551,7 @@ function curves(p5, fn){ * 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); @@ -570,25 +562,25 @@ function curves(p5, fn){ * 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; @@ -605,7 +597,7 @@ function curves(p5, fn){ * * background('skyblue'); * - * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. + * // 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. @@ -631,7 +623,7 @@ function curves(p5, fn){ * function draw() { * background('skyblue'); * - * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. + * // 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. @@ -652,16 +644,16 @@ function curves(p5, fn){ * @method spline * @param {Number} x1 * @param {Number} y1 - * @param {Number} z1 z-coordinate of the first control point. + * @param {Number} z1 z-coordinate of point p0. * @param {Number} x2 * @param {Number} y2 - * @param {Number} z2 z-coordinate of the first anchor point. + * @param {Number} z2 z-coordinate of point p1. * @param {Number} x3 * @param {Number} y3 - * @param {Number} z3 z-coordinate of the second anchor point. + * @param {Number} z3 z-coordinate of point p2. * @param {Number} x4 * @param {Number} y4 - * @param {Number} z4 z-coordinate of the second control point. + * @param {Number} z4 z-coordinate of point p3. * @chainable */ fn.spline = function(...args) { @@ -676,30 +668,30 @@ function curves(p5, fn){ /** * 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 + * `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 + * 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 the first control point. + * The first parameter, `a`, is the coordinate of point p0. * - * The second and third parameters, `b` and `c`, are the coordinates of the - * anchor points. + * The second and third parameters, `b` and `c`, are the coordinates of + * points p1 and p2. * - * The fourth parameter, `d`, is the coordinate of the last control point. + * The fourth parameter, `d`, is the coordinate of point p3. * - * 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 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. * * @method splinePoint - * @param {Number} a coordinate of first control point. - * @param {Number} b coordinate of first anchor point. - * @param {Number} c coordinate of second anchor point. - * @param {Number} d coordinate of second control point. + * @param {Number} a coordinate of point p0. + * @param {Number} b coordinate of point p1. + * @param {Number} c coordinate of point p2. + * @param {Number} d coordinate of point p3. * @param {Number} t amount to interpolate between 0 and 1. * @return {Number} coordinate of a point on the curve. * @@ -710,11 +702,11 @@ function curves(p5, fn){ * createCanvas(100, 100); * * background(200); - * - * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. + * + * // Exclude the ends-skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. * splineProperty('ends', EXCLUDE); - * - * // 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; @@ -761,11 +753,11 @@ function curves(p5, fn){ * * function draw() { * background(200); - * - * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. + * + * // Exclude the ends-skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. * splineProperty('ends', EXCLUDE); - * - * // 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; @@ -791,6 +783,7 @@ function curves(p5, fn){ * * */ + fn.splinePoint = function(a, b, c, d, t) { const s = this._renderer.states.splineProperties.tightness, t3 = t * t * t, @@ -808,30 +801,27 @@ function curves(p5, fn){ * 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. + * `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 first parameter, `a`, is the coordinate of the first control point. + * The second and third parameters, `b` and `c`, are the coordinates of + * points p1 and p2. * - * The second and third parameters, `b` and `c`, are the coordinates of the - * anchor points. + * The fourth parameter, `d`, is the coordinate of point p3. * - * 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 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. * * @method splineTangent - * @param {Number} a coordinate of first control point. - * @param {Number} b coordinate of first anchor point. - * @param {Number} c coordinate of second anchor point. - * @param {Number} d coordinate of second control point. + * @param {Number} a coordinate of point p0. + * @param {Number} b coordinate of point p1. + * @param {Number} c coordinate of point p2. + * @param {Number} d coordinate of point p3. * @param {Number} t amount to interpolate between 0 and 1. * @return {Number} coordinate of a point on the tangent line. * @@ -843,10 +833,10 @@ function curves(p5, fn){ * * background(200); * - * // Exclude the ends and skip the outer spans (p0->p1 and p2->p3) so only the middle span (p1->p2) is drawn. + * // Exclude the ends—skip the outer spans (p0→p1 and p2→p3) so only the middle span (p1→p2) is drawn. * splineProperty('ends', EXCLUDE); * - * // 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; From de27aa26855fb178d34a69ec528792499e18df2d Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 24 Aug 2025 03:00:40 +0530 Subject: [PATCH 23/32] fix: removing unnecessary points. --- src/shape/custom_shapes.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 6ce63672db..5617bb8f4f 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2117,11 +2117,9 @@ function customShapes(p5, fn) { * noFill(); * beginShape(); * splineVertex(60, 76); - * splineVertex(60, 76); * splineVertex(133, 74); * splineVertex(133, 111); * splineVertex(75, 115); - * splineVertex(75, 115); * endShape(); * } * From 6be95e564e2cfb40cc818088a2d922f259f56ef3 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 24 Aug 2025 06:19:36 +0530 Subject: [PATCH 24/32] Updating more docs. --- src/shape/custom_shapes.js | 460 +++++++++++++++---------------------- 1 file changed, 183 insertions(+), 277 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 5617bb8f4f..2c9b475484 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -1647,13 +1647,16 @@ function customShapes(p5, fn) { }; + // TODO (add image of how the curves looks like). + /** * Connects points with a smooth curve (a spline). * - * `splineVertex()` adds a curved segment to custom shapes. The spline curves - * it creates are defined like those made by the - * spline() function. `splineVertex()` must be called - * between the beginShape() and + * `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 @@ -1663,22 +1666,41 @@ function customShapes(p5, fn) { * 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. + * + * * ```js * beginShape(); * * // Add the first point. - * splineVertex(84, 91); + * splineVertex(25, 80); * - * // Add the next points in order. - * splineVertex(68, 19); - * splineVertex(21, 17); + * // Add the second point. + * splineVertex(20, 30); * * // Add the last point. - * splineVertex(32, 91); + * splineVertex(85, 60); * * endShape(); * ``` - * + * + * + * Passing in `CLOSE` to `endShape()` closes the spline smoothly. + * ```js + * 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 @@ -1686,31 +1708,7 @@ function customShapes(p5, fn) { * 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. - - * ```js - * beginShape(); - * - * // Add the first point and draw a segment to it. - * splineVertex(84, 91); - * splineVertex(84, 91); - * - * // Add the anchor points to draw between. - * splineVertex(68, 19); - * splineVertex(21, 17); - * - * // Add the second point. - * splineVertex(32, 91); - * - * // Uncomment the next line to draw the segment to the second 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 * `splineVertex()` has three arguments because each point has x-, y-, and * z-coordinates. By default, the vertex’s z-coordinate is set to 0. @@ -1728,46 +1726,29 @@ function customShapes(p5, fn) { * * function setup() { * createCanvas(100, 100); - * - * background(200); - * - * // Style the shape. + * + * background(220); * noFill(); * strokeWeight(1); - * - * // Start drawing the shape. + * * beginShape(); - * - * // Add the first point. - * splineVertex(32, 91); - * - * // Add the anchor points. - * splineVertex(21, 17); - * splineVertex(68, 19); - * - * // Add the second point. - * splineVertex(84, 91); - * - * // Stop drawing the shape. + * splineVertex(25, 80); + * splineVertex(20, 30); + * splineVertex(85, 60); * endShape(); - * - * // Style the points. + * * strokeWeight(5); - * - * // Draw the anchor points in black. * stroke(0); - * point(21, 17); - * point(68, 19); - * - * // Draw the points in red. - * stroke(255, 0, 0); - * point(32, 91); - * point(84, 91); - * + * + * point(25, 80); + * point(20, 30); + * point(85, 60); + * * describe( - * 'A black curve drawn on a gray background. The curve has black dots at its ends. Two red dots appear near the bottom of the canvas.' + * 'On a gray background, a black spline passes through three marked points.' * ); * } + * * * * @@ -1775,204 +1756,63 @@ function customShapes(p5, fn) { * * function setup() { * createCanvas(100, 100); + * background(220); * - * background(200); - * - * // Style the shape. - * noFill(); - * strokeWeight(1); - * - * // Start drawing the shape. * beginShape(); - * - * // Add the first point and draw a segment to it. - * splineVertex(32, 91); - * splineVertex(32, 91); - * - * // Add the anchor points. - * splineVertex(21, 17); - * splineVertex(68, 19); - * - * // Add the second point. - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * // Style the points. - * strokeWeight(5); - * - * // Draw the anchor points in black. - * stroke(0); - * point(21, 17); - * point(68, 19); - * - * // Draw the points in red. - * stroke(255, 0, 0); - * point(32, 91); - * point(84, 91); + * splineVertex(25, 80); + * splineVertex(20, 30); + * splineVertex(85, 60); + * endShape(CLOSE); * * describe( - * 'A black curve drawn on a gray background. The curve passes through one red dot and two black dots. Another red dot appears near the bottom of the canvas.' + * 'On a gray background, a closed black spline with a white interior forms a triangular shape with smooth corners.' * ); * } + * * * * *
* - * function setup() { - * createCanvas(100, 100); - * - * background(200); + * let ringInnerRadius, ringWidth; + * let radius, dRadius; + * let theta, dTheta; + * let time, dTime; + * let vertexCount, unit, offset; * - * // Style the shape. - * noFill(); - * strokeWeight(1); - * - * // Start drawing the shape. - * beginShape(); - * - * // Add the first point and draw a segment to it. - * splineVertex(32, 91); - * splineVertex(32, 91); - * - * // Add the anchor points. - * splineVertex(21, 17); - * splineVertex(68, 19); - * - * // Add the second point and draw a segment to it. - * splineVertex(84, 91); - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * // Style the points. - * strokeWeight(5); - * - * // Draw the anchor points in black. - * stroke(0); - * point(21, 17); - * point(68, 19); - * - * // Draw the points in red. - * stroke(255, 0, 0); - * point(32, 91); - * point(84, 91); - * - * describe( - * 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.' - * ); - * } - * - *
+ * function setup() { + * createCanvas(400, 400); * - *
- * - * // Click the mouse near the red dot in the bottom-left corner - * // and drag to change the curve's shape. + * vertexCount = 15; + * unit = createVector(1, 0); + * dTheta = TAU / vertexCount; + * dTime = 0.004; * - * let x1 = 32; - * let y1 = 91; - * let isChanging = false; + * ringInnerRadius = 25; + * ringWidth = 5 * ringInnerRadius; * - * function setup() { - * createCanvas(100, 100); + * offset = width; * * describe( - * 'A black U curve drawn upside down on a gray background. The curve passes from one red dot through two black dots and ends at another red dot.' + * 'A white blob with a black outline changes its shape over time.' * ); * } * * function draw() { - * background(200); + * background(220); + * strokeWeight(2); + * translate(width / 2, height / 2); * - * // Style the shape. - * noFill(); - * stroke(0); - * strokeWeight(1); + * time = dTime * frameCount; * - * // Start drawing the shape. * beginShape(); - * - * // Add the first point and draw a segment to it. - * splineVertex(x1, y1); - * splineVertex(x1, y1); - * - * // Add the anchor points. - * splineVertex(21, 17); - * splineVertex(68, 19); - * - * // Add the second point and draw a segment to it. - * splineVertex(84, 91); - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * // Style the anchor and points. - * strokeWeight(5); - * - * // Draw the anchor points in black. - * stroke(0); - * point(21, 17); - * point(68, 19); - * - * // Draw the points in red. - * stroke(255, 0, 0); - * point(x1, y1); - * point(84, 91); - * } - * - * // Start changing the first point if the user clicks near it. - * function mousePressed() { - * if (dist(mouseX, mouseY, x1, y1) < 20) { - * isChanging = true; + * for (let i = 0; i < vertexCount; i++) { + * unit.rotate(dTheta); + * dRadius = noise(offset + unit.x, offset + unit.y, time) * ringWidth; + * radius = ringInnerRadius + dRadius; + * splineVertex(radius * unit.x, radius * unit.y); * } - * } - * - * // Stop changing the first point when the user releases the mouse. - * function mouseReleased() { - * isChanging = false; - * } - * - * // Update the first point while the user drags the mouse. - * function mouseDragged() { - * if (isChanging === true) { - * x1 = mouseX; - * y1 = mouseY; - * } - * } - * - *
- * - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Start drawing the shape. - * beginShape(); - * - * // Add the first point and draw a segment to it. - * splineVertex(32, 91); - * splineVertex(32, 91); - * - * // Add the anchor points. - * splineVertex(21, 17); - * splineVertex(68, 19); - * - * // Add the second point. - * splineVertex(84, 91); - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * describe('A ghost shape drawn in white on a gray background.'); + * endShape(CLOSE); * } * *
@@ -2061,35 +1901,79 @@ function customShapes(p5, fn) { }; /** - * Sets the property of a spline. + * 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: * - * For example, set tightness, - * To set tightness, use `splineProperty('tightness', t)`, + * // TODO: add images. + * + * ```js + * splineProperty('ends', INCLUDE); + * 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: + * + * ```js + * 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: * - * Spline curves behave like a cable threaded through a - * set of vertices (points). The tightness parameter controls - * how closely that cable is attached to the vertices. By default, - * the value of `tightness (t)` is 0, which produces a smooth - * spline. Setting `t = 1` (for example, `splineProperty('tightness', 1)`) - * connects the vertices with straight line segments. - * Values between 0 and 1 make the curve follow the vertices more tightly. - * Negative values loosen the curve and create rounder bulges whereas values - * greater than 1 can create sharper corners or slight overshoot. In - * practice, values in the range `–5 to 5` deform the curve while keeping - * it recognizable. + * ```js + * splineProperty('tightness', -5) + * stroke(0); + * strokeWeight(2); + * spline(25, 46, 93, 44, 93, 81, 35, 85); + * ``` * - * 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. + * Here's the example showing positive value of tightness, + * which makes the curve tighter and more angular: * - * Set `splineProperty('ends', EXCLUDE)` to draw only the middle - * segment of a spline with four points. For example, with points - * `(a,b)`, `(c,d)`, `(e,f)`, `(g,h)` the call `spline(a,b, c,d, e,f, g,h)` - * will render only the segment from `(c,d)` to `(e,f)`, - * skipping the outer spans `(a,b)->(c,d)` and `(e,f)->(g,h)`. + * ```js + * 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. (TODO: add links.) * * @method splineProperty * @param {String} property @@ -2099,28 +1983,50 @@ function customShapes(p5, fn) { *
* * // Move the mouse left and right to see the curve change. - * + * + * let t; + * * function setup() { - * createCanvas(200, 200); - * describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right'); + * createCanvas(100, 100); + * + * describe('A black spline forms a sideways U shape through + * four points. The spline passes through the points more loosely + * as the mouse moves left of center (negative tightness), and more + * tightly as it moves right of center (positive tightness). The + * tightness is displayed at the bottom.'); * } - * + * * function draw() { - * background(200); - * - * // Set the curve's tightness using the mouse. - * let t = map(mouseX, 0, 100, -5, 5, true); + * background(240); + * + * t = map(mouseX, 0, width, -5, 5, true); * splineProperty('tightness', t); - * // 'ends' defaults to INCLUDE; uncomment to see the effect: - * // splineProperty('ends', EXCLUDE); - * // Draw the curve. + * * noFill(); + * stroke(0); + * strokeWeight(2); + * * beginShape(); - * splineVertex(60, 76); - * splineVertex(133, 74); - * splineVertex(133, 111); - * splineVertex(75, 115); + * splineVertex(10, 26); + * splineVertex(10, 26); + * splineVertex(83, 24); + * splineVertex(83, 61); + * splineVertex(25, 65); + * splineVertex(25, 65); * endShape(); + * + * push(); + * strokeWeight(5); + * point(10, 26); + * point(83, 24); + * point(83, 61); + * point(25, 65); + * pop(); + * + * fill(0); + * noStroke(); + * textSize(10); + * text(`tightness: ${round(t, 1)}`, 15, 90); * } * *
From 22be15224a5eea148c8153fef60b167fa21ffa33 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 24 Aug 2025 06:20:34 +0530 Subject: [PATCH 25/32] adding some examples. --- src/shape/curves.js | 74 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 66 insertions(+), 8 deletions(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index 9fce36cc47..e5483513d7 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -486,6 +486,29 @@ function curves(p5, fn){ * @chainable * * @example + * + *
+ * + * * 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'); + * } + * + *
+ * *
* * function setup() { @@ -703,8 +726,6 @@ function curves(p5, fn){ * * 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); * * // Set the coordinates for the curve's four points (p0, p1, p2, p3). * let x1 = 5; @@ -754,9 +775,6 @@ function curves(p5, fn){ * 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); - * * // Set the coordinates for the curve's four points (p0, p1, p2, p3). * let x1 = 5; * let y1 = 26; @@ -828,14 +846,54 @@ function curves(p5, fn){ * @example *
* + * * function setup() { + * createCanvas(220, 160); + * 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); + * } + * + *
+ * + *
+ * * 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); - * * // Set the coordinates for the curve's four points (p0, p1, p2, p3). * let x1 = 5; * let y1 = 26; From a8d97dd84fffe929df3476a343276b2993d792f9 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 24 Aug 2025 06:25:25 +0530 Subject: [PATCH 26/32] fixing lint tests --- src/shape/curves.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index e5483513d7..09fa218028 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -846,7 +846,7 @@ function curves(p5, fn){ * @example *
* - * * function setup() { + * function setup() { * createCanvas(220, 160); * 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.'); * } From 88ebc9c5cb3afca6ae72000b9ad251ec235de2bb Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Sun, 24 Aug 2025 06:27:32 +0530 Subject: [PATCH 27/32] minor fixes --- src/shape/curves.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index 09fa218028..d1123aff9d 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -489,7 +489,7 @@ function curves(p5, fn){ * *
* - * * function setup() { + * function setup() { * createCanvas(200, 200); * background(240); * noFill(); From 3b8f5732f86a94f92851f3d79462a6cea09a30a0 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 25 Aug 2025 09:43:39 +0530 Subject: [PATCH 28/32] some minor fixes. --- src/shape/curves.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index d1123aff9d..2d6da8e04f 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -822,7 +822,7 @@ function curves(p5, fn){ * `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 + * 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. * @@ -847,7 +847,7 @@ function curves(p5, fn){ *
* * function setup() { - * createCanvas(220, 160); + * 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.'); * } * From cf449f4957a34845f91df43d9bd309b407336453 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Mon, 25 Aug 2025 09:44:47 +0530 Subject: [PATCH 29/32] some minor fixes. --- src/shape/custom_shapes.js | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 2c9b475484..ab17bb0e4c 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -1670,6 +1670,7 @@ function customShapes(p5, fn) { * It works the same way with any number of points. * * + * * ```js * beginShape(); * @@ -1685,6 +1686,8 @@ function customShapes(p5, fn) { * endShape(); * ``` * + * + * * * Passing in `CLOSE` to `endShape()` closes the spline smoothly. * ```js @@ -1702,6 +1705,9 @@ function customShapes(p5, fn) { * 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 @@ -1913,13 +1919,11 @@ function customShapes(p5, fn) { * 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 + * `INCLUDE` case will have the spline passing through * all points, like this: * - * // TODO: add images. - * * ```js - * splineProperty('ends', INCLUDE); + * 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); @@ -1928,9 +1932,13 @@ function customShapes(p5, fn) { * point(35, 85); * ``` * + * + * + * * EXCLUDE case will have the spline passing through * the middle points, like this: * + * * ```js * splineProperty('ends', INCLUDE); * spline(25, 46, 93, 44, 93, 81, 35, 85); @@ -1941,6 +1949,8 @@ function customShapes(p5, fn) { * 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, @@ -1971,9 +1981,9 @@ function customShapes(p5, fn) { * spline(25, 46, 93, 44, 93, 81, 35, 85); * ``` * - * In all cases, the splines in p5.js are cardinal splines. + * In all cases, the splines in p5.js are cardinal splines. * When tightness is 0, these splines are often known as - * Catmull-Rom splines. (TODO: add links.) + * Catmull-Rom splines * * @method splineProperty * @param {String} property @@ -1989,11 +1999,6 @@ function customShapes(p5, fn) { * function setup() { * createCanvas(100, 100); * - * describe('A black spline forms a sideways U shape through - * four points. The spline passes through the points more loosely - * as the mouse moves left of center (negative tightness), and more - * tightly as it moves right of center (positive tightness). The - * tightness is displayed at the bottom.'); * } * * function draw() { @@ -2027,6 +2032,7 @@ function customShapes(p5, fn) { * noStroke(); * textSize(10); * text(`tightness: ${round(t, 1)}`, 15, 90); + * describe('A black spline forms a sideways U shape through four points. The spline passes through the points more loosely as the mouse moves left of center (negative tightness), and more tightly as it moves right of center (positive tightness). The tightness is displayed at the bottom.'); * } * *
From 484a636d8af03e3ac44d1e1265be9d9b18df1537 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Wed, 27 Aug 2025 06:38:46 +0530 Subject: [PATCH 30/32] fix: suggestion. --- src/shape/curves.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shape/curves.js b/src/shape/curves.js index 2d6da8e04f..0f8ab0ad8d 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -466,8 +466,8 @@ function curves(p5, fn){ * Spline curves can form shapes and curves that slope gently. They’re like * 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 simply as - * “points on the curve.” If you switch to `ends: EXCLUDE`, p0 and p3 act + * `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 From ff9c657689a4547840e403dad64bd4eaf372bdd6 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Wed, 27 Aug 2025 06:42:02 +0530 Subject: [PATCH 31/32] fix:suggestion. --- src/shape/custom_shapes.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index ab17bb0e4c..ea9df66961 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2013,11 +2013,10 @@ function customShapes(p5, fn) { * * beginShape(); * splineVertex(10, 26); - * splineVertex(10, 26); * splineVertex(83, 24); + * * splineVertex(83, 61); * splineVertex(25, 65); - * splineVertex(25, 65); * endShape(); * * push(); From 241998a381ebb208af76d611182ff1ce63e1dc58 Mon Sep 17 00:00:00 2001 From: Perminder Singh <127239756+perminder-17@users.noreply.github.com> Date: Wed, 27 Aug 2025 06:44:35 +0530 Subject: [PATCH 32/32] Removing TODO. --- src/shape/custom_shapes.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index ea9df66961..68805260f3 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -1647,7 +1647,6 @@ function customShapes(p5, fn) { }; - // TODO (add image of how the curves looks like). /** * Connects points with a smooth curve (a spline).