Merge pull request #8070 from perminder-17/spline-work-2.0

Adding some examples for shapes.

Author: perminder-17

src/shape/curves.js

@@ -515,6 +515,48 @@ function curves(p5, fn){
    * <div>
    * <code>
    * 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.');
+   * }
+   * </code>
+   * </div>
+   * 
+   * <div>
+   * <code>
+   * function setup() {
    *   createCanvas(100, 100);
    *
    *   background(200);
@@ -806,6 +848,68 @@ function curves(p5, fn){
    * }
    * </code>
    * </div>
+   * 
+   * <div>
+   * <code>
+   * 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);
+   * }
+   * </code>
+   * </div>
+   * 
    */
 
   fn.splinePoint = function(a, b, c, d, t) {

src/shape/custom_shapes.js

@@ -1823,6 +1823,93 @@ function customShapes(p5, fn) {
    * }
    * </code>
    * </div>
+   * 
+   * @example
+   * <div>
+   * <code>
+   * 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.');
+   * }
+   * </code>
+   * </div>
    */
 
   /**
@@ -2098,6 +2185,95 @@ function customShapes(p5, fn) {
    * }
    * </code>
    * </div>
+   * 
+   * @example
+   * 
+   * <div>
+   * <code>
+   * 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.');
+   * }
+   * </code>
+   * </div>
+   * 
    */
 
   /**