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. * diff --git a/src/shape/custom_shapes.js b/src/shape/custom_shapes.js index 9eea6efb68..9e22f0b75c 100644 --- a/src/shape/custom_shapes.js +++ b/src/shape/custom_shapes.js @@ -825,12 +825,6 @@ 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]. - */ - bezierOrder(...order) { this.#bezierOrder = order; } @@ -1583,18 +1577,457 @@ 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. + * @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.'); + * } + * + *
*/ /** * @method bezierOrder - * @param {Number} order The new order to set. + * @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. + * + * `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 @@ -1625,26 +2058,83 @@ 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. + * + * 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. + * + * 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 - * @returns value The current value for the given 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(); + * splineVertex(10, 26); + * splineVertex(10, 26); + * splineVertex(83, 24); + * splineVertex(83, 61); + * splineVertex(25, 65); + * splineVertex(25, 65); + * endShape(); + * } + * + *
*/ /** * @method splineProperty * @param {String} property - * @param value Value to set the given property to. + * @returns 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})` + * * @method splineProperties - * @returns {Object} The current spline properties. + * @param {Object} properties An object containing key-value pairs to set. */ /** * @method splineProperties - * @param {Object} An object containing key-value pairs to set. + * @returns {Object} The current spline properties. */ fn.splineProperties = function(values) { return this._renderer.splineProperties(values); @@ -1817,6 +2307,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 @@ -1905,7 +2435,7 @@ function customShapes(p5, fn) { * vertex(30, 70); * vertex(70, 70); * vertex(70, 30); - * endContour(); + * endContour(CLOSE); * * // Stop drawing the shape. * endShape(CLOSE); @@ -1946,7 +2476,7 @@ function customShapes(p5, fn) { * vertex(-20, 20); * vertex(20, 20); * vertex(20, -20); - * endContour(); + * endContour(CLOSE); * * // Stop drawing the shape. * endShape(CLOSE); @@ -1959,7 +2489,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 @@ -1969,6 +2499,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)`. The CLOSE contour mode closes splines smoothly. + * * Transformations such as translate(), * rotate(), and scale() * don't work between beginContour() and @@ -1982,7 +2516,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 *
@@ -2007,7 +2541,7 @@ function customShapes(p5, fn) { * vertex(30, 70); * vertex(70, 70); * vertex(70, 30); - * endContour(); + * endContour(CLOSE); * * // Stop drawing the shape. * endShape(CLOSE); @@ -2048,7 +2582,7 @@ function customShapes(p5, fn) { * vertex(-20, 20); * vertex(20, 20); * vertex(20, -20); - * endContour(); + * endContour(CLOSE); * * // Stop drawing the shape. * endShape(CLOSE); diff --git a/src/shape/vertex.js b/src/shape/vertex.js index e8e32fe072..2995f4f9a7 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 @@ -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,23 @@ 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. + * Bézier need a starting point. Building a shape + * 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). + * But shapes can mix different types of vertices, so if there + * 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. + * + * 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(). @@ -449,10 +451,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 +493,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 +555,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 +604,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 +645,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(); * } * @@ -661,395 +688,8 @@ function vertex(p5, fn){ }; /** - * 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 curveVertex - * @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 curveVertex - * @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.curveVertex = function(...args) { - // p5._validateParameters('curveVertex', args); - this._renderer.splineVertex(...args); - return this; - }; - - /** - * 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 @@ -1058,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. @@ -1069,9 +711,8 @@ function vertex(p5, fn){ * * After calling beginShape(), shapes can be * built by calling vertex(), - * bezierVertex(), - * quadraticVertex(), and/or - * splineVertex(). Calling + * 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 * with the current fill color. @@ -1120,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.' + * ); + * } + *
+ * * *
* diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js index 4a1b9e35f0..3bd2c70baf 100644 --- a/src/webgl/3d_primitives.js +++ b/src/webgl/3d_primitives.js @@ -2671,53 +2671,16 @@ 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 is 1/4 * @chainable * * @example - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Draw a black spline curve. - * noFill(); - * strokeWeight(1); - * stroke(0); - * curve(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); - * - * // 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.' - * ); - * } - * - *
* *
* @@ -2726,19 +2689,22 @@ function primitives3D(p5, fn){ * * background(200); * - * // Set the curveDetail() to 3. - * curveDetail(3); + * // Set the curveDetail() to 0.5 + * curveDetail(0.5); + * + * // Do not show all the vertices + * splineProperty('ends', EXCLUDE) * * // 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); diff --git a/src/webgl/loading.js b/src/webgl/loading.js index 661c49eef9..b4c3fbf973 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, @@ -693,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. @@ -720,6 +726,7 @@ function loading(p5, fn){ } /** + * @private * This function matches the `query` at the provided `offset` */ function matchDataViewAt(query, reader, offset) { @@ -732,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 * @@ -820,6 +828,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` 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'); }); });