Rename curve() to spline()

Author: davepagurek

src/core/p5.Renderer.js

@@ -212,6 +212,24 @@ class Renderer {
     this.currentShape.vertex(position, textureCoordinates);
   }
 
+  bezier(x1, y1, x2, y2, x3, y3, x4, y4) {
+    this._pInst.beginShape();
+    this._pInst.vertex(x1, y1);
+    this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4);
+    this._pInst.endShape();
+    return this;
+  }
+
+  spline(x1, y1, x2, y2, x3, y3, x4, y4) {
+    this._pInst.beginShape();
+    this._pInst.splineVertex(x1, y1);
+    this._pInst.splineVertex(x2, y2);
+    this._pInst.splineVertex(x3, y3);
+    this._pInst.splineVertex(x4, y4);
+    this._pInst.endShape();
+    return this;
+  }
+
   beginClip(options = {}) {
     if (this._clipping) {
       throw new Error("It looks like you're trying to clip while already in the middle of clipping. Did you forget to endClip()?");

src/core/p5.Renderer2D.js

@@ -264,7 +264,7 @@ class Renderer2D extends Renderer {
     shape.accept(visitor);
     if (this._clipping) {
       this.clipPath.addPath(visitor.path);
-      this.clipPath.closePath();      
+      this.clipPath.closePath();
     } else {
       if (this.states.fillColor) {
         this.drawingContext.fill(visitor.path);
@@ -969,27 +969,6 @@ class Renderer2D extends Renderer {
     }
   }
 
-  //////////////////////////////////////////////
-  // SHAPE | Curves
-  //////////////////////////////////////////////
-  bezier(x1, y1, x2, y2, x3, y3, x4, y4) {
-    this._pInst.beginShape();
-    this._pInst.vertex(x1, y1);
-    this._pInst.bezierVertex(x2, y2, x3, y3, x4, y4);
-    this._pInst.endShape();
-    return this;
-  }
-
-  curve(x1, y1, x2, y2, x3, y3, x4, y4) {
-    this._pInst.beginShape();
-    this._pInst.splineVertex(x1, y1);
-    this._pInst.splineVertex(x2, y2);
-    this._pInst.splineVertex(x3, y3);
-    this._pInst.splineVertex(x4, y4);
-    this._pInst.endShape();
-    return this;
-  }
-
   //////////////////////////////////////////////
   // TRANSFORM
   //////////////////////////////////////////////

src/shape/curves.js

@@ -582,10 +582,10 @@ function curves(p5, fn){
    * point.
    *
    * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
-   * `curve()` has twelve arguments because each point has x-, y-, and
+   * `spline()` has twelve arguments because each point has x-, y-, and
    * z-coordinates.
    *
-   * @method curve
+   * @method spline
    * @param  {Number} x1 x-coordinate of the first control point.
    * @param  {Number} y1 y-coordinate of the first control point.
    * @param  {Number} x2 x-coordinate of the first anchor point.
@@ -612,8 +612,8 @@ function curves(p5, fn){
    *
    *   // 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);
@@ -654,12 +654,12 @@ function curves(p5, fn){
    *   noFill();
    *   strokeWeight(1);
    *   stroke(0);
-   *   curve(x1, y1, 73, 24, 73, 61, 15, 65);
+   *   spline(x1, y1, 73, 24, 73, 61, 15, 65);
    *
    *   // Draw red spline curves from the anchor points to the control points.
    *   stroke(255, 0, 0);
-   *   curve(x1, y1, x1, y1, 73, 24, 73, 61);
-   *   curve(73, 24, 73, 61, 15, 65, 15, 65);
+   *   spline(x1, y1, x1, y1, 73, 24, 73, 61);
+   *   spline(73, 24, 73, 61, 15, 65, 15, 65);
    *
    *   // Draw the anchor points in black.
    *   strokeWeight(5);
@@ -704,7 +704,7 @@ function curves(p5, fn){
    *
    *   // Draw the red balloon.
    *   fill('red');
-   *   curve(-150, 275, 50, 60, 50, 60, 250, 275);
+   *   spline(-150, 275, 50, 60, 50, 60, 250, 275);
    *
    *   // Draw the balloon string.
    *   line(50, 60, 50, 80);
@@ -730,7 +730,7 @@ function curves(p5, fn){
    *
    *   // Draw the red balloon.
    *   fill('red');
-   *   curve(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);
+   *   spline(-200, 225, 0, 0, 10, 0, 0, 10, 0, 200, 225, 0);
    *
    *   // Draw the balloon string.
    *   line(0, 10, 0, 0, 30, 0);
@@ -740,7 +740,7 @@ function curves(p5, fn){
    */
 
   /**
-   * @method curve
+   * @method spline
    * @param  {Number} x1
    * @param  {Number} y1
    * @param  {Number} z1 z-coordinate of the first control point.
@@ -755,12 +755,13 @@ function curves(p5, fn){
    * @param  {Number} z4 z-coordinate of the second control point.
    * @chainable
    */
-  fn.curve = function(...args) {
+  fn.spline = function(...args) {
     // p5._validateParameters('curve', args);
 
-    if (this._renderer.states.strokeColor) {
-      this._renderer.curve(...args);
+    if (!this._renderer.states.strokeColor && !this._renderer.states.fillColor) {
+      return this;
     }
+    this._renderer.spline(...args);
 
     return this;
   };

test/unit/core/curves.js

@@ -50,10 +50,10 @@ suite('Curves', function() {
     });
   });
 
-  suite('p5.prototype.curve', function() {
+  suite('p5.prototype.spline', function() {
     test('should be a function', function() {
-      assert.ok(mockP5Prototype.curve);
-      assert.typeOf(mockP5Prototype.curve, 'function');
+      assert.ok(mockP5Prototype.spline);
+      assert.typeOf(mockP5Prototype.spline, 'function');
     });
   });