Overhaul custom shapes for p5.js 2.0

preview/index.html

@@ -20,25 +20,24 @@
     import p5 from '../src/app.js';
 
     const sketch = function (p) {
-      let g, f;
-
       p.setup = function () {
-        p.createCanvas(200, 200);
-        g = p.createGraphics(200, 200);
-        f = p.createGraphics(200, 200, p.WEBGL);
+        p.createCanvas(200, 200); // , p.WEBGL
       };
 
       p.draw = function () {
         p.background(0, 50, 50);
-        p.circle(100, 100, 50);
-
-        p.fill('white');
-        p.textSize(30);
-        p.text('hello', 10, 30);
-
-        // f.fill('red');
-        f.sphere();
-        p.image(f, 0, 0);
+        //p.translate(-p.width/2, -p.height/2);
+        p.fill('red');
+        p.stroke('white');
+        p.strokeWeight(10);
+        p.beginShape();
+        p.splineEnds(p.JOIN);
+        p.splineVertex(50, 50);
+        p.splineVertex(100, 50);
+        p.splineVertex(100, 100);
+        p.splineVertex(50, 100);
+        p.splineVertex(70, 70);
+        p.endShape(); // p.CLOSE
       };
     };
 

src/color/p5.Color.js

@@ -466,6 +466,10 @@ class Color {
   }
 
   get _array() {
+    return this.array();
+  }
+
+  array() {
     return [...this.color.coords, this.color.alpha];
   }
 

src/color/setting.js

@@ -1269,7 +1269,7 @@ function setting(p5, fn){
    * </div>
    */
   fn.noFill = function() {
-    this._renderer.states.doFill = false;
+    this._renderer.noFill();
     return this;
   };
 
@@ -1325,7 +1325,7 @@ function setting(p5, fn){
    * </div>
    */
   fn.noStroke = function() {
-    this._renderer.states.doStroke = false;
+    this._renderer.states.strokeColor = null;
     return this;
   };
 

src/core/constants.js

@@ -768,6 +768,18 @@ export const QUAD_STRIP = 'quad_strip';
  * @final
  */
 export const TESS = 'tess';
+/**
+ * @typedef {0x0007} EMPTY_PATH
+ * @property {EMPTY_PATH} EMPTY_PATH
+ * @final
+ */
+export const EMPTY_PATH = 0x0007;
+/**
+ * @typedef {0x0008} PATH
+ * @property {PATH} PATH
+ * @final
+ */
+export const PATH = 0x0008;
 /**
  * @typedef {'close'} CLOSE
  * @property {CLOSE} CLOSE
@@ -1330,4 +1342,30 @@ export const HALF_FLOAT = 'half-float';
  * @property {RGBA} RGBA
  * @final
  */
-export const RGBA = 'rgba';
+export const RGBA = 'rgba';
+
+/**
+ * The `splineEnds` mode where splines curve through
+ * their first and last points.
+ * @typedef {unique symbol} P2D
+ * @property {SHOW} SHOW
+ * @final
+ */
+export const SHOW = Symbol('show');
+
+/**
+ * The `splineEnds` mode where the first and last points in a spline
+ * affect the direction of the curve, but are not rendered.
+ * @typedef {unique symbol} P2D
+ * @property {HIDE} HIDE
+ * @final
+ */
+export const HIDE = Symbol('hide');
+
+/**
+ * The `splineEnds` mode where the spline loops back to its first point.
+ * @typedef {unique symbol} P2D
+ * @property {JOIN} JOIN
+ * @final
+ */
+export const JOIN = Symbol('join');

src/core/main.js

@@ -414,9 +414,6 @@ class p5 {
 
     this._styles = [];
 
-    this._bezierDetail = 20;
-    this._curveDetail = 20;
-
     this._colorMode = constants.RGB;
     this._colorMaxes = {
       rgb: [255, 255, 255, 255],

src/core/p5.Renderer.js

@@ -4,8 +4,11 @@
  * @for p5
  */
 
+import { Color } from '../color/p5.Color';
 import * as constants from '../core/constants';
 import { Image } from '../image/p5.Image';
+import { Vector } from '../math/p5.Vector';
+import { Shape } from '../shape/custom_shapes';
 
 class Renderer {
   constructor(pInst, w, h, isMainCanvas) {
@@ -25,9 +28,9 @@ class Renderer {
 
     // Renderer state machine
     this.states = {
-      doStroke: true,
+      strokeColor: new Color([0, 0, 0]),
       strokeSet: false,
-      doFill: true,
+      fillColor: new Color([255, 255, 255]),
       fillSet: false,
       tint: null,
       imageMode: constants.CORNER,
@@ -40,7 +43,9 @@ class Renderer {
       textAlign: constants.LEFT,
       textBaseline: constants.BASELINE,
       textStyle: constants.NORMAL,
-      textWrap: constants.WORD
+      textWrap: constants.WORD,
+      bezierOrder: 3,
+      splineEnds: constants.SHOW
     };
     this._pushPopStack = [];
     // NOTE: can use the length of the push pop stack instead
@@ -49,6 +54,8 @@ class Renderer {
     this._clipping = false;
     this._clipInvert = false;
     this._curveTightness = 0;
+
+    this.currentShape = new Shape(this.vertexProperties());
   }
 
   remove() {
@@ -91,6 +98,84 @@ class Renderer {
   pop() {
     this._pushPopDepth--;
     Object.assign(this.states, this._pushPopStack.pop());
+    this.updateShapeVertexProperties();
+    this.updateShapeProperties();
+  }
+
+  bezierOrder(order) {
+    if (order === undefined) {
+      return this.states.bezierOrder;
+    } else {
+      this.states.bezierOrder = order;
+      this.updateShapeProperties();
+    }
+  }
+
+  bezierVertex(x, y, z = 0, u = 0, v = 0) {
+    const position = new Vector(x, y, z);
+    const textureCoordinates = new Vector(u, v);
+    this.currentShape.bezierVertex(position, textureCoordinates);
+  }
+
+  splineEnds(mode) {
+    if (mode === undefined) {
+      return this.states.splineEnds;
+    } else {
+      this.states.splineEnds = mode;
+    }
+    this.updateShapeProperties();
+  }
+
+  splineVertex(x, y, z = 0, u = 0, v = 0) {
+    const position = new Vector(x, y, z);
+    const textureCoordinates = new Vector(u, v);
+    this.currentShape.splineVertex(position, textureCoordinates);
+  }
+
+  curveDetail(d) {
+    if (d === undefined) {
+      return this.states.curveDetail;
+    } else {
+      this.states.curveDetail = d;
+    }
+  }
+
+  beginShape(...args) {
+    this.currentShape.reset();
+    this.currentShape.beginShape(...args);
+  }
+
+  endShape(...args) {
+    this.currentShape.endShape(...args);
+    this.drawShape(this.currentShape);
+  }
+
+  drawShape(shape, count) {
+    throw new Error('Unimplemented')
+  }
+
+  vertex(x, y) {
+    let z, u, v;
+
+    // default to (x, y) mode: all other arguments assumed to be 0.
+    z = u = v = 0;
+
+    if (arguments.length === 3) {
+      // (x, y, z) mode: (u, v) assumed to be 0.
+      z = arguments[2];
+    } else if (arguments.length === 4) {
+      // (x, y, u, v) mode: z assumed to be 0.
+      u = arguments[2];
+      v = arguments[3];
+    } else if (arguments.length === 5) {
+      // (x, y, z, u, v) mode
+      z = arguments[2];
+      u = arguments[3];
+      v = arguments[4];
+    }
+    const position = new Vector(x, y, z);
+    const textureCoordinates = new Vector(u, v);
+    this.currentShape.vertex(position, textureCoordinates);
   }
 
   beginClip(options = {}) {
@@ -153,14 +238,43 @@ class Renderer {
 
   }
 
-  fill() {
+  fill(...args) {
     this.states.fillSet = true;
-    this.states.doFill = true;
+    this.states.fillColor = this._pInst.color(...args);
+    this.updateShapeVertexProperties();
   }
 
-  stroke() {
+  noFill() {
+    this.states.fillColor = null;
+  }
+
+  stroke(...args) {
     this.states.strokeSet = true;
-    this.states.doStroke = true;
+    this.states.strokeColor = this._pInst.color(...args);
+    this.updateShapeVertexProperties();
+  }
+
+  noStroke() {
+    this.states.strokeColor = null;
+  }
+
+  vertexProperties() {
+    return {
+      stroke: this.states.strokeColor,
+      fill: this.states.fillColor,
+    }
+  }
+
+  updateShapeProperties() {
+    this.currentShape.bezierOrder(this.states.bezierOrder);
+    this.currentShape.splineEnds(this.states.splineEnds);
+  }
+
+  updateShapeVertexProperties() {
+    const props = this.vertexProperties();
+    for (const key in props) {
+      this.currentShape[key](props[key]);
+    }
   }
 
   textSize(s) {
@@ -254,7 +368,7 @@ class Renderer {
     // fix for #5785 (top of bounding box)
     let finalMinHeight = y;
 
-    if (!(this.states.doFill || this.states.doStroke)) {
+    if (!(this.states.fillColor || this.states.strokeColor)) {
       return;
     }