diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index f9b2da245d..b65a363a76 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -2286,18 +2286,114 @@ function customShapes(p5, fn) { }; /** - * Get or set multiple spline properties at once. - * - * Similar to splineProperty(): - * `splineProperty('tightness', t)` is the same as - * `splineProperties({'tightness': t})` + * Sets multiple properties for spline curves at once. + * + * `splineProperties()` accepts an object with key-value pairs to configure + * how spline curves are drawn. This is a convenient way to set multiple + * spline properties with a single function call, rather than calling + * splineProperty() multiple times. + * + * The properties object can include: + * - `tightness`: A number that controls how tightly the curve fits to the + * vertex points. The default value is 0. Positive values make the curve + * tighter (straighter), while negative values make it looser. Values + * between -5 and 5 work best. + * - `ends`: Controls whether to draw the end segments of the spline. Set to + * `EXCLUDE` to skip drawing the segments between the first and second + * points and between the second-to-last and last points. This is useful + * when you want to use the first and last points as control points only. + * + * `splineProperties()` affects curves drawn with + * splineVertex() within + * beginShape() and + * endShape(), as well as curves drawn with + * spline(). The properties remain active until + * changed by another call to `splineProperties()` or + * splineProperty(). * * @method splineProperties - * @param {Object} properties An object containing key-value pairs to set. - */ - /** + * @param {Object} values an object containing spline property key-value pairs + * @chainable + * + * @example + *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(220);
+ *
+ * // Set spline tightness using splineProperties
+ * splineProperties({
+ * tightness: 0.5
+ * });
+ *
+ * // Draw a spline curve
+ * noFill();
+ * stroke(0);
+ * strokeWeight(2);
+ *
+ * beginShape();
+ * splineVertex(20, 80);
+ * splineVertex(30, 30);
+ * splineVertex(70, 30);
+ * splineVertex(80, 80);
+ * endShape();
+ *
+ * // Show vertex points
+ * fill(255, 0, 0);
+ * noStroke();
+ * circle(20, 80, 6);
+ * circle(30, 30, 6);
+ * circle(70, 30, 6);
+ * circle(80, 80, 6);
+ *
+ * describe('A smooth curved line with tightness 0.5 connecting four red points.');
+ * }
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(220);
+ *
+ * // Exclude end segments - first and last points become control points
+ * splineProperties({
+ * tightness: 0,
+ * ends: EXCLUDE
+ * });
+ *
+ * // Draw curve only between middle points
+ * noFill();
+ * stroke(0);
+ * strokeWeight(2);
+ *
+ * beginShape();
+ * splineVertex(10, 50); // Control point (affects curve but not drawn to)
+ * splineVertex(30, 20); // Start of visible curve
+ * splineVertex(70, 80); // End of visible curve
+ * splineVertex(90, 50); // Control point (affects curve but not drawn to)
+ * endShape();
+ *
+ * // Show all points
+ * fill(200, 0, 0);
+ * noStroke();
+ * circle(10, 50, 6); // Control point
+ * circle(90, 50, 6); // Control point
+ *
+ * fill(0, 0, 255);
+ * circle(30, 20, 6); // Visible curve point
+ * circle(70, 80, 6); // Visible curve point
+ *
+ * describe('A curved line between two blue points, with red control points at the ends.');
+ * }
+ *
+ *