From dbdb30aeeef89007b61f743dea00af2d357c9ac7 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 15:05:50 +0200 Subject: [PATCH 01/25] Rename curveVertex --- src/shape/vertex.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/shape/vertex.js b/src/shape/vertex.js index e8e32fe072..997ec8e1ea 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -1,6 +1,6 @@ /** * @module Shape - * @submodule Vertex + * @submodule Custom Shapes * @for p5 * @requires core * @requires constants @@ -728,7 +728,7 @@ function vertex(p5, fn){ * Note: `splineVertex()` won’t work when an argument is passed to * beginShape(). * - * @method curveVertex + * @method splineVertex * @param {Number} x x-coordinate of the vertex * @param {Number} y y-coordinate of the vertex * @chainable @@ -989,7 +989,7 @@ function vertex(p5, fn){ */ /** - * @method curveVertex + * @method splineVertex * @param {Number} x * @param {Number} y * @param {Number} [z] z-coordinate of the vertex. @@ -1041,8 +1041,8 @@ function vertex(p5, fn){ * * */ - fn.curveVertex = function(...args) { - // p5._validateParameters('curveVertex', args); + fn.splineVertex = function(...args) { + // p5._validateParameters('splineVertex', args); this._renderer.splineVertex(...args); return this; }; @@ -1071,7 +1071,7 @@ function vertex(p5, fn){ * built by calling vertex(), * bezierVertex(), * quadraticVertex(), and/or - * splineVertex(). Calling + * splineVertex(). Calling * `endShape()` will stop adding vertices to the * shape. Each shape will be outlined with the current stroke color and filled * with the current fill color. From 3554eb3ab764f68ad0cd120d5f7cb5c26ec68e9a Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 15:32:41 +0200 Subject: [PATCH 02/25] Added bezierVertex docs --- src/shape/vertex.js | 84 ++++++++++++++++++++++++++++----------------- 1 file changed, 52 insertions(+), 32 deletions(-) diff --git a/src/shape/vertex.js b/src/shape/vertex.js index 997ec8e1ea..0015f7063e 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -30,7 +30,6 @@ function vertex(p5, fn){ * * After calling `beginShape()`, shapes can be built by calling * vertex(), - * bezierVertex(), * bezierVertex(), and/or * splineVertex(). Calling * endShape() will stop adding vertices to the @@ -410,20 +409,17 @@ function vertex(p5, fn){ * bezier() function. `bezierVertex()` must be * called between the * beginShape() and - * endShape() functions. The curved segment uses - * the previous vertex as the first anchor point, so there must be at least - * one call to vertex() before `bezierVertex()` can - * be used. - * - * The first four parameters, `x2`, `y2`, `x3`, and `y3`, set the curve’s two - * control points. The control points "pull" the curve towards them. - * - * The fifth and sixth parameters, `x4`, and `y4`, set the last anchor point. - * The last anchor point is where the curve ends. - * - * Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of - * `bezierVertex()` has eight arguments because each point has x-, y-, and - * z-coordinates. + * endShape() functions. There must be at least + * one call to bezierVertex(), before + * a number of `bezierVertex()` calls that is a multiple of the parameter + * set by bezierOrder(...) (default 3). + * + * Each curve of order 3 requires three calls to `bezierVertext`, so + * 2 curves would need 7 calls to `bezierVertex()`: + * (1 one initial anchor point, two sets of 3 curves describing the curves) + * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2. + * + * Bézier curves can also be drawn in 3D using WebGL mode. * * Note: `bezierVertex()` won’t work when an argument is passed to * beginShape(). @@ -449,10 +445,12 @@ function vertex(p5, fn){ * beginShape(); * * // Add the first anchor point. - * vertex(30, 20); + * bezierVertex(30, 20); * * // Add the Bézier vertex. - * bezierVertex(80, 0, 80, 75, 30, 75); + * bezierVertex(80, 0); + * bezierVertex(80, 75); + * bezierVertex(30, 75); * * // Stop drawing the shape. * endShape(); @@ -489,10 +487,12 @@ function vertex(p5, fn){ * beginShape(); * * // Add the first anchor point. - * vertex(30, 20); + * bezierVertex(30, 20); * * // Add the Bézier vertex. - * bezierVertex(80, 0, 80, 75, 30, 75); + * bezierVertex(80, 0); + * bezierVertex(80, 75); + * bezierVertex(30, 75); * * // Stop drawing the shape. * endShape(); @@ -549,10 +549,12 @@ function vertex(p5, fn){ * beginShape(); * * // Add the first anchor point. - * vertex(30, 20); + * bezierVertex(30, 20); * * // Add the Bézier vertex. - * bezierVertex(x2, y2, 80, 75, 30, 75); + * bezierVertex(x2, y2); + * bezierVertex(80, 75); + * bezierVertex(30, 75); * * // Stop drawing the shape. * endShape(); @@ -596,11 +598,16 @@ function vertex(p5, fn){ * beginShape(); * * // Add the first anchor point. - * vertex(30, 20); + * bezierVertex(30, 20); * * // Add the Bézier vertices. - * bezierVertex(80, 0, 80, 75, 30, 75); - * bezierVertex(50, 80, 60, 25, 30, 20); + * bezierVertex(80, 0); + * bezierVertex(80, 75); + * bezierVertex(30, 75); + * + * bezierVertex(50, 80); + * bezierVertex(60, 25); + * bezierVertex(30, 20); * * // Stop drawing the shape. * endShape(); @@ -632,16 +639,30 @@ function vertex(p5, fn){ * * // Draw the first moon. * beginShape(); - * vertex(-20, -30, 0); - * bezierVertex(30, -50, 0, 30, 25, 0, -20, 25, 0); - * bezierVertex(0, 30, 0, 10, -25, 0, -20, -30, 0); + * bezierVertex(-20, -30, 0); + * + * bezierVertex(30, -50, 0); + * bezierVertex(30, 25, 0); + * bezierVertex(-20, 25, 0); + * + * bezierVertex(0, 30, 0); + * bezierVertex(10, -25, 0); + * bezierVertex(-20, -30, 0); * endShape(); * * // Draw the second moon. * beginShape(); - * vertex(-20, -30, -20); - * bezierVertex(30, -50, -20, 30, 25, -20, -20, 25, -20); - * bezierVertex(0, 30, -20, 10, -25, -20, -20, -30, -20); + * + * bezierVertex(-20, -30, -20); + * + * bezierVertex(30, -50, -20); + * bezierVertex(30, 25, -20); + * bezierVertex(-20, 25, -20); + * + * bezierVertex(0, 30, -20); + * bezierVertex(10, -25, -20); + * bezierVertex(-20, -30, -20); + * * endShape(); * } * @@ -1069,8 +1090,7 @@ function vertex(p5, fn){ * * After calling beginShape(), shapes can be * built by calling vertex(), - * bezierVertex(), - * quadraticVertex(), and/or + * bezierVertex() and/or * splineVertex(). Calling * `endShape()` will stop adding vertices to the * shape. Each shape will be outlined with the current stroke color and filled From e1173ee4987e06409a8f9ce6618bb202c500b8e8 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 15:40:19 +0200 Subject: [PATCH 03/25] Update curveVertex unit test --- test/unit/core/vertex.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/unit/core/vertex.js b/test/unit/core/vertex.js index a9b0425639..690a6dc682 100644 --- a/test/unit/core/vertex.js +++ b/test/unit/core/vertex.js @@ -33,10 +33,10 @@ suite('Vertex', function() { }); }); - suite('p5.prototype.curveVertex', function() { + suite('p5.prototype.splineVertex', function() { test('should be a function', function() { - assert.ok(myp5.curveVertex); - assert.typeOf(myp5.curveVertex, 'function'); + assert.ok(myp5.splineVertex); + assert.typeOf(myp5.splineVertex, 'function'); }); }); From bc5e026d02771c2851ba7374cc5f3a8d51941569 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 15:49:20 +0200 Subject: [PATCH 04/25] More general description of anchor requirement in bezierVertex --- src/shape/vertex.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/shape/vertex.js b/src/shape/vertex.js index 0015f7063e..ca32dc94a7 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -409,10 +409,16 @@ function vertex(p5, fn){ * bezier() function. `bezierVertex()` must be * called between the * beginShape() and - * endShape() functions. There must be at least - * one call to bezierVertex(), before + * endShape() functions. + * Bézier need a starting point. Building a shape + * only wiht Bézier curves needs one initial + * call to bezierVertex(), before * a number of `bezierVertex()` calls that is a multiple of the parameter * set by bezierOrder(...) (default 3). + * But shapes can mix different types of vertices, so if there + * are some previous vertizes, then the initial anchor is not needed, + * only the multiples of 3 (or the Bézier order) calls to + * `bezierVertext` for each curve. * * Each curve of order 3 requires three calls to `bezierVertext`, so * 2 curves would need 7 calls to `bezierVertex()`: From a9c19d826d860cea70d7ccfa6db8139b59f9ce1c Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 16:05:49 +0200 Subject: [PATCH 05/25] Added bezierOrder docs --- src/shape/custom_shapes.js | 65 +++++++++++++++++++++++++++++++++++--- 1 file changed, 60 insertions(+), 5 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 9eea6efb68..6562df4972 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -825,12 +825,67 @@ class Shape { return name + 'Src'; } - /* - Note: Internally, #bezierOrder is stored as an array, in order to accommodate - primitives including Bezier segments, Bezier triangles, and Bezier quads. For example, - a segment may have #bezierOrder [m], whereas a quad may have #bezierOrder [m, n]. - */ + /** + * Influences the shape of the Bézier curve segment in a custom shape. + * By default, this is 3; the other possible parameter is 2. This + * results in quadratic Bézier curves. + * + * `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves + * it creates are defined like those made by the + * bezier() function. `bezierVertex()` must be + * called between the + * beginShape() and + * endShape() functions. There must be at least + * one call to bezierVertex(), before + * a number of `bezierVertex()` calls that is a multiple of the parameter + * set by bezierOrder(...) (default 3). + * + * Each curve of order 3 requires three calls to `bezierVertex`, so + * 2 curves would need 7 calls to `bezierVertex()`: + * (1 one initial anchor point, two sets of 3 curves describing the curves) + * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2. + * + * Bézier curves can also be drawn in 3D using WebGL mode. + * + * Note: `bezierVertex()` won’t work when an argument is passed to + * beginShape(). + * + * @method bezierOrder + * @param {Number} order can be either 2 or 3, by default 3 + * + * @example + *
+ * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * // Style the shape. + * noFill(); + * + * // Start drawing the shape. + * beginShape(); + * + * // set the order to 2 for a quadratic Bézier curve + * bezierOrder(2); + * + * // Add the first anchor point. + * bezierVertex(30, 20); + * + * // Add the Bézier vertex. + * bezierVertex(80, 20); + * bezierVertex(50, 50); + * + * // Stop drawing the shape. + * endShape(); + * + * describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.'); + * } + * + *
+ */ bezierOrder(...order) { this.#bezierOrder = order; } From e9d6b12c6eceaf391d1a0dd1b3e5a409a057b7df Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 17 Apr 2025 16:20:18 +0200 Subject: [PATCH 06/25] Update src/shape/vertex.js Co-authored-by: Dave Pagurek --- src/shape/vertex.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/vertex.js b/src/shape/vertex.js index ca32dc94a7..d6c72fbdde 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -411,7 +411,7 @@ function vertex(p5, fn){ * beginShape() and * endShape() functions. * Bézier need a starting point. Building a shape - * only wiht Bézier curves needs one initial + * only with Bézier curves needs one initial * call to bezierVertex(), before * a number of `bezierVertex()` calls that is a multiple of the parameter * set by bezierOrder(...) (default 3). From f8b6108ff1bc2ca0b33850b8ffb1c459a28f4a69 Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 17 Apr 2025 16:20:25 +0200 Subject: [PATCH 07/25] Update src/shape/vertex.js Co-authored-by: Dave Pagurek --- src/shape/vertex.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/vertex.js b/src/shape/vertex.js index d6c72fbdde..680f5463d7 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -420,7 +420,7 @@ function vertex(p5, fn){ * only the multiples of 3 (or the Bézier order) calls to * `bezierVertext` for each curve. * - * Each curve of order 3 requires three calls to `bezierVertext`, so + * Each curve of order 3 requires three calls to `bezierVertex`, so * 2 curves would need 7 calls to `bezierVertex()`: * (1 one initial anchor point, two sets of 3 curves describing the curves) * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2. From 4348e6633ba413cf433597c645dca2a7f5bacd91 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 16:32:53 +0200 Subject: [PATCH 08/25] Spline properties and curve tightness docs --- src/shape/custom_shapes.js | 61 ++++++++++++++++++++++++++++++++------ 1 file changed, 52 insertions(+), 9 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 6562df4972..c77cbf9870 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -894,6 +894,10 @@ class Shape { this._splineProperties[key] = value; } + /** + * @method splineProperties + * @param {Number} value + */ splineProperties(values) { if (values) { for (const key in values) { @@ -1680,24 +1684,63 @@ function customShapes(p5, fn) { }; /** - * @method splineProperty - * @param {String} property - * @returns value The current value for the given property. - */ - /** + * Sets the property of a curve. For example, set tightness, + * use `splineProperty('tightness', t)`, with `t` between 0 and 1, + * at 0 as default. + * + * Spline curves are like cables that are attached to a set of points. + * Adjusting tightness adjusts how tightly the cable is + * attached to the points. The parameter, tightness, determines + * how the curve fits to the vertex points. By default, + * tightness is set to 0. Setting tightness to 1, as in + * `splineProperty('tightness', 1)`, connects the curve's points + * using straight lines. Values in the range from –5 to 5 + * deform curves while leaving them recognizable. + * * @method splineProperty * @param {String} property * @param value Value to set the given property to. + * + * @example + *
+ * + * // Move the mouse left and right to see the curve change. + * + * function setup() { + * createCanvas(100, 100); + * describe('A black curve forms a sideways U shape. The curve deforms as the user moves the mouse from left to right'); + * } + * + * function draw() { + * background(200); + * + * // Set the curve's tightness using the mouse. + * let t = map(mouseX, 0, 100, -5, 5, true); + * splineProperty('tightness', t); + * + * // Draw the curve. + * noFill(); + * beginShape(); + * curveVertex(10, 26); + * curveVertex(10, 26); + * curveVertex(83, 24); + * curveVertex(83, 61); + * curveVertex(25, 65); + * curveVertex(25, 65); + * endShape(); + * } + * + *
*/ fn.splineProperty = function(property, value) { return this._renderer.splineProperty(property, value); }; /** - * @method splineProperties - * @returns {Object} The current spline properties. - */ - /** + * Similar to splineProperty(): + * `splineProperty('tightness', t)` is the same as + * `splineProperties({'tightness': t})`` + * * @method splineProperties * @param {Object} An object containing key-value pairs to set. */ From 6fc9438fd93750c9d65415353207c155b7d2db8d Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 17 Apr 2025 16:37:00 +0200 Subject: [PATCH 09/25] Update src/shape/vertex.js Co-authored-by: Dave Pagurek --- src/shape/vertex.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/vertex.js b/src/shape/vertex.js index 680f5463d7..cdf3a6c62a 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -418,7 +418,7 @@ function vertex(p5, fn){ * But shapes can mix different types of vertices, so if there * are some previous vertizes, then the initial anchor is not needed, * only the multiples of 3 (or the Bézier order) calls to - * `bezierVertext` for each curve. + * `bezierVertex` for each curve. * * Each curve of order 3 requires three calls to `bezierVertex`, so * 2 curves would need 7 calls to `bezierVertex()`: From f32d3966c8c2d20941f710c628bab0faaa4db682 Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 17 Apr 2025 16:37:07 +0200 Subject: [PATCH 10/25] Update src/shape/vertex.js Co-authored-by: Dave Pagurek --- src/shape/vertex.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shape/vertex.js b/src/shape/vertex.js index cdf3a6c62a..beeb90eaff 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -416,7 +416,7 @@ function vertex(p5, fn){ * a number of `bezierVertex()` calls that is a multiple of the parameter * set by bezierOrder(...) (default 3). * But shapes can mix different types of vertices, so if there - * are some previous vertizes, then the initial anchor is not needed, + * are some previous vertices, then the initial anchor is not needed, * only the multiples of 3 (or the Bézier order) calls to * `bezierVertex` for each curve. * From 46fa2080d5e6b3f0120b420ec2dd17be1a79c9e3 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 16:42:17 +0200 Subject: [PATCH 11/25] removed redundant curveVertex --- src/shape/custom_shapes.js | 504 ++++++++++++++++++++++++++++++++----- src/shape/vertex.js | 387 ---------------------------- 2 files changed, 438 insertions(+), 453 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index c77cbf9870..151223564e 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -825,67 +825,6 @@ class Shape { return name + 'Src'; } - - /** - * Influences the shape of the Bézier curve segment in a custom shape. - * By default, this is 3; the other possible parameter is 2. This - * results in quadratic Bézier curves. - * - * `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves - * it creates are defined like those made by the - * bezier() function. `bezierVertex()` must be - * called between the - * beginShape() and - * endShape() functions. There must be at least - * one call to bezierVertex(), before - * a number of `bezierVertex()` calls that is a multiple of the parameter - * set by bezierOrder(...) (default 3). - * - * Each curve of order 3 requires three calls to `bezierVertex`, so - * 2 curves would need 7 calls to `bezierVertex()`: - * (1 one initial anchor point, two sets of 3 curves describing the curves) - * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2. - * - * Bézier curves can also be drawn in 3D using WebGL mode. - * - * Note: `bezierVertex()` won’t work when an argument is passed to - * beginShape(). - * - * @method bezierOrder - * @param {Number} order can be either 2 or 3, by default 3 - * - * @example - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Style the shape. - * noFill(); - * - * // Start drawing the shape. - * beginShape(); - * - * // set the order to 2 for a quadratic Bézier curve - * bezierOrder(2); - * - * // Add the first anchor point. - * bezierVertex(30, 20); - * - * // Add the Bézier vertex. - * bezierVertex(80, 20); - * bezierVertex(50, 50); - * - * // Stop drawing the shape. - * endShape(); - * - * describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.'); - * } - * - *
- */ bezierOrder(...order) { this.#bezierOrder = order; } @@ -1642,18 +1581,451 @@ function customShapes(p5, fn) { // ---- FUNCTIONS ---- + /** + * Influences the shape of the Bézier curve segment in a custom shape. + * By default, this is 3; the other possible parameter is 2. This + * results in quadratic Bézier curves. + * + * `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves + * it creates are defined like those made by the + * bezier() function. `bezierVertex()` must be + * called between the + * beginShape() and + * endShape() functions. There must be at least + * one call to bezierVertex(), before + * a number of `bezierVertex()` calls that is a multiple of the parameter + * set by bezierOrder(...) (default 3). + * + * Each curve of order 3 requires three calls to `bezierVertex`, so + * 2 curves would need 7 calls to `bezierVertex()`: + * (1 one initial anchor point, two sets of 3 curves describing the curves) + * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2. + * + * Bézier curves can also be drawn in 3D using WebGL mode. + * + * Note: `bezierVertex()` won’t work when an argument is passed to + * beginShape(). + * * @method bezierOrder - * @returns {Number} The current bezier order. - */ - /** - * @method bezierOrder - * @param {Number} order The new order to set. + * @param {Number} order The new order to set. Can be either 2 or 3, by default 3 + * + * @example + *
+ * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * // Style the shape. + * noFill(); + * + * // Start drawing the shape. + * beginShape(); + * + * // set the order to 2 for a quadratic Bézier curve + * bezierOrder(2); + * + * // Add the first anchor point. + * bezierVertex(30, 20); + * + * // Add the Bézier vertex. + * bezierVertex(80, 20); + * bezierVertex(50, 50); + * + * // Stop drawing the shape. + * endShape(); + * + * describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.'); + * } + * + *
*/ fn.bezierOrder = function(order) { return this._renderer.bezierOrder(order); }; +/** + * Adds a spline curve segment to a custom shape. + * + * `splineVertex()` adds a curved segment to custom shapes. The spline curves + * it creates are defined like those made by the + * curve() function. `splineVertex()` must be called + * between the beginShape() and + * 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 + * beginShape() and + * endShape() in order to draw a curve: + * + * ```js + * beginShape(); + * + * // Add the first control point. + * splineVertex(84, 91); + * + * // Add the anchor points to draw between. + * splineVertex(68, 19); + * splineVertex(21, 17); + * + * // Add the second control point. + * splineVertex(32, 91); + * + * endShape(); + * ``` + * + * The code snippet above would only draw the curve between the anchor points, + * similar to the curve() function. The segments + * between the control and anchor points can be drawn by calling + * `splineVertex()` with the coordinates of the control points: + * + * ```js + * beginShape(); + * + * // Add the first control 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 control point. + * splineVertex(32, 91); + * + * // Uncomment the next line to draw the segment to the second control point. + * // splineVertex(32, 91); + * + * endShape(); + * ``` + * + * The first two parameters, `x` and `y`, set the vertex’s location. For + * example, calling `splineVertex(10, 10)` adds a point to the curve at + * `(10, 10)`. + * + * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of + * `splineVertex()` has three arguments because each point has x-, y-, and + * z-coordinates. By default, the vertex’s z-coordinate is set to 0. + * + * Note: `splineVertex()` won’t work when an argument is passed to + * beginShape(). + * + * @method splineVertex + * @param {Number} x x-coordinate of the vertex + * @param {Number} y y-coordinate of the vertex + * @chainable + * + * @example + *
+ * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * // Style the shape. + * noFill(); + * strokeWeight(1); + * + * // Start drawing the shape. + * beginShape(); + * + * // Add the first control point. + * splineVertex(32, 91); + * + * // Add the anchor points. + * splineVertex(21, 17); + * splineVertex(68, 19); + * + * // Add the second control point. + * splineVertex(84, 91); + * + * // Stop drawing the shape. + * endShape(); + * + * // Style the anchor and control points. + * strokeWeight(5); + * + * // Draw the anchor points in black. + * stroke(0); + * point(21, 17); + * point(68, 19); + * + * // Draw the control points in red. + * stroke(255, 0, 0); + * point(32, 91); + * point(84, 91); + * + * 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.' + * ); + * } + * + *
+ * + *
+ * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * // Style the shape. + * noFill(); + * strokeWeight(1); + * + * // Start drawing the shape. + * beginShape(); + * + * // Add the first control 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 control point. + * splineVertex(84, 91); + * + * // Stop drawing the shape. + * endShape(); + * + * // Style the anchor and control points. + * strokeWeight(5); + * + * // Draw the anchor points in black. + * stroke(0); + * point(21, 17); + * point(68, 19); + * + * // Draw the control points in red. + * stroke(255, 0, 0); + * point(32, 91); + * point(84, 91); + * + * 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.' + * ); + * } + * + *
+ * + *
+ * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * // Style the shape. + * noFill(); + * strokeWeight(1); + * + * // Start drawing the shape. + * beginShape(); + * + * // Add the first control 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 control point and draw a segment to it. + * splineVertex(84, 91); + * splineVertex(84, 91); + * + * // Stop drawing the shape. + * endShape(); + * + * // Style the anchor and control points. + * strokeWeight(5); + * + * // Draw the anchor points in black. + * stroke(0); + * point(21, 17); + * point(68, 19); + * + * // Draw the control 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.' + * ); + * } + * + *
+ * + *
+ * + * // Click the mouse near the red dot in the bottom-left corner + * // and drag to change the curve's shape. + * + * let x1 = 32; + * let y1 = 91; + * let isChanging = false; + * + * function setup() { + * createCanvas(100, 100); + * + * 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 draw() { + * background(200); + * + * // Style the shape. + * noFill(); + * stroke(0); + * strokeWeight(1); + * + * // Start drawing the shape. + * beginShape(); + * + * // Add the first control 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 control point and draw a segment to it. + * splineVertex(84, 91); + * splineVertex(84, 91); + * + * // Stop drawing the shape. + * endShape(); + * + * // Style the anchor and control points. + * strokeWeight(5); + * + * // Draw the anchor points in black. + * stroke(0); + * point(21, 17); + * point(68, 19); + * + * // Draw the control 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. + * function mousePressed() { + * if (dist(mouseX, mouseY, x1, y1) < 20) { + * isChanging = true; + * } + * } + * + * // Stop changing the first control point when the user releases the mouse. + * function mouseReleased() { + * isChanging = false; + * } + * + * // Update the first control point while the user drags the mouse. + * function mouseDragged() { + * if (isChanging === true) { + * x1 = mouseX; + * y1 = mouseY; + * } + * } + * + *
+ * + *
+ * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * // Start drawing the shape. + * beginShape(); + * + * // Add the first control 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 control point. + * splineVertex(84, 91); + * splineVertex(84, 91); + * + * // Stop drawing the shape. + * endShape(); + * + * describe('A ghost shape drawn in white on a gray background.'); + * } + * + *
+ */ + /** + * @method splineVertex + * @param {Number} x + * @param {Number} y + * @param {Number} [z] z-coordinate of the vertex. + * @chainable + * + * @example + *
+ * + * // Click and drag the mouse to view the scene from different angles. + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * + * describe('A ghost shape drawn in white on a blue background. When the user drags the mouse, the scene rotates to reveal the outline of a second ghost.'); + * } + * + * function draw() { + * background('midnightblue'); + * + * // Enable orbiting with the mouse. + * orbitControl(); + * + * // Draw the first ghost. + * noStroke(); + * fill('ghostwhite'); + * + * beginShape(); + * splineVertex(-28, 41, 0); + * splineVertex(-28, 41, 0); + * splineVertex(-29, -33, 0); + * splineVertex(18, -31, 0); + * splineVertex(34, 41, 0); + * splineVertex(34, 41, 0); + * endShape(); + * + * // Draw the second ghost. + * noFill(); + * stroke('ghostwhite'); + * + * beginShape(); + * splineVertex(-28, 41, -20); + * splineVertex(-28, 41, -20); + * splineVertex(-29, -33, -20); + * splineVertex(18, -31, -20); + * splineVertex(34, 41, -20); + * splineVertex(34, 41, -20); + * endShape(); + * } + * + *
+ */ /** * @method splineVertex * @param {Number} x diff --git a/src/shape/vertex.js b/src/shape/vertex.js index beeb90eaff..b58253bc36 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -687,393 +687,6 @@ function vertex(p5, fn){ this._renderer.bezierVertex(...args); }; - /** - * Adds a spline curve segment to a custom shape. - * - * `splineVertex()` adds a curved segment to custom shapes. The spline curves - * it creates are defined like those made by the - * curve() function. `splineVertex()` must be called - * between the beginShape() and - * 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 - * beginShape() and - * endShape() in order to draw a curve: - * - * ```js - * beginShape(); - * - * // Add the first control point. - * splineVertex(84, 91); - * - * // Add the anchor points to draw between. - * splineVertex(68, 19); - * splineVertex(21, 17); - * - * // Add the second control point. - * splineVertex(32, 91); - * - * endShape(); - * ``` - * - * The code snippet above would only draw the curve between the anchor points, - * similar to the curve() function. The segments - * between the control and anchor points can be drawn by calling - * `splineVertex()` with the coordinates of the control points: - * - * ```js - * beginShape(); - * - * // Add the first control 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 control point. - * splineVertex(32, 91); - * - * // Uncomment the next line to draw the segment to the second control point. - * // splineVertex(32, 91); - * - * endShape(); - * ``` - * - * The first two parameters, `x` and `y`, set the vertex’s location. For - * example, calling `splineVertex(10, 10)` adds a point to the curve at - * `(10, 10)`. - * - * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of - * `splineVertex()` has three arguments because each point has x-, y-, and - * z-coordinates. By default, the vertex’s z-coordinate is set to 0. - * - * Note: `splineVertex()` won’t work when an argument is passed to - * beginShape(). - * - * @method splineVertex - * @param {Number} x x-coordinate of the vertex - * @param {Number} y y-coordinate of the vertex - * @chainable - * - * @example - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Style the shape. - * noFill(); - * strokeWeight(1); - * - * // Start drawing the shape. - * beginShape(); - * - * // Add the first control point. - * splineVertex(32, 91); - * - * // Add the anchor points. - * splineVertex(21, 17); - * splineVertex(68, 19); - * - * // Add the second control point. - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * // Style the anchor and control points. - * strokeWeight(5); - * - * // Draw the anchor points in black. - * stroke(0); - * point(21, 17); - * point(68, 19); - * - * // Draw the control points in red. - * stroke(255, 0, 0); - * point(32, 91); - * point(84, 91); - * - * 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.' - * ); - * } - * - *
- * - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Style the shape. - * noFill(); - * strokeWeight(1); - * - * // Start drawing the shape. - * beginShape(); - * - * // Add the first control 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 control point. - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * // Style the anchor and control points. - * strokeWeight(5); - * - * // Draw the anchor points in black. - * stroke(0); - * point(21, 17); - * point(68, 19); - * - * // Draw the control points in red. - * stroke(255, 0, 0); - * point(32, 91); - * point(84, 91); - * - * 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.' - * ); - * } - * - *
- * - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Style the shape. - * noFill(); - * strokeWeight(1); - * - * // Start drawing the shape. - * beginShape(); - * - * // Add the first control 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 control point and draw a segment to it. - * splineVertex(84, 91); - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * // Style the anchor and control points. - * strokeWeight(5); - * - * // Draw the anchor points in black. - * stroke(0); - * point(21, 17); - * point(68, 19); - * - * // Draw the control 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.' - * ); - * } - * - *
- * - *
- * - * // Click the mouse near the red dot in the bottom-left corner - * // and drag to change the curve's shape. - * - * let x1 = 32; - * let y1 = 91; - * let isChanging = false; - * - * function setup() { - * createCanvas(100, 100); - * - * 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 draw() { - * background(200); - * - * // Style the shape. - * noFill(); - * stroke(0); - * strokeWeight(1); - * - * // Start drawing the shape. - * beginShape(); - * - * // Add the first control 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 control point and draw a segment to it. - * splineVertex(84, 91); - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * // Style the anchor and control points. - * strokeWeight(5); - * - * // Draw the anchor points in black. - * stroke(0); - * point(21, 17); - * point(68, 19); - * - * // Draw the control 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. - * function mousePressed() { - * if (dist(mouseX, mouseY, x1, y1) < 20) { - * isChanging = true; - * } - * } - * - * // Stop changing the first control point when the user releases the mouse. - * function mouseReleased() { - * isChanging = false; - * } - * - * // Update the first control point while the user drags the mouse. - * function mouseDragged() { - * if (isChanging === true) { - * x1 = mouseX; - * y1 = mouseY; - * } - * } - * - *
- * - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Start drawing the shape. - * beginShape(); - * - * // Add the first control 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 control point. - * splineVertex(84, 91); - * splineVertex(84, 91); - * - * // Stop drawing the shape. - * endShape(); - * - * describe('A ghost shape drawn in white on a gray background.'); - * } - * - *
- */ - - /** - * @method splineVertex - * @param {Number} x - * @param {Number} y - * @param {Number} [z] z-coordinate of the vertex. - * @chainable - * - * @example - *
- * - * // Click and drag the mouse to view the scene from different angles. - * - * function setup() { - * createCanvas(100, 100, WEBGL); - * - * describe('A ghost shape drawn in white on a blue background. When the user drags the mouse, the scene rotates to reveal the outline of a second ghost.'); - * } - * - * function draw() { - * background('midnightblue'); - * - * // Enable orbiting with the mouse. - * orbitControl(); - * - * // Draw the first ghost. - * noStroke(); - * fill('ghostwhite'); - * - * beginShape(); - * splineVertex(-28, 41, 0); - * splineVertex(-28, 41, 0); - * splineVertex(-29, -33, 0); - * splineVertex(18, -31, 0); - * splineVertex(34, 41, 0); - * splineVertex(34, 41, 0); - * endShape(); - * - * // Draw the second ghost. - * noFill(); - * stroke('ghostwhite'); - * - * beginShape(); - * splineVertex(-28, 41, -20); - * splineVertex(-28, 41, -20); - * splineVertex(-29, -33, -20); - * splineVertex(18, -31, -20); - * splineVertex(34, 41, -20); - * splineVertex(34, 41, -20); - * endShape(); - * } - * - *
- */ - fn.splineVertex = function(...args) { - // p5._validateParameters('splineVertex', args); - this._renderer.splineVertex(...args); - return this; - }; - /** * Begins adding vertices to a custom shape. * From e605b54b3f6dd3a30849795c7df24d57434fa20d Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 16:44:51 +0200 Subject: [PATCH 12/25] splineProperties typo fix --- src/shape/custom_shapes.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 151223564e..c8e8bf9641 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -832,11 +832,7 @@ class Shape { splineProperty(key, value) { this._splineProperties[key] = value; } - - /** - * @method splineProperties - * @param {Number} value - */ + splineProperties(values) { if (values) { for (const key in values) { From 49baf547471f1f1a97ce10992bcf6250462a13cd Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 16:50:27 +0200 Subject: [PATCH 13/25] endContour default mode update --- src/shape/custom_shapes.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index c8e8bf9641..7341b7ef31 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -832,7 +832,7 @@ class Shape { splineProperty(key, value) { this._splineProperties[key] = value; } - + splineProperties(values) { if (values) { for (const key in values) { @@ -2371,7 +2371,7 @@ function customShapes(p5, fn) { * vertex(30, 70); * vertex(70, 70); * vertex(70, 30); - * endContour(); + * endContour(CLOSE); * * // Stop drawing the shape. * endShape(CLOSE); @@ -2412,7 +2412,7 @@ function customShapes(p5, fn) { * vertex(-20, 20); * vertex(20, 20); * vertex(20, -20); - * endContour(); + * endContour(CLOSE); * * // Stop drawing the shape. * endShape(CLOSE); @@ -2425,7 +2425,7 @@ function customShapes(p5, fn) { }; /** - * Stops creating a hole within a flat shape. + * Stops creating a hole within a flat shape. * * The beginContour() and `endContour()` * functions allow for creating negative space within custom shapes that are @@ -2435,6 +2435,10 @@ function customShapes(p5, fn) { * called between beginShape() and * endShape(). * + * By default, + * the controur has an `OPEN` end, and to close it, + * call `endContour(CLOSE)`. + * * Transformations such as translate(), * rotate(), and scale() * don't work between beginContour() and @@ -2448,7 +2452,7 @@ function customShapes(p5, fn) { * counter-clockwise order. * * @method endContour - * @param {OPEN|CLOSE} [mode=OPEN] + * @param {OPEN|CLOSE} [mode=OPEN] By default, the value is OPEN * * @example *
@@ -2473,7 +2477,7 @@ function customShapes(p5, fn) { * vertex(30, 70); * vertex(70, 70); * vertex(70, 30); - * endContour(); + * endContour(CLOSE); * * // Stop drawing the shape. * endShape(CLOSE); @@ -2514,7 +2518,7 @@ function customShapes(p5, fn) { * vertex(-20, 20); * vertex(20, 20); * vertex(20, -20); - * endContour(); + * endContour(CLOSE); * * // Stop drawing the shape. * endShape(CLOSE); From 66cf9ef9fd038d79d80798ffc239a92654c70bc7 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 16:56:31 +0200 Subject: [PATCH 14/25] Smooth spline end example added --- src/shape/custom_shapes.js | 2 +- src/shape/vertex.js | 28 ++++++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 7341b7ef31..2ddfb0320e 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2437,7 +2437,7 @@ function customShapes(p5, fn) { * * By default, * the controur has an `OPEN` end, and to close it, - * call `endContour(CLOSE)`. + * call `endContour(CLOSE)`. The CLOSE contour mode closes splines smoothly. * * Transformations such as translate(), * rotate(), and scale() diff --git a/src/shape/vertex.js b/src/shape/vertex.js index b58253bc36..2995f4f9a7 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -688,8 +688,8 @@ function vertex(p5, fn){ }; /** - * Begins adding vertices to a custom shape. - * + * Concludes the vertices of a custom shape. + * * The beginShape() and `endShape()` functions * allow for creating custom shapes in 2D or 3D. * beginShape() begins adding vertices to a @@ -698,7 +698,9 @@ function vertex(p5, fn){ * The first parameter, `mode`, is optional. By default, the first and last * vertices of a shape aren't connected. If the constant `CLOSE` is passed, as * in `endShape(CLOSE)`, then the first and last vertices will be connected. + * When CLOSE mode is used for splines (with `splineVeertex()`), the shape is ended smoothly. * + * * The second parameter, `count`, is also optional. In WebGL mode, it’s more * efficient to draw many copies of the same shape using a technique called * instancing. @@ -759,6 +761,28 @@ function vertex(p5, fn){ * } * *
+ * + *
+ * + * function setup() { + * createCanvas(100, 100); + * background(200); + * + * beginShape(); + * + * splineVertex(32, 91); + * splineVertex(21, 17); + * splineVertex(68, 19); + * splineVertex(82, 91); + * + * endShape(CLOSE); + * + * describe( + * 'A curvy four-sided slightly lopsided blob.' + * ); + * } + *
+ * * *
* From 43521cd750fc7b2bc82bf1ff0c66c853101615c4 Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 17 Apr 2025 17:13:00 +0200 Subject: [PATCH 15/25] Update src/shape/custom_shapes.js Co-authored-by: Dave Pagurek --- 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 2ddfb0320e..38bb623a06 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2107,7 +2107,7 @@ function customShapes(p5, fn) { /** * Similar to splineProperty(): * `splineProperty('tightness', t)` is the same as - * `splineProperties({'tightness': t})`` + * `splineProperties({'tightness': t})` * * @method splineProperties * @param {Object} An object containing key-value pairs to set. From 73e49d3898d6f1def860acb4e8d656eb836cca23 Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 17 Apr 2025 17:13:23 +0200 Subject: [PATCH 16/25] Update src/shape/custom_shapes.js Co-authored-by: Dave Pagurek --- 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 38bb623a06..fa75a516c1 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2110,7 +2110,7 @@ function customShapes(p5, fn) { * `splineProperties({'tightness': t})` * * @method splineProperties - * @param {Object} An object containing key-value pairs to set. + * @param {Object} properties An object containing key-value pairs to set. */ fn.splineProperties = function(values) { return this._renderer.splineProperties(values); From 9b328d196edcf8e65b436b7010c34923cbcbe7cb Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 17:19:24 +0200 Subject: [PATCH 17/25] Getter docs --- src/shape/custom_shapes.js | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index fa75a516c1..9f783de63a 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -1638,9 +1638,15 @@ function customShapes(p5, fn) { * *
*/ + /** + * @method bezierOrder + * @returns {Number} The current Bézier order. + */ fn.bezierOrder = function(order) { return this._renderer.bezierOrder(order); }; + + /** * Adds a spline curve segment to a custom shape. * @@ -2089,22 +2095,29 @@ function customShapes(p5, fn) { * // Draw the curve. * noFill(); * beginShape(); - * curveVertex(10, 26); - * curveVertex(10, 26); - * curveVertex(83, 24); - * curveVertex(83, 61); - * curveVertex(25, 65); - * curveVertex(25, 65); + * splineVertex(10, 26); + * splineVertex(10, 26); + * splineVertex(83, 24); + * splineVertex(83, 61); + * splineVertex(25, 65); + * splineVertex(25, 65); * endShape(); * } * * */ + /** + * @method splineProperty + * @param {String} property + * @returns value The current value for the given property. + */ fn.splineProperty = function(property, value) { return this._renderer.splineProperty(property, value); }; /** + * Get or set multiple spline properties at once. + * * Similar to splineProperty(): * `splineProperty('tightness', t)` is the same as * `splineProperties({'tightness': t})` @@ -2112,6 +2125,10 @@ function customShapes(p5, fn) { * @method splineProperties * @param {Object} properties An object containing key-value pairs to set. */ + /** + * @method splineProperties + * @returns {Object} The current spline properties. + */ fn.splineProperties = function(values) { return this._renderer.splineProperties(values); }; From d626147506ff66a15f1146ab6fb1c7c8f9dc6085 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 17:27:42 +0200 Subject: [PATCH 18/25] Update curveDetail docs --- src/webgl/3d_primitives.js | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 4a1b9e35f0..98fc57350e 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -2671,15 +2671,13 @@ function primitives3D(p5, fn){ * In WebGL mode, smooth shapes are drawn using many flat segments. Adding * more flat segments makes shapes appear smoother. * - * The parameter, `detail`, is the number of segments to use while drawing a - * spline curve. For example, calling `curveDetail(5)` will use 5 segments to - * draw curves with the curve() function. By - * default,`detail` is 20. + * The parameter, `detail`, is the density of segments to use while drawing a + * spline curve. * * Note: `curveDetail()` has no effect in 2D mode. * * @method curveDetail - * @param {Number} resolution number of segments to use. Defaults to 20. + * @param {Number} resolution number of segments to use. Default it 1/4 * @chainable * * @example @@ -2694,12 +2692,12 @@ function primitives3D(p5, fn){ * noFill(); * strokeWeight(1); * stroke(0); - * curve(5, 26, 73, 24, 73, 61, 15, 65); + * spline(5, 26, 73, 24, 73, 61, 15, 65); * * // Draw red spline curves from the anchor points to the control points. * stroke(255, 0, 0); - * curve(5, 26, 5, 26, 73, 24, 73, 61); - * curve(73, 24, 73, 61, 15, 65, 15, 65); + * spline(5, 26, 5, 26, 73, 24, 73, 61); + * spline(73, 24, 73, 61, 15, 65, 15, 65); * * // Draw the anchor points in black. * strokeWeight(5); @@ -2726,19 +2724,19 @@ function primitives3D(p5, fn){ * * background(200); * - * // Set the curveDetail() to 3. - * curveDetail(3); + * // Set the curveDetail() to 0.5 + * curveDetail(0.5); * * // Draw a black spline curve. * noFill(); * strokeWeight(1); * stroke(0); - * curve(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0); + * spline(-45, -24, 0, 23, -26, 0, 23, 11, 0, -35, 15, 0); * * // Draw red spline curves from the anchor points to the control points. - * stroke(255, 0, 0); - * curve(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0); - * curve(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0); + * spline(255, 0, 0); + * spline(-45, -24, 0, -45, -24, 0, 23, -26, 0, 23, 11, 0); + * spline(23, -26, 0, 23, 11, 0, -35, 15, 0, -35, 15, 0); * * // Draw the anchor points in black. * strokeWeight(5); From cf4caae29d7b8dbf337bc68b2cf2f1a978a619df Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 17:31:13 +0200 Subject: [PATCH 19/25] Added example of uv coord usage in vertex --- src/shape/custom_shapes.js | 40 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 9f783de63a..0dcfa060a4 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2300,6 +2300,46 @@ function customShapes(p5, fn) { * } * * + * + *
+ * + * let vid; + * function setup() { + * // Load a video and create a p5.MediaElement object. + * vid = createVideo('/assets/fingers.mov'); + * createCanvas(100, 100, WEBGL); + * + * // Hide the video. + * vid.hide(); + * + * // Set the video to loop. + * vid.loop(); + * + * describe('A rectangle with video as texture'); + * } + * + * function draw() { + * background(0); + * + * // Rotate around the y-axis. + * rotateY(frameCount * 0.01); + * + * // Set the texture mode. + * textureMode(NORMAL); + * + * // Apply the video as a texture. + * texture(vid); + * + * // Draw a custom shape using uv coordinates. + * beginShape(); + * vertex(-40, -40, 0, 0); + * vertex(40, -40, 1, 0); + * vertex(40, 40, 1, 1); + * vertex(-40, 40, 0, 1); + * endShape(); + * } + * + *
*/ /** * @method vertex From 202dcdc960391b11fbdfc2a8c7bdb5994ba1760c Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 17 Apr 2025 17:31:57 +0200 Subject: [PATCH 20/25] Update src/shape/custom_shapes.js Co-authored-by: Dave Pagurek --- 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 0dcfa060a4..56915695e9 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2109,7 +2109,7 @@ function customShapes(p5, fn) { /** * @method splineProperty * @param {String} property - * @returns value The current value for the given property. + * @returns The current value for the given property. */ fn.splineProperty = function(property, value) { return this._renderer.splineProperty(property, value); From d80a6d37c3c15ed245be6914c7cda76e14a8fb02 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 17:51:37 +0200 Subject: [PATCH 21/25] Added ends splineProperty docs --- src/shape/custom_shapes.js | 9 ++++++++- src/webgl/3d_primitives.js | 3 +++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 56915695e9..9e22f0b75c 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2058,7 +2058,9 @@ function customShapes(p5, fn) { }; /** - * Sets the property of a curve. For example, set tightness, + * Sets the property of a curve. + * + * For example, set tightness, * use `splineProperty('tightness', t)`, with `t` between 0 and 1, * at 0 as default. * @@ -2071,6 +2073,11 @@ function customShapes(p5, fn) { * using straight lines. Values in the range from –5 to 5 * deform curves while leaving them recognizable. * + * This function can also be used to set 'ends' property + * (see also: the curveDetail() example), + * such as: `splineProperty('ends', EXCLUDE)` to exclude + * vertices, or `splineProperty('ends', INCLUDE)` to include them. + * * @method splineProperty * @param {String} property * @param value Value to set the given property to. diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 98fc57350e..6a011d6f4d 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -2726,6 +2726,9 @@ function primitives3D(p5, fn){ * * // Set the curveDetail() to 0.5 * curveDetail(0.5); + * + * // Do not show all the vertices + * splineProperty('ends', EXCLUDE) * * // Draw a black spline curve. * noFill(); From 482d50b20e14add643b9902aa71cd80cfa85511e Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 17 Apr 2025 17:58:31 +0200 Subject: [PATCH 22/25] Update src/webgl/3d_primitives.js Co-authored-by: Dave Pagurek --- src/webgl/3d_primitives.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 6a011d6f4d..25ab9cec1a 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -2677,7 +2677,7 @@ function primitives3D(p5, fn){ * Note: `curveDetail()` has no effect in 2D mode. * * @method curveDetail - * @param {Number} resolution number of segments to use. Default it 1/4 + * @param {Number} resolution number of segments to use. Default is 1/4 * @chainable * * @example From 9afdd0e832d0d0fbbaca0ca3589c27cf3ee21737 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 18:07:26 +0200 Subject: [PATCH 23/25] Hide bare WEBGL functions --- src/webgl/loading.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/webgl/loading.js b/src/webgl/loading.js index 661c49eef9..173b45d75e 100755 --- a/src/webgl/loading.js +++ b/src/webgl/loading.js @@ -487,6 +487,9 @@ function loading(p5, fn){ } }; + /** + * @private + */ async function parseMtl(mtlPath) { let currentMaterial = null; let materials = {}; @@ -532,6 +535,7 @@ function loading(p5, fn){ } /** + * @private * Parse OBJ lines into model. For reference, this is what a simple model of a * square might look like: * @@ -666,6 +670,7 @@ function loading(p5, fn){ } /** + * @private * STL files can be of two types, ASCII and Binary, * * We need to convert the arrayBuffer to an array of strings, @@ -720,6 +725,7 @@ function loading(p5, fn){ } /** + * @private * This function matches the `query` at the provided `offset` */ function matchDataViewAt(query, reader, offset) { @@ -820,6 +826,7 @@ function loading(p5, fn){ } /** + * @private * ASCII STL file starts with `solid 'nameOfFile'` * Then contain the normal of the face, starting with `facet normal` * Next contain a keyword indicating the start of face vertex, `outer loop` From c0273bbe417d4998343a71e7efb6a925cf82b4f3 Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 18:10:35 +0200 Subject: [PATCH 24/25] More minor fixes --- src/webgl/3d_primitives.js | 35 ----------------------------------- src/webgl/loading.js | 2 ++ 2 files changed, 2 insertions(+), 35 deletions(-) diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 25ab9cec1a..3bd2c70baf 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -2681,41 +2681,6 @@ function primitives3D(p5, fn){ * @chainable * * @example - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Draw a black spline curve. - * noFill(); - * strokeWeight(1); - * stroke(0); - * spline(5, 26, 73, 24, 73, 61, 15, 65); - * - * // Draw red spline curves from the anchor points to the control points. - * stroke(255, 0, 0); - * spline(5, 26, 5, 26, 73, 24, 73, 61); - * spline(73, 24, 73, 61, 15, 65, 15, 65); - * - * // Draw the anchor points in black. - * strokeWeight(5); - * stroke(0); - * point(73, 24); - * point(73, 61); - * - * // Draw the control points in red. - * stroke(255, 0, 0); - * point(5, 26); - * point(15, 65); - * - * describe( - * 'A gray square with a curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.' - * ); - * } - * - *
* *
* diff --git a/src/webgl/loading.js b/src/webgl/loading.js index 173b45d75e..b4c3fbf973 100755 --- a/src/webgl/loading.js +++ b/src/webgl/loading.js @@ -698,6 +698,7 @@ function loading(p5, fn){ } /** + * @private * This function checks if the file is in ASCII format or in Binary format * * It is done by searching keyword `solid` at the start of the file. @@ -738,6 +739,7 @@ function loading(p5, fn){ } /** + * @private * This function parses the Binary STL files. * https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL * From 2694cac70206fd1a54b53614645c0e306f38109f Mon Sep 17 00:00:00 2001 From: ksen0 Date: Thu, 17 Apr 2025 18:16:54 +0200 Subject: [PATCH 25/25] Hide createMatrix until 2.1 --- src/math/math.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/math/math.js b/src/math/math.js index e88957e50d..300579ec82 100644 --- a/src/math/math.js +++ b/src/math/math.js @@ -115,6 +115,7 @@ function math(p5, fn) { * on shapes and images. The `createMatrix` method can take a column-major * array representation of a square matrix as an argument. In the current implementation we only use squared matrices. * + * @private * @method createMatrix * @param {Array} components Column-major array representation of the square matrix. *