Build base classes and visitors for custom shapes in p5.js 2.0

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

@@ -696,6 +696,18 @@ export const BOTTOM = 'bottom';
  * @final
  */
 export const BASELINE = 'alphabetic';
+/**
+ * @typedef {unique symbol} PATH
+ * @property {PATH} PATH
+ * @final
+ */
+export const PATH = Symbol('path');
+/**
+ * @typedef {unique symbol} EMPTY_PATH
+ * @property {EMPTY_PATH} EMPTY_PATH
+ * @final
+ */
+export const EMPTY_PATH = Symbol('empty_path');
 /**
  * @typedef {0x0000} POINTS
  * @property {POINTS} POINTS

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,
@@ -49,6 +52,8 @@ class Renderer {
     this._clipping = false;
     this._clipInvert = false;
     this._curveTightness = 0;
+
+    this.currentShape = new Shape(this.vertexProperties());
   }
 
   remove() {
@@ -91,6 +96,45 @@ class Renderer {
   pop() {
     this._pushPopDepth--;
     Object.assign(this.states, this._pushPopStack.pop());
+    this.updateShapeVertexProperties();
+  }
+
+  beginShape(...args) {
+    this.currentShape.reset();
+    this.currentShape.beginShape(...args);
+  }
+
+  endShape(...args) {
+    this.currentShape.endShape(...args);
+    this.drawShape(this.currentShape);
+  }
+
+  drawShape(shape) {
+    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 +197,38 @@ 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,
+    }
+  }
+
+  updateShapeVertexProperties() {
+    const props = this.vertexProperties();
+    for (const key in props) {
+      this.currentShape[key](props[key]);
+    }
   }
 
   textSize(s) {
@@ -254,7 +322,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;
     }