Merge pull request #7600 from processing/remove-old-shape-overloads

Remove old overloads for bezierVertex() and quadraticVertex()

Author: davepagurek

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
-   * <a href="#/p5/bezierVertex">bezierVertex()</a> function.
-   * `quadraticVertex()` must be called between the
-   * <a href="#/p5/beginShape">beginShape()</a> and
-   * <a href="#/p5/endShape">endShape()</a> functions. The curved segment uses
-   * the previous vertex as the first anchor point, so there must be at least
-   * one call to <a href="#/p5/vertex">vertex()</a> 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
-   * <a href="#/p5/beginShape">beginShape()</a>.
-   *
-   * @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
-   * <div>
-   * <code>
-   * 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.');
-   * }
-   * </code>
-   * </div>
-   *
-   * <div>
-   * <code>
-   * 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.');
-   * }
-   * </code>
-   * </div>
-   *
-   * <div>
-   * <code>
-   * // 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;
-   *   }
-   * }
-   * </code>
-   * </div>
-   *
-   * <div>
-   * <code>
-   * 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.');
-   * }
-   * </code>
-   * </div>
-   *
-   * <div>
-   * <code>
-   * // 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();
-   * }
-   * </code>
-   * </div>
-   */
-
-  /**
-   * @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.
    *

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);

test/unit/visual/cases/shapes.js

@@ -193,20 +193,33 @@ 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();
       });
 
       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();

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);