diff --git a/src/shape/vertex.js b/src/shape/vertex.js index 5b4b0cb2d7..cb7a9a5228 100644 --- a/src/shape/vertex.js +++ b/src/shape/vertex.js @@ -663,20 +663,7 @@ function vertex(p5, fn){ * @param {Number} z4 z-coordinate of the anchor point. */ fn.bezierVertex = function(...args) { - if (args.length === 2 * 3 || args.length === 3 * 3) { - // Handle the legacy case where all bezier control points are provided - // at once. We'll translate them into 3 individual calls. - const stride = args.length / 3; - - const prevOrder = this._renderer.bezierOrder(); - this._renderer.bezierOrder(3); - for (let i = 0; i < args.length; i += stride) { - this._renderer.bezierVertex(...args.slice(i, i + stride)); - } - this._renderer.bezierOrder(prevOrder); - } else { - this._renderer.bezierVertex(...args); - } + this._renderer.bezierVertex(...args); }; /** @@ -1239,263 +1226,6 @@ function vertex(p5, fn){ this._renderer.endShape(mode, count); }; - /** - * Adds a quadratic Bézier curve segment to a custom shape. - * - * `quadraticVertex()` adds a curved segment to custom shapes. The Bézier - * curve segments it creates are similar to those made by the - * bezierVertex() function. - * `quadraticVertex()` 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 `quadraticVertex()` can - * be used. - * - * The first two parameters, `cx` and `cy`, set the curve’s control point. - * The control point "pulls" the curve towards its. - * - * The last two parameters, `x3`, and `y3`, 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. - * - * Note: `quadraticVertex()` won’t work when an argument is passed to - * beginShape(). - * - * @method quadraticVertex - * @param {Number} cx x-coordinate of the control point. - * @param {Number} cy y-coordinate of the control point. - * @param {Number} x3 x-coordinate of the anchor point. - * @param {Number} y3 y-coordinate of the anchor point. - * @chainable - * - * @example - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Style the curve. - * noFill(); - * - * // Draw the curve. - * beginShape(); - * vertex(20, 20); - * quadraticVertex(80, 20, 50, 50); - * endShape(); - * - * describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.'); - * } - * - *
- * - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Draw the curve. - * noFill(); - * beginShape(); - * vertex(20, 20); - * quadraticVertex(80, 20, 50, 50); - * endShape(); - * - * // Draw red lines from the anchor points to the control point. - * stroke(255, 0, 0); - * line(20, 20, 80, 20); - * line(50, 50, 80, 20); - * - * // Draw the anchor points in black. - * strokeWeight(5); - * stroke(0); - * point(20, 20); - * point(50, 50); - * - * // Draw the control point in red. - * stroke(255, 0, 0); - * point(80, 20); - * - * describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.'); - * } - * - *
- * - *
- * - * // Click the mouse near the red dot in the top-right corner - * // and drag to change the curve's shape. - * - * let x2 = 80; - * let y2 = 20; - * let isChanging = false; - * - * function setup() { - * createCanvas(100, 100); - * - * describe('A black curve that starts at the top-left corner and ends at the center. Its anchor and control points are marked with dots. Red lines connect both anchor points to the control point.'); - * } - * - * function draw() { - * background(200); - * - * // Style the curve. - * noFill(); - * strokeWeight(1); - * stroke(0); - * - * // Draw the curve. - * beginShape(); - * vertex(20, 20); - * quadraticVertex(x2, y2, 50, 50); - * endShape(); - * - * // Draw red lines from the anchor points to the control point. - * stroke(255, 0, 0); - * line(20, 20, x2, y2); - * line(50, 50, x2, y2); - * - * // Draw the anchor points in black. - * strokeWeight(5); - * stroke(0); - * point(20, 20); - * point(50, 50); - * - * // Draw the control point in red. - * stroke(255, 0, 0); - * point(x2, y2); - * } - * - * // Start changing the first control point if the user clicks near it. - * function mousePressed() { - * if (dist(mouseX, mouseY, x2, y2) < 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) { - * x2 = mouseX; - * y2 = mouseY; - * } - * } - * - *
- * - *
- * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Start drawing the shape. - * beginShape(); - * - * // Add the curved segments. - * vertex(20, 20); - * quadraticVertex(80, 20, 50, 50); - * quadraticVertex(20, 80, 80, 80); - * - * // Add the straight segments. - * vertex(80, 10); - * vertex(20, 10); - * vertex(20, 20); - * - * // Stop drawing the shape. - * endShape(); - * - * describe('A white puzzle piece drawn on a gray background.'); - * } - * - *
- * - *
- * - * // Click the and drag the mouse to view the scene from a different angle. - * - * function setup() { - * createCanvas(100, 100, WEBGL); - * - * describe('A white puzzle piece on a dark gray background. When the user clicks and drags the scene, the outline of a second puzzle piece is revealed.'); - * } - * - * function draw() { - * background(50); - * - * // Enable orbiting with the mouse. - * orbitControl(); - * - * // Style the first puzzle piece. - * noStroke(); - * fill(255); - * - * // Draw the first puzzle piece. - * beginShape(); - * vertex(-30, -30, 0); - * quadraticVertex(30, -30, 0, 0, 0, 0); - * quadraticVertex(-30, 30, 0, 30, 30, 0); - * vertex(30, -40, 0); - * vertex(-30, -40, 0); - * vertex(-30, -30, 0); - * endShape(); - * - * // Style the second puzzle piece. - * stroke(255); - * noFill(); - * - * // Draw the second puzzle piece. - * beginShape(); - * vertex(-30, -30, -20); - * quadraticVertex(30, -30, -20, 0, 0, -20); - * quadraticVertex(-30, 30, -20, 30, 30, -20); - * vertex(30, -40, -20); - * vertex(-30, -40, -20); - * vertex(-30, -30, -20); - * endShape(); - * } - * - *
- */ - - /** - * @method quadraticVertex - * @param {Number} cx - * @param {Number} cy - * @param {Number} cz z-coordinate of the control point. - * @param {Number} x3 - * @param {Number} y3 - * @param {Number} z3 z-coordinate of the anchor point. - */ - fn.quadraticVertex = function(...args) { - let x1, y1, z1, x2, y2, z2 = 0; - if (args.length === 4) { - [x1, y1, x2, y2] = args; - } else { - [x1, y1, z1, x2, y2, z2] = args; - } - // p5._validateParameters('quadraticVertex', args); - const prevOrder = this.bezierOrder(); - this.bezierOrder(2); - this.bezierVertex(x1, y1, z1); - this.bezierVertex(x2, y2, z2); - this.bezierOrder(prevOrder); - return this; - }; - /** * Sets the normal vector for vertices in a custom 3D shape. * diff --git a/test/unit/core/vertex.js b/test/unit/core/vertex.js index 98077e03b1..a9b0425639 100644 --- a/test/unit/core/vertex.js +++ b/test/unit/core/vertex.js @@ -26,13 +26,6 @@ suite('Vertex', function() { }); }); - suite('p5.prototype.quadraticVertex', function() { - test('should be a function', function() { - assert.ok(myp5.quadraticVertex); - assert.typeOf(myp5.quadraticVertex, 'function'); - }); - }); - suite('p5.prototype.bezierVertex', function() { test('should be a function', function() { assert.ok(myp5.bezierVertex); diff --git a/test/unit/visual/cases/shapes.js b/test/unit/visual/cases/shapes.js index 83ec314049..222097f68d 100644 --- a/test/unit/visual/cases/shapes.js +++ b/test/unit/visual/cases/shapes.js @@ -193,9 +193,15 @@ visualSuite('Shape drawing', function() { visualTest('Drawing with cubic beziers', function(p5, screenshot) { setup(p5); p5.beginShape(); - p5.vertex(10, 10); - p5.bezierVertex(10, 10, 15, 40, 40, 35); - p5.bezierVertex(25, 15, 15, 25, 15, 25); + p5.bezierVertex(10, 10); + + p5.bezierVertex(10, 10); + p5.bezierVertex(15, 40); + p5.bezierVertex(40, 35); + + p5.bezierVertex(25, 15) + p5.bezierVertex(15, 25) + p5.bezierVertex(15, 25); p5.endShape(); screenshot(); }); @@ -203,10 +209,17 @@ visualSuite('Shape drawing', function() { visualTest('Drawing with quadratic beziers', function(p5, screenshot) { setup(p5); p5.beginShape(); - p5.vertex(10, 10); - p5.quadraticVertex(10, 10, 15, 40); - p5.quadraticVertex(40, 35, 25, 15); - p5.quadraticVertex(15, 25, 10, 10); + p5.bezierOrder(2); + p5.bezierVertex(10, 10); + + p5.bezierVertex(10, 10); + p5.bezierVertex(15, 40); + + p5.bezierVertex(40, 35); + p5.bezierVertex(25, 15); + + p5.bezierVertex(15, 25); + p5.bezierVertex(10, 10); p5.endShape(); screenshot(); }); @@ -367,7 +380,9 @@ visualSuite('Shape drawing', function() { p5.beginShape(); p5.vertex(10, 10, 0); p5.vertex(10, 40, -150); - p5.quadraticVertex(40, 40, 200, 40, 10, 150); + p5.bezierOrder(2); + p5.bezierVertex(40, 40, 200); + p5.bezierVertex(40, 10, 150); p5.endShape(p5.CLOSE); screenshot(); @@ -379,7 +394,9 @@ visualSuite('Shape drawing', function() { p5.beginShape(); p5.vertex(10, 10, 0); p5.vertex(10, 40, -150); - p5.bezierVertex(40, 40, 200, 40, 10, 150, 10, 10, 0); + p5.bezierVertex(40, 40, 200); + p5.bezierVertex(40, 10, 150); + p5.bezierVertex(10, 10, 0); p5.endShape(); screenshot(); diff --git a/test/unit/webgl/p5.Geometry.js b/test/unit/webgl/p5.Geometry.js index cb42cb32a2..536a9abfbc 100644 --- a/test/unit/webgl/p5.Geometry.js +++ b/test/unit/webgl/p5.Geometry.js @@ -223,11 +223,11 @@ suite('p5.Geometry', function() { myp5.cone(); myp5.beginShape(); - myp5.vertex(-20, -50); - myp5.quadraticVertex( - -40, -70, - 0, -60 - ); + myp5.bezierOrder(2); + myp5.bezierVertex(-20, -50); + + myp5.bezierVertex(-40, -70); + myp5.bezierVertex(0, -60); myp5.endShape(); myp5.beginShape(myp5.TRIANGLE_STRIP);