Merge branch 'dev-2.0' into webgpu-compute-auto-spread

Author: davepagurek

src/core/friendly_errors/param_validator.js

@@ -64,7 +64,7 @@ function validateParams(p5, fn, lifecycles) {
     'Boolean': z.boolean(),
     'Function': z.function(),
     'Integer': z.number().int(),
-    'Number': z.number(),
+    'Number': z.union([z.number(), z.literal(Infinity), z.literal(-Infinity)]),
     'Object': z.object({}),
     'String': z.string()
   };
@@ -411,33 +411,44 @@ function validateParams(p5, fn, lifecycles) {
     // of any of them. In this case, aggregate all possible types and print
     // a friendly error message that indicates what the expected types are at
     // which position (position is not 0-indexed, for accessibility reasons).
+
     const processUnionError = error => {
       const expectedTypes = new Set();
       let actualType;
 
-      error.errors.forEach(err => {
-        const issue = err[0];
-        if (issue) {
-          if (!actualType) {
-            actualType = issue.message;
-          }
+      const collectIssue = issue => {
+        if (!issue) return;
+        if (!actualType) {
+          actualType = issue.message;
+        }
 
-          if (issue.code === 'invalid_type') {
-            actualType = issue.message.split(', received ')[1];
-            expectedTypes.add(issue.expected);
-          }
-          // The case for constants. Since we don't want to print out the actual
-          // constant values in the error message, the error message will
-          // direct users to the documentation.
-          else if (issue.code === 'invalid_value') {
+        if (issue.code === 'invalid_type') {
+          actualType = issue.message.split(', received ')[1];
+          expectedTypes.add(issue.expected);
+        }
+        // The case for constants. Since we don't want to print out the actual
+        // constant values in the error message, the error message will
+        // direct users to the documentation.
+        else if (issue.code === 'invalid_value') {
+          if (Array.isArray(issue.values) && issue.values.every(v => v === Infinity || v === -Infinity)) {
+            expectedTypes.add('number');
+          } else {
             expectedTypes.add('constant (please refer to documentation for allowed values)');
             actualType = args[error.path[0]];
-          } else if (issue.code === 'custom') {
-            const match = issue.message.match(/Input not instance of (\w+)/);
-            if (match) expectedTypes.add(match[1]);
-            actualType = undefined;
           }
+        } else if (issue.code === 'custom') {
+          const match = issue.message.match(/Input not instance of (\w+)/);
+          if (match) expectedTypes.add(match[1]);
+          actualType = undefined;
+        } else if (issue.code === 'invalid_union') {
+          issue.errors.forEach(nestedErr => {
+            nestedErr.forEach(nestedIssue => collectIssue(nestedIssue));
+          });
         }
+      };
+
+      error.errors.forEach(err => {
+        err.forEach(issue => collectIssue(issue));
       });
 
       if (expectedTypes.size > 0) {
@@ -458,6 +469,7 @@ function validateParams(p5, fn, lifecycles) {
       return message;
     };
 
+
     switch (currentError.code) {
       case 'invalid_union': {
         processUnionError(currentError);

src/core/p5.Renderer2D.js

@@ -287,10 +287,10 @@ class Renderer2D extends Renderer {
       this.clipPath.closePath();
     } else {
       if (this.states.fillColor) {
-        this.drawingContext.fill(visitor.path);
+        this.drawingContext.fill(visitor.fillPath || visitor.path);
       }
       if (this.states.strokeColor) {
-        this.drawingContext.stroke(visitor.path);
+        this.drawingContext.stroke(visitor.strokePath || visitor.path);
       }
     }
   }
@@ -672,106 +672,35 @@ class Renderer2D extends Renderer {
    *   start <= stop < start + TWO_PI
    */
   arc(x, y, w, h, start, stop, mode) {
-    const ctx = this.drawingContext;
-    const rx = w / 2.0;
-    const ry = h / 2.0;
-    const epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
-    let arcToDraw = 0;
-    const curves = [];
-
-    const centerX = x + w / 2,
-      centerY = y + h / 2,
-      radiusX = w / 2,
-      radiusY = h / 2;
-    if (this._clipping) {
-      const tempPath = new Path2D();
-      tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-      const currentTransform = this.drawingContext.getTransform();
-      const clipBaseTransform = this._clipBaseTransform.inverse();
-      const relativeTransform = clipBaseTransform.multiply(currentTransform);
-      this.clipPath.addPath(tempPath, relativeTransform);
-      return this;
-    }
-    // Determines whether to add a line to the center, which should be done
-    // when the mode is PIE or default; as well as when the start and end
-    // angles do not form a full circle.
-    const createPieSlice = ! (
-      mode === constants.CHORD ||
-      mode === constants.OPEN ||
-      (stop - start) % constants.TWO_PI === 0
+    const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
+    shape.beginShape();
+    shape.arcPrimitive(
+      x,
+      y,
+      w,
+      h,
+      start,
+      stop,
+      mode
     );
-
-    // Fill curves
-    if (this.states.fillColor) {
-      ctx.beginPath();
-      ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-      if (createPieSlice) ctx.lineTo(centerX, centerY);
-      ctx.closePath();
-      ctx.fill();
-    }
-
-    // Stroke curves
-    if (this.states.strokeColor) {
-      ctx.beginPath();
-      ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-
-      if (mode === constants.PIE && createPieSlice) {
-        // In PIE mode, stroke is added to the center and back to path,
-        // unless the pie forms a complete ellipse (see: createPieSlice)
-        ctx.lineTo(centerX, centerY);
-      }
-
-      if (mode === constants.PIE || mode === constants.CHORD) {
-        // Stroke connects back to path begin for both PIE and CHORD
-        ctx.closePath();
-      }
-      ctx.stroke();
-    }
+    shape.endShape();
+    this.drawShape(shape);
 
     return this;
 
   }
 
   ellipse(args) {
-    const ctx = this.drawingContext;
-    const doFill = !!this.states.fillColor,
-      doStroke = this.states.strokeColor;
     const x = parseFloat(args[0]),
       y = parseFloat(args[1]),
       w = parseFloat(args[2]),
       h = parseFloat(args[3]);
-    if (doFill && !doStroke) {
-      if (this._getFill() === styleEmpty) {
-        return this;
-      }
-    } else if (!doFill && doStroke) {
-      if (this._getStroke() === styleEmpty) {
-        return this;
-      }
-    }
-    const centerX = x + w / 2,
-      centerY = y + h / 2,
-      radiusX = w / 2,
-      radiusY = h / 2;
-    if (this._clipping) {
-      const tempPath = new Path2D();
-      tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
-      const currentTransform = this.drawingContext.getTransform();
-      const clipBaseTransform = this._clipBaseTransform.inverse();
-      const relativeTransform = clipBaseTransform.multiply(currentTransform);
-      this.clipPath.addPath(tempPath, relativeTransform);
-      return this;
-    }
-    ctx.beginPath();
-    ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
-    ctx.closePath();
-    if (doFill) {
-      ctx.fill();
-    }
-    if (doStroke) {
-      ctx.stroke();
-    }
 
+    const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
+    shape.beginShape();
+    shape.ellipsePrimitive(x,y,w,h);
+    shape.endShape();
+    this.drawShape(shape);
     return this;
   }
 

src/image/filterRenderer2D.js

@@ -299,7 +299,10 @@ class FilterRenderer2D {
             'vec4 getColor': `(FilterInputs inputs, in sampler2D canvasContent) {
               return getTexture(canvasContent, inputs.texCoord);
             }`
-          }
+          },
+          hookAliases: {
+            'getColor': ['filterColor'],
+          },
         }
       );
     }

src/math/p5.Vector.js

@@ -1034,7 +1034,7 @@ class Vector {
    *
    * If only one value is provided, as in `v.div(2)`, then all the components
    * will be divided by 2. If a value isn't provided for a component, it
-   * won't change. For example, `v.div(4, 5)` divides `v.x` by, `v.y` by 5,
+   * won't change. For example, `v.div(4, 5)` divides `v.x` by 4, `v.y` by 5,
    * and `v.z` by 1. Calling `div()` with no arguments, as in `v.div()`, has
    * no effect.
    *