From 2b9c7f582779ff6e76f73fb4aa7ee33f5a16a0d1 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Fri, 5 Sep 2025 16:27:10 +0530
Subject: [PATCH 1/2] adding examples in curve.js
---
src/shape/curves.js | 104 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 104 insertions(+)
diff --git a/src/shape/curves.js b/src/shape/curves.js
index 0f8ab0ad8d..97d5217876 100644
--- a/src/shape/curves.js
+++ b/src/shape/curves.js
@@ -512,6 +512,48 @@ function curves(p5, fn){
*
*
* function setup() {
+ * createCanvas(200, 200);
+ * background(245);
+ *
+ * // Ensure the curve includes both end spans p0->p1 and p2->p3
+ * splineProperty('ends', INCLUDE);
+ *
+ * // Control / anchor points
+ * const p0 = createVector(30, 160);
+ * const p1 = createVector(60, 40);
+ * const p2 = createVector(140, 40);
+ * const p3 = createVector(170, 160);
+ *
+ * // Draw the spline that passes through ALL four points (INCLUDE)
+ * noFill();
+ * stroke(0);
+ * strokeWeight(2);
+ * spline(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+ *
+ * // Draw markers + labels
+ * fill(255);
+ * stroke(0);
+ * const r = 6;
+ * circle(p0.x, p0.y, r);
+ * circle(p1.x, p1.y, r);
+ * circle(p2.x, p2.y, r);
+ * circle(p3.x, p3.y, r);
+ *
+ * noStroke();
+ * fill(0);
+ * text('p0', p0.x - 14, p0.y + 14);
+ * text('p1', p1.x - 14, p1.y - 8);
+ * text('p2', p2.x + 4, p2.y - 8);
+ * text('p3', p3.x + 4, p3.y + 14);
+ *
+ * describe('A black Catmull-Rom spline passes through p0, p1, p2, p3 with endpoints included.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
* createCanvas(100, 100);
*
* background(200);
@@ -800,6 +842,68 @@ function curves(p5, fn){
* }
*
*
+ *
+ *
+ *
+ * let p0, p1, p2, p3;
+ *
+ * function setup() {
+ * createCanvas(200, 200);
+ * splineProperty('ends', INCLUDE); // make endpoints part of the curve
+ *
+ * // Four points forming a gentle arch
+ * p0 = createVector(30, 160);
+ * p1 = createVector(60, 50);
+ * p2 = createVector(140, 50);
+ * p3 = createVector(170, 160);
+ *
+ * describe('Black spline through p0–p3. A red dot marks the location at parameter t on p1->p2 using splinePoint.');
+ * }
+ *
+ * function draw() {
+ * background(245);
+ *
+ * // Draw the spline for context
+ * noFill();
+ * stroke(0);
+ * strokeWeight(2);
+ * spline(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+ *
+ * // Map mouse X to t in [0, 1] (span p1->p2)
+ * let t = constrain(map(mouseX, 0, width, 0, 1), 0, 1);
+ *
+ * // Evaluate the curve point by axis (splinePoint works one axis at a time)
+ * let x = splinePoint(p0.x, p1.x, p2.x, p3.x, t);
+ * let y = splinePoint(p0.y, p1.y, p2.y, p3.y, t);
+ *
+ * // Marker at the evaluated position
+ * noStroke();
+ * fill('red');
+ * circle(x, y, 8);
+ *
+ * // Draw control/anchor points
+ * stroke(0);
+ * strokeWeight(1);
+ * fill(255);
+ * const r = 6;
+ * circle(p0.x, p0.y, r);
+ * circle(p1.x, p1.y, r);
+ * circle(p2.x, p2.y, r);
+ * circle(p3.x, p3.y, r);
+ *
+ * // Labels + UI hint
+ * noStroke();
+ * fill(20);
+ * textSize(10);
+ * text('p0', p0.x - 12, p0.y + 14);
+ * text('p1', p1.x - 12, p1.y - 8);
+ * text('p2', p2.x + 4, p2.y - 8);
+ * text('p3', p3.x + 4, p3.y + 14);
+ * text('t = ' + nf(t, 1, 2) + ' (p1→p2)', 8, 16);
+ * }
+ *
+ *
+ *
*/
fn.splinePoint = function(a, b, c, d, t) {
From 70d661fd10557afcac7e8eb8b19f48a6c22309f5 Mon Sep 17 00:00:00 2001
From: Perminder Singh <127239756+perminder-17@users.noreply.github.com>
Date: Fri, 5 Sep 2025 16:27:56 +0530
Subject: [PATCH 2/2] adding examples in custom-shapes
---
src/shape/custom_shapes.js | 176 +++++++++++++++++++++++++++++++++++++
1 file changed, 176 insertions(+)
diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js
index 07c54fde7a..8e3b2ea283 100644
--- a/src/shape/custom_shapes.js
+++ b/src/shape/custom_shapes.js
@@ -1821,6 +1821,93 @@ function customShapes(p5, fn) {
* }
*
*
+ *
+ * @example
+ *
+ *
+ * let vertexA;
+ * let vertexB;
+ * let vertexC;
+ * let vertexD;
+ * let vertexE;
+ * let vertexF;
+ *
+ * let markerRadius;
+ *
+ * let vectorAB;
+ * let vectorFE;
+ *
+ * let endOfTangentB;
+ * let endOfTangentE;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Initialize variables
+ * // Adjusting vertices A and F affects the slopes at B and E
+ *
+ * vertexA = createVector(35, 85);
+ * vertexB = createVector(25, 70);
+ * vertexC = createVector(30, 30);
+ * vertexD = createVector(70, 30);
+ * vertexE = createVector(75, 70);
+ * vertexF = createVector(65, 85);
+ *
+ * markerRadius = 4;
+ *
+ * vectorAB = p5.Vector.sub(vertexB, vertexA);
+ * vectorFE = p5.Vector.sub(vertexE, vertexF);
+ *
+ * endOfTangentB = p5.Vector.add(vertexC, vectorAB);
+ * endOfTangentE = p5.Vector.add(vertexD, vectorFE);
+ *
+ * splineProperty(`ends`, EXCLUDE);
+ *
+ * // Draw figure
+ *
+ * background(220);
+ *
+ * noFill();
+ *
+ * beginShape();
+ * splineVertex(vertexA.x, vertexA.y);
+ * splineVertex(vertexB.x, vertexB.y);
+ * splineVertex(vertexC.x, vertexC.y);
+ * splineVertex(vertexD.x, vertexD.y);
+ * splineVertex(vertexE.x, vertexE.y);
+ * splineVertex(vertexF.x, vertexF.y);
+ * endShape();
+ *
+ * stroke('red');
+ * line(vertexA.x, vertexA.y, vertexC.x, vertexC.y);
+ * line(vertexB.x, vertexB.y, endOfTangentB.x, endOfTangentB.y);
+ *
+ * stroke('blue');
+ * line(vertexD.x, vertexD.y, vertexF.x, vertexF.y);
+ * line(vertexE.x, vertexE.y, endOfTangentE.x, endOfTangentE.y);
+ *
+ * fill('white');
+ * stroke('black');
+ * circle(vertexA.x, vertexA.y, markerRadius);
+ * circle(vertexB.x, vertexB.y, markerRadius);
+ * circle(vertexC.x, vertexC.y, markerRadius);
+ * circle(vertexD.x, vertexD.y, markerRadius);
+ * circle(vertexE.x, vertexE.y, markerRadius);
+ * circle(vertexF.x, vertexF.y, markerRadius);
+ *
+ * fill('black');
+ * noStroke();
+ * text('A', vertexA.x - 15, vertexA.y + 5);
+ * text('B', vertexB.x - 15, vertexB.y + 5);
+ * text('C', vertexC.x - 5, vertexC.y - 5);
+ * text('D', vertexD.x - 5, vertexD.y - 5);
+ * text('E', vertexE.x + 5, vertexE.y + 5);
+ * text('F', vertexF.x + 5, vertexF.y + 5);
+ *
+ * describe('On a gray background, a black spline passes through vertices A, B, C, D, E, and F, shown as white circles. A red line segment joining vertices A and C has the same slope as the red tangent segment at B. Similarly, the blue line segment joining vertices D and F has the same slope as the blue tangent at E.');
+ * }
+ *
+ *
*/
/**
@@ -2096,6 +2183,95 @@ function customShapes(p5, fn) {
* }
*
*
+ *
+ * @example
+ *
+ *
+ *
+ * let vertexA;
+ * let vertexB;
+ * let vertexC;
+ * let vertexD;
+ * let vertexE;
+ * let vertexF;
+ *
+ * let markerRadius;
+ *
+ * let vectorAB;
+ * let vectorFE;
+ *
+ * let endOfTangentB;
+ * let endOfTangentE;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Initialize variables
+ * // Adjusting vertices A and F affects the slopes at B and E
+ *
+ * vertexA = createVector(35, 85);
+ * vertexB = createVector(25, 70);
+ * vertexC = createVector(30, 30);
+ * vertexD = createVector(70, 30);
+ * vertexE = createVector(75, 70);
+ * vertexF = createVector(65, 85);
+ *
+ * markerRadius = 4;
+ *
+ * vectorAB = p5.Vector.sub(vertexB, vertexA);
+ * vectorFE = p5.Vector.sub(vertexE, vertexF);
+ *
+ * endOfTangentB = p5.Vector.add(vertexC, vectorAB);
+ * endOfTangentE = p5.Vector.add(vertexD, vectorFE);
+ *
+ * splineProperty(`ends`, EXCLUDE);
+ *
+ * // Draw figure
+ *
+ * background(220);
+ *
+ * noFill();
+ *
+ * beginShape();
+ * splineVertex(vertexA.x, vertexA.y);
+ * splineVertex(vertexB.x, vertexB.y);
+ * splineVertex(vertexC.x, vertexC.y);
+ * splineVertex(vertexD.x, vertexD.y);
+ * splineVertex(vertexE.x, vertexE.y);
+ * splineVertex(vertexF.x, vertexF.y);
+ * endShape();
+ *
+ * stroke('red');
+ * line(vertexA.x, vertexA.y, vertexC.x, vertexC.y);
+ * line(vertexB.x, vertexB.y, endOfTangentB.x, endOfTangentB.y);
+ *
+ * stroke('blue');
+ * line(vertexD.x, vertexD.y, vertexF.x, vertexF.y);
+ * line(vertexE.x, vertexE.y, endOfTangentE.x, endOfTangentE.y);
+ *
+ * fill('white');
+ * stroke('black');
+ * circle(vertexA.x, vertexA.y, markerRadius);
+ * circle(vertexB.x, vertexB.y, markerRadius);
+ * circle(vertexC.x, vertexC.y, markerRadius);
+ * circle(vertexD.x, vertexD.y, markerRadius);
+ * circle(vertexE.x, vertexE.y, markerRadius);
+ * circle(vertexF.x, vertexF.y, markerRadius);
+ *
+ * fill('black');
+ * noStroke();
+ * text('A', vertexA.x - 15, vertexA.y + 5);
+ * text('B', vertexB.x - 15, vertexB.y + 5);
+ * text('C', vertexC.x - 5, vertexC.y - 5);
+ * text('D', vertexD.x - 5, vertexD.y - 5);
+ * text('E', vertexE.x + 5, vertexE.y + 5);
+ * text('F', vertexF.x + 5, vertexF.y + 5);
+ *
+ * describe('On a gray background, a black spline passes through vertices A, B, C, D, E, and F, shown as white circles. A red line segment joining vertices A and C has the same slope as the red tangent segment at B. Similarly, the blue line segment joining vertices D and F has the same slope as the blue tangent at E.');
+ * }
+ *
+ *
+ *
*/
/**