p5 2.2.3 → 2.3.0-rc.1

package/dist/shape/2d_primitives.js

@@ -1,12 +1,10 @@
-import { p as CORNER, q as TWO_PI, r as HALF_PI, s as PI } from '../constants-BdTiYOQI.js';
+import { n as CORNER, o as TWO_PI, p as HALF_PI, q as PI } from '../constants-0wkVUfqa.js';
 import canvas from '../core/helpers.js';
 
 /**
  * @module Shape
  * @submodule 2D Primitives
  * @for p5
- * @requires core
- * @requires constants
  */
 
 
@@ -1080,7 +1078,6 @@ function primitives(p5, fn){
    *   rect(-20, -30, 55, 55);
    * }
    */
-
   /**
    * @method rect
    * @param  {Number} x

package/dist/shape/attributes.js

@@ -1,11 +1,9 @@
-import { p as CORNER, t as CORNERS, u as RADIUS, v as CENTER, w as ROUND, x as SQUARE, y as PROJECT, z as BEVEL, I as MITER } from '../constants-BdTiYOQI.js';
+import { n as CORNER, r as CORNERS, s as RADIUS, t as CENTER, u as ROUND, v as SQUARE, w as PROJECT, x as BEVEL, y as MITER } from '../constants-0wkVUfqa.js';
 
 /**
  * @module Shape
  * @submodule Attributes
  * @for p5
- * @requires core
- * @requires constants
  */
 
 
@@ -36,6 +34,8 @@ function attributes(p5, fn){
    * the constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this
    * way. JavaScript is a case-sensitive language.
    *
+   * Calling `ellipseMode()` without an argument returns the current ellipseMode, either `CENTER`, `RADIUS`, `CORNER`, or `CORNERS`.
+   * 
    * @method ellipseMode
    * @param  {(CENTER|RADIUS|CORNER|CORNERS)} mode either CENTER, RADIUS, CORNER, or CORNERS
    * @chainable
@@ -78,8 +78,15 @@ function attributes(p5, fn){
    *   describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
    * }
    */
+  /**
+   * @method ellipseMode
+   * @return {(CENTER|RADIUS|CORNER|CORNERS)}      the current ellipseMode.
+   */
   fn.ellipseMode = function(m) {
     // p5._validateParameters('ellipseMode', arguments);
+    if (typeof m === 'undefined') { // getter
+      return this._renderer?.states.ellipseMode;
+    }
     if (
       m === CORNER ||
       m === CORNERS ||
@@ -101,8 +108,10 @@ function attributes(p5, fn){
    * In WebGL mode, `noSmooth()` causes all shapes to be drawn with jagged
    * (aliased) edges. The functions don't affect images or fonts.
    *
+   * Note: In WebGPU mode, you must `await` this function.
+   *
    * @method noSmooth
-   * @chainable
+   * @return {void|Promise<void>}
    *
    * @example
    * let heart;
@@ -156,10 +165,10 @@ function attributes(p5, fn){
       if ('imageSmoothingEnabled' in this.drawingContext) {
         this.drawingContext.imageSmoothingEnabled = false;
       }
+      return this;
     } else {
-      this.setAttributes('antialias', false);
+      return this.setAttributes('antialias', false);
     }
-    return this;
   };
 
   /**
@@ -187,6 +196,8 @@ function attributes(p5, fn){
    * constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this way.
    * JavaScript is a case-sensitive language.
    *
+   * Calling `rectMode()` without an argument returns the current rectMode, either `CORNER`, `CORNERS`, `CENTER`, or `RADIUS`.
+   *
    * @method rectMode
    * @param  {(CENTER|RADIUS|CORNER|CORNERS)} mode either CORNER, CORNERS, CENTER, or RADIUS
    * @chainable
@@ -255,8 +266,15 @@ function attributes(p5, fn){
    *   describe('A small gray square drawn at the center of a white square.');
    * }
    */
+  /**
+   * @method rectMode
+   * @return {(CENTER|RADIUS|CORNER|CORNERS)}      the current rectMode.
+   */
   fn.rectMode = function(m) {
     // p5._validateParameters('rectMode', arguments);
+    if (typeof m === 'undefined') { // getter
+      return this._renderer?.states.rectMode;
+    }
     if (
       m === CORNER ||
       m === CORNERS ||
@@ -381,6 +399,9 @@ function attributes(p5, fn){
    */
   fn.strokeCap = function(cap) {
     // p5._validateParameters('strokeCap', arguments);
+    if (typeof cap === 'undefined') { // getter
+      return this._renderer.strokeCap();
+    }
     if (
       cap === ROUND ||
       cap === SQUARE ||
@@ -402,6 +423,8 @@ function attributes(p5, fn){
    * the constants `MITER`, `BEVEL`, and `ROUND` are defined this way.
    * JavaScript is a case-sensitive language.
    *
+   * Calling `strokeJoin()` without an argument returns the current stroke join style, either `MITER`, `BEVEL`, or `ROUND`.
+   *
    * @method strokeJoin
    * @param  {(MITER|BEVEL|ROUND)} join either MITER, BEVEL, or ROUND
    * @chainable
@@ -468,8 +491,15 @@ function attributes(p5, fn){
    *   describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
    * }
    */
+  /**
+   * @method strokeJoin
+   * @return {(MITER|BEVEL|ROUND)}      the current stroke join style.
+   */
   fn.strokeJoin = function(join) {
     // p5._validateParameters('strokeJoin', arguments);
+    if (typeof join === 'undefined') { // getter
+      return this._renderer.strokeJoin();
+    }
     if (
       join === ROUND ||
       join === BEVEL ||
@@ -486,6 +516,8 @@ function attributes(p5, fn){
    *
    * Note: `strokeWeight()` is affected by transformations, especially calls to
    * <a href="#/p5/scale">scale()</a>.
+   * 
+   * Calling `strokeWeight()` without an argument returns the current stroke weight as a number.
    *
    * @method strokeWeight
    * @param  {Number} weight the weight of the stroke (in pixels).
@@ -528,10 +560,13 @@ function attributes(p5, fn){
    *   describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
    * }
    */
+  /**
+   * @method strokeWeight
+   * @return {Number} the current stroke weight.
+   */
   fn.strokeWeight = function(w) {
     // p5._validateParameters('strokeWeight', arguments);
-    this._renderer.strokeWeight(w);
-    return this;
+    return this._renderer.strokeWeight(w);
   };
 }
 

package/dist/shape/curves.js

@@ -2,7 +2,6 @@
  * @module Shape
  * @submodule Curves
  * @for p5
- * @requires core
  */
 
 function curves(p5, fn){

package/dist/shape/custom_shapes.js

@@ -1,6 +1,6 @@
-import { C as Color } from '../creating_reading-C7hu6sg1.js';
+import { C as Color } from '../creating_reading-DLkHH80h.js';
 import { Vector } from '../math/p5.Vector.js';
-import { J as INCLUDE, K as PATH, O as EMPTY_PATH, Q as OPEN, V as CLOSE, X as POINTS, Y as LINES, c as TRIANGLES, Z as QUADS, _ as TRIANGLE_FAN, T as TRIANGLE_STRIP, $ as QUAD_STRIP, a0 as EXCLUDE, a1 as JOIN } from '../constants-BdTiYOQI.js';
+import { I as INCLUDE, z as PATH, G as EMPTY_PATH, O as OPEN, J as CLOSE, K as POINTS, Q as LINES, c as TRIANGLES, V as QUADS, X as TRIANGLE_FAN, T as TRIANGLE_STRIP, Y as QUAD_STRIP, Z as EXCLUDE, _ as JOIN, $ as CHORD, a0 as PIE } from '../constants-0wkVUfqa.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
 
@@ -8,8 +8,6 @@ import '../color/color_spaces/hsb.js';
  * @module Shape
  * @submodule Custom Shapes
  * @for p5
- * @requires core
- * @requires constants
  */
 
 
@@ -468,6 +466,85 @@ class Quad extends ShapePrimitive {
   }
 }
 
+/*
+ * TODO: Future enhancement — align with arcVertex proposal (#6459)
+ * Currently stores start/stop angles and mode (OPEN/CHORD/PIE).
+ * For full SVG compatibility and arcs inside beginShape/endShape,
+ * we may want to add an arc-to-vertex variant that matches the
+ * arcVertex() API discussed in #6459.
+ */
+
+class ArcPrimitive extends ShapePrimitive {
+  #x;
+  #y;
+  #w;
+  #h;
+  #start;
+  #stop;
+  #mode;
+  #vertexCapacity = 2;
+
+  constructor(startVertex, endVertex, x, y, w, h, start, stop, mode) {
+    // ShapePrimitive requires at least one vertex; pass a placeholder
+    super(startVertex, endVertex);
+    this.#x = x;
+    this.#y = y;
+    this.#w = w;
+    this.#h = h;
+    this.#start = start;
+    this.#stop = stop;
+    this.#mode = mode;
+  }
+
+  get x() { return this.#x; }
+  get y() { return this.#y; }
+  get w() { return this.#w; }
+  get h() { return this.#h; }
+  get start() { return this.#start; }
+  get stop() { return this.#stop; }
+  get mode() { return this.#mode; }
+  get startVertex() { return this.vertices[0]; }
+  get endVertex() { return this.vertices[1]; }
+
+  get vertexCapacity() {
+    return this.#vertexCapacity;
+  }
+
+  accept(visitor) {
+    visitor.visitArcPrimitive(this);
+  }
+}
+
+class EllipsePrimitive extends ShapePrimitive {
+  #x;
+  #y;
+  #w;
+  #h;
+  #vertexCapacity = 1;
+
+  constructor(centerVertex, x, y, w, h) {
+
+    super(centerVertex);
+    this.#x = x;
+    this.#y = y;
+    this.#w = w;
+    this.#h = h;
+  }
+
+  get x() { return this.#x; }
+  get y() { return this.#y; }
+  get w() { return this.#w; }
+  get h() { return this.#h; }
+
+  get vertexCapacity() {
+    return this.#vertexCapacity;
+  }
+
+  accept(visitor) {
+    visitor.visitEllipsePrimitive(this);
+  }
+}
+
 // ---- TESSELLATION PRIMITIVES ----
 
 class TriangleFan extends ShapePrimitive {
@@ -907,6 +984,49 @@ class Shape {
     this.#generalVertex('arcVertex', position, textureCoordinates);
   }
 
+
+  arcPrimitive(x,y,w,h,start,stop,mode){
+    this.beginShape();
+    const centerX = x+w/2;
+    const centerY = y+h/2;
+    const radiusX = w / 2;
+    const radiusY = h / 2;
+
+    const startVertex = this.#createVertex(
+      new Vector(
+        centerX + radiusX * Math.cos(start),
+        centerY + radiusY * Math.sin(start)
+      )
+    );
+
+    const endVertex = this.#createVertex(
+      new Vector(
+        centerX + radiusX * Math.cos(stop),
+        centerY + radiusY * Math.sin(stop)
+      )
+    );
+
+    const primitive = new ArcPrimitive(
+      startVertex,
+      endVertex,
+      x, y, w, h,
+      start,
+      stop,
+      mode
+    );
+    primitive.addToShape(this);
+    this.endShape();
+    return this;
+
+  }
+
+  ellipsePrimitive(x,y,w,h){
+    const centerVertex = this.#createVertex(new Vector(x+w/2,y+h/2));
+
+    const primitive = new EllipsePrimitive(centerVertex, x, y, w, h);
+    return primitive.addToShape(this);
+  }
+
   beginContour(shapeKind = PATH) {
     if (this.at(-1)?.kind === EMPTY_PATH) {
       this.contours.pop();
@@ -1005,6 +1125,12 @@ class PrimitiveVisitor {
   visitArcSegment(arcSegment) {
     throw new Error('Method visitArcSegment() has not been implemented.');
   }
+  visitArcPrimitive(arc) {
+    throw new Error('Method visitArcPrimitive() has not been implemented.');
+  }
+  visitEllipsePrimitive(ellipse) {
+    throw new Error('Method visitEllipsePrimitive() has not been implemented.');
+  }
 
   // isolated primitives
   visitPoint(point) {
@@ -1035,6 +1161,8 @@ class PrimitiveVisitor {
 // requires testing
 class PrimitiveToPath2DConverter extends PrimitiveVisitor {
   path = new Path2D();
+  strokePath = null;
+  fillPath = null;
   strokeWeight;
 
   constructor({ strokeWeight }) {
@@ -1153,6 +1281,59 @@ class PrimitiveToPath2DConverter extends PrimitiveVisitor {
       this.path.closePath();
     }
   }
+  visitArcPrimitive(arc) {
+    const centerX = arc.x + arc.w / 2;
+    const centerY = arc.y + arc.h / 2;
+    const radiusX = arc.w / 2;
+    const radiusY = arc.h / 2;
+    const startX = centerX + radiusX * Math.cos(arc.start);
+    const startY = centerY + radiusY * Math.sin(arc.start);
+
+    const delta = arc.stop - arc.start;
+    const isFullCircle = Math.abs(delta % (2 * Math.PI)) < 0.00001 &&
+      Math.abs(delta) > 0.00001;
+
+    const createPieSlice = ! (
+      arc.mode === CHORD ||
+      arc.mode === OPEN ||
+      isFullCircle
+    );
+
+    if (!this.fillPath) this.fillPath = new Path2D(this.path);
+    if (!this.strokePath) this.strokePath = new Path2D(this.path);
+
+    this.fillPath.moveTo(startX, startY);
+    this.fillPath.ellipse(centerX, centerY, radiusX, radiusY,
+      0, arc.start, arc.stop);
+    if (createPieSlice) {
+      this.fillPath.lineTo(centerX, centerY);
+    }
+    this.fillPath.closePath();
+
+    this.strokePath.moveTo(startX, startY);
+    this.strokePath.ellipse(centerX, centerY, radiusX, radiusY,
+      0, arc.start, arc.stop);
+    if (arc.mode === PIE && createPieSlice) {
+      this.strokePath.lineTo(centerX, centerY);
+    }
+    if (arc.mode === PIE || arc.mode === CHORD) {
+      this.strokePath.closePath();
+    }
+
+    // Still maintain base path just in case
+    this.path.moveTo(startX, startY);
+    this.path.ellipse(centerX, centerY, radiusX, radiusY,
+      0, arc.start, arc.stop);
+  }
+  visitEllipsePrimitive(ellipse) {
+    const centerX = ellipse.x + ellipse.w / 2;
+    const centerY = ellipse.y + ellipse.h / 2;
+    const radiusX = ellipse.w / 2;
+    const radiusY = ellipse.h / 2;
+
+    this.path.moveTo(centerX + radiusX, centerY);
+    this.path.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
+  }
   visitQuadStrip(quadStrip) {
     for (let i = 0; i < quadStrip.vertices.length - 3; i += 2) {
       const v0 = quadStrip.vertices[i];
@@ -1279,6 +1460,78 @@ class PrimitiveToVerticesConverter extends PrimitiveVisitor {
     // WebGL itself interprets the vertices as a strip, no reformatting needed
     this.contours.push(quadStrip.vertices.slice());
   }
+  visitArcPrimitive(arc) {
+    const startVertex = arc.startVertex;
+    const endVertex = arc.endVertex;
+    const centerX = arc.x + arc.w / 2;
+    const centerY = arc.y + arc.h / 2;
+    const radiusX = arc.w / 2;
+    const radiusY = arc.h / 2;
+    const avgRadius = (radiusX + radiusY) / 2;
+
+    const arcLength = avgRadius * Math.abs(arc.stop - arc.start);
+
+    const numPoints = Math.max(3, Math.ceil(this.curveDetail * arcLength));
+    const verts = [];
+    const interpolateVertexProps = (v1, v2, t) => {
+    const props = {};
+    for (const [key, value] of Object.entries(v1)) {
+      if (key === 'position') continue;
+      if (typeof value === 'number' && typeof v2[key] === 'number') {
+        props[key] = value * (1 - t) + v2[key] * t;
+      } else {
+        props[key] = value;
+      }
+    }
+    return props;
+  };
+    if (arc.mode === PIE) {
+      const centerProps = interpolateVertexProps(startVertex, endVertex, 0.5);
+      centerProps.position = new Vector(centerX, centerY);
+      verts.push(new Vertex(centerProps));
+    }
+
+    for (let i = 0; i <= numPoints; i++) {
+      const t = i / numPoints;
+      const angle = arc.start + (arc.stop - arc.start) * t;
+      const vertexProps = interpolateVertexProps(startVertex, endVertex, t);
+
+      vertexProps.position = new Vector(
+        centerX + radiusX * Math.cos(angle),
+        centerY + radiusY * Math.sin(angle)
+      );
+
+      verts.push(new Vertex(vertexProps));
+    }
+
+    this.contours.push(verts);
+  }
+  visitEllipsePrimitive(ellipse) {
+    const centerX = ellipse.x + ellipse.w / 2;
+    const centerY = ellipse.y + ellipse.h / 2;
+    const radiusX = ellipse.w / 2;
+    const radiusY = ellipse.h / 2;
+    const avgRadius = (radiusX + radiusY) / 2;
+    const perimeter = 2 * Math.PI * avgRadius;
+    const numPoints = Math.max(3, Math.ceil(this.curveDetail * perimeter));
+    const verts = [];
+    const centerVertex = ellipse.vertices[0];
+    for (let i = 0; i <= numPoints; i++) {
+      const angle = (2 * Math.PI * i) / numPoints;
+      const vertexProps = {};
+      for (const [key, value] of Object.entries(centerVertex)) {
+        if (key === 'position') continue;
+        vertexProps[key] = value;
+      }
+      vertexProps.position = new Vector(
+        centerX + radiusX * Math.cos(angle),
+        centerY + radiusY * Math.sin(angle)
+      );
+      verts.push(new Vertex(vertexProps));
+    }
+
+    this.contours.push(verts);
+  }
 }
 
 class PointAtLengthGetter extends PrimitiveVisitor {
@@ -1613,6 +1866,8 @@ function customShapes(p5, fn) {
    * Note: `bezierVertex()` won’t work when an argument is passed to
    * <a href="#/p5/beginShape">beginShape()</a>.
    *
+   * Calling `bezierOrder()` without an argument returns the current Bézier order.
+   *
    * @method bezierOrder
    * @param {Number} order The new order to set. Can be either 2 or 3, by default 3
    *
@@ -2784,4 +3039,4 @@ if (typeof p5 !== 'undefined') {
   customShapes(p5, p5.prototype);
 }
 
-export { Anchor, BezierSegment, Contour, Line, LineSegment, Point, PointAtLengthGetter, PrimitiveToPath2DConverter, PrimitiveToVerticesConverter, PrimitiveVisitor, Quad, QuadStrip, Segment, Shape, ShapePrimitive, SplineSegment, Triangle, TriangleFan, TriangleStrip, Vertex, customShapes as default };
+export { Anchor, ArcPrimitive, BezierSegment, Contour, EllipsePrimitive, Line, LineSegment, Point, PointAtLengthGetter, PrimitiveToPath2DConverter, PrimitiveToVerticesConverter, PrimitiveVisitor, Quad, QuadStrip, Segment, Shape, ShapePrimitive, SplineSegment, Triangle, TriangleFan, TriangleStrip, Vertex, customShapes as default };

package/dist/shape/index.js

@@ -3,9 +3,9 @@ import attributes from './attributes.js';
 import curves from './curves.js';
 import vertex from './vertex.js';
 import customShapes from './custom_shapes.js';
-import '../constants-BdTiYOQI.js';
+import '../constants-0wkVUfqa.js';
 import '../core/helpers.js';
-import '../creating_reading-C7hu6sg1.js';
+import '../creating_reading-DLkHH80h.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
 import '../math/p5.Vector.js';

package/dist/shape/vertex.js

@@ -2,8 +2,6 @@
  * @module Shape
  * @submodule Custom Shapes
  * @for p5
- * @requires core
- * @requires constants
  */
 
 function vertex(p5, fn){

package/dist/strands/ir_builders.js

@@ -2,5 +2,5 @@ import './ir_dag.js';
 import './ir_cfg.js';
 import './strands_FES.js';
 import './ir_types.js';
-export { b as binaryOpNode, h as castToFloat, g as constructTypeFromIDs, f as functionCallNode, m as memberAccessNode, p as primitiveConstructorNode, e as scalarLiteralNode, s as statementNode, d as structConstructorNode, a as structInstanceNode, i as swizzleNode, j as swizzleTrap, u as unaryOpNode, v as variableNode } from '../ir_builders-Cd6rU9Vm.js';
+export { k as arrayAccessNode, n as arrayAssignmentNode, b as binaryOpNode, h as castToFloat, g as constructTypeFromIDs, l as createStructArrayElementProxy, f as functionCallNode, m as memberAccessNode, p as primitiveConstructorNode, s as scalarLiteralNode, a as statementNode, e as structConstructorNode, d as structInstanceNode, i as swizzleNode, j as swizzleTrap, u as unaryOpNode, v as variableNode } from '../ir_builders-C2ebb6Lu.js';
 import './strands_builtins.js';

package/dist/strands/ir_types.js

@@ -11,6 +11,7 @@ const NodeType = {
   STATEMENT: 'statement',
   ASSIGNMENT: 'assignment',
 };
+const INSTANCE_ID_VARYING_NAME = '_p5_instanceID';
 const NodeTypeToName = Object.fromEntries(
   Object.entries(NodeType).map(([key, val]) => [val, key])
 );
@@ -120,6 +121,7 @@ const OpCode = {
     LOGICAL_AND: 11,
     LOGICAL_OR: 12,
     MEMBER_ACCESS: 13,
+    ARRAY_ACCESS: 14,
   },
   Unary: {
     LOGICAL_NOT: 100,
@@ -130,6 +132,8 @@ const OpCode = {
   Nary: {
     FUNCTION_CALL: 200,
     CONSTRUCTOR: 201,
+    TERNARY: 202,
+    ARRAY_ASSIGNMENT: 203,
   },
   ControlFlow: {
     RETURN: 300,
@@ -207,4 +211,4 @@ const BlockTypeToName = Object.fromEntries(
   Object.entries(BlockType).map(([key, val]) => [val, key])
 );
 
-export { BasePriority, BaseType, BinarySymbolToName, BlockType, BlockTypeToName, ConstantFolding, DataType, GenType, NodeType, NodeTypeRequiredFields, NodeTypeToName, OpCode, OpCodeToSymbol, OperatorTable, StatementType, TypeInfoFromGLSLName, UnarySymbolToName, booleanOpCode, isStructType, structType, typeEquals };
+export { BasePriority, BaseType, BinarySymbolToName, BlockType, BlockTypeToName, ConstantFolding, DataType, GenType, INSTANCE_ID_VARYING_NAME, NodeType, NodeTypeRequiredFields, NodeTypeToName, OpCode, OpCodeToSymbol, OperatorTable, StatementType, TypeInfoFromGLSLName, UnarySymbolToName, booleanOpCode, isStructType, structType, typeEquals };