diff --git a/src/core/p5.Graphics.js b/src/core/p5.Graphics.js index 7744369532..751ec51fde 100644 --- a/src/core/p5.Graphics.js +++ b/src/core/p5.Graphics.js @@ -573,9 +573,6 @@ class Graphics { this._styles = []; - this._bezierDetail = 20; - this._curveDetail = 20; - // this._colorMode = RGB; // this._colorMaxes = { // rgb: [255, 255, 255, 255], diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js index 05300c76cd..89132d50c9 100644 --- a/src/core/p5.Renderer.js +++ b/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()?"); diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 5125e4000d..23f74bec4b 100644 --- a/src/core/p5.Renderer2D.js +++ b/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 ////////////////////////////////////////////// diff --git a/src/shape/curves.js b/src/shape/curves.js index 370011152e..c702851f0d 100644 --- a/src/shape/curves.js +++ b/src/shape/curves.js @@ -214,109 +214,6 @@ function curves(p5, fn){ return this; }; - /** - * Sets the number of segments used to draw Bézier curves in WebGL mode. - * - * 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 - * Bézier curve. For example, calling `bezierDetail(5)` will use 5 segments to - * draw curves with the bezier() function. By - * default,`detail` is 20. - * - * Note: `bezierDetail()` has no effect in 2D mode. - * - * @method bezierDetail - * @param {Number} detail number of segments to use. Defaults to 20. - * @chainable - * - * @example - *
- * - * // Draw the original curve. - * - * function setup() { - * createCanvas(100, 100); - * - * background(200); - * - * // Draw the anchor points in black. - * stroke(0); - * strokeWeight(5); - * point(85, 20); - * point(15, 80); - * - * // Draw the control points in red. - * stroke(255, 0, 0); - * point(10, 10); - * point(90, 90); - * - * // Draw a black bezier curve. - * noFill(); - * stroke(0); - * strokeWeight(1); - * bezier(85, 20, 10, 10, 90, 90, 15, 80); - * - * // Draw red lines from the anchor points to the control points. - * stroke(255, 0, 0); - * line(85, 20, 10, 10); - * line(15, 80, 90, 90); - * - * describe( - * 'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.' - * ); - * } - * - *
- * - *
- * - * // Draw the curve with less detail. - * - * function setup() { - * createCanvas(100, 100, WEBGL); - * - * background(200); - * - * // Set the curveDetail() to 5. - * bezierDetail(5); - * - * // Draw the anchor points in black. - * stroke(0); - * strokeWeight(5); - * point(35, -30, 0); - * point(-35, 30, 0); - * - * // Draw the control points in red. - * stroke(255, 0, 0); - * point(-40, -40, 0); - * point(40, 40, 0); - * - * // Draw a black bezier curve. - * noFill(); - * stroke(0); - * strokeWeight(1); - * bezier(35, -30, 0, -40, -40, 0, 40, 40, 0, -35, 30, 0); - * - * // Draw red lines from the anchor points to the control points. - * stroke(255, 0, 0); - * line(35, -30, -40, -40); - * line(-35, 30, 40, 40); - * - * describe( - * 'A gray square with three curves. A black s-curve is drawn with jagged segments. Two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.' - * ); - * } - * - *
- */ - fn.bezierDetail = function(d) { - // p5._validateParameters('bezierDetail', arguments); - this._bezierDetail = d; - return this; - }; - /** * Calculates coordinates along a Bézier curve using interpolation. * @@ -582,10 +479,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 +509,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 +551,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 +601,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 +627,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 +637,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 +652,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; }; diff --git a/test/unit/core/curves.js b/test/unit/core/curves.js index dbad66940d..125fe1ae5c 100644 --- a/test/unit/core/curves.js +++ b/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'); }); });