p5 2.2.1-rc.0 → 2.2.1

package/dist/{main-_RXV5Lx8.js → main-DvN69W3f.js}

@@ -1,12 +1,12 @@
-import { P as P2D, ac as WEBGL, B as BLEND, al as _DEFAULT_FILL, am as _DEFAULT_STROKE, w as ROUND, b as REMOVE, S as SUBTRACT, D as DARKEST, L as LIGHTEST, an as DIFFERENCE, M as MULTIPLY, E as EXCLUSION, a as SCREEN, R as REPLACE, ao as OVERLAY, ap as HARD_LIGHT, aq as SOFT_LIGHT, ar as DODGE, as as BURN, A as ADD, at as PIE, au as CHORD, q as TWO_PI, x as SQUARE, y as PROJECT, z as BEVEL, I as MITER, a9 as RIGHT, v as CENTER, av as LEFT, aw as BOTTOM, ax as BASELINE, ay as TOP, Q as OPEN, az as VERSION, a3 as constants } from './constants-DEJVKr9Z.js';
+import { P as P2D, ac as WEBGL, B as BLEND, al as _DEFAULT_FILL, am as _DEFAULT_STROKE, w as ROUND, b as REMOVE, S as SUBTRACT, D as DARKEST, L as LIGHTEST, an as DIFFERENCE, M as MULTIPLY, E as EXCLUSION, a as SCREEN, R as REPLACE, ao as OVERLAY, ap as HARD_LIGHT, aq as SOFT_LIGHT, ar as DODGE, as as BURN, A as ADD, at as PIE, au as CHORD, q as TWO_PI, x as SQUARE, y as PROJECT, z as BEVEL, I as MITER, a9 as RIGHT, v as CENTER, av as LEFT, aw as BOTTOM, ax as BASELINE, ay as TOP, Q as OPEN, az as VERSION, a3 as constants } from './constants-DQyACdzq.js';
 import transform from './core/transform.js';
 import structure from './core/structure.js';
 import environment from './core/environment.js';
-import { G as Graphics, k as rendering, n as graphics } from './rendering-CsICjEXA.js';
-import { R as Renderer, I as Image, r as renderer } from './p5.Renderer-QoFcvj3f.js';
+import { G as Graphics, k as rendering, n as graphics } from './rendering-h9unX5K0.js';
+import { R as Renderer, I as Image, r as renderer } from './p5.Renderer-D-5LdCRz.js';
 import { Element } from './dom/p5.Element.js';
 import { MediaElement } from './dom/p5.MediaElement.js';
-import { b as RGBHDR } from './creating_reading-CgHCHxqN.js';
+import { b as RGBHDR } from './creating_reading-ZXzcZEsb.js';
 import FilterRenderer2D from './image/filterRenderer2D.js';
 import './math/p5.Matrix.js';
 import { PrimitiveToPath2DConverter } from './shape/custom_shapes.js';
@@ -273,7 +273,10 @@ class Renderer2D extends Renderer {
     });
     shape.accept(visitor);
     if (this._clipping) {
-      this.clipPath.addPath(visitor.path);
+      const currentTransform = this.drawingContext.getTransform();
+      const clipBaseTransform = this._clipBaseTransform.inverse();
+      const relativeTransform = clipBaseTransform.multiply(currentTransform);
+      this.clipPath.addPath(visitor.path, relativeTransform);
       this.clipPath.closePath();
     } else {
       if (this.states.fillColor) {
@@ -287,7 +290,7 @@ class Renderer2D extends Renderer {
 
   beginClip(options = {}) {
     super.beginClip(options);
-
+    this._clipBaseTransform = this.drawingContext.getTransform();
     // cache the fill style
     this.states.setValue('_cachedFillStyle', this.drawingContext.fillStyle);
     const newFill = this._pInst.color(255, 0).toString();
@@ -1596,8 +1599,6 @@ class p5 {
    * `new p5()`.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to remove the canvas.
    *
    * function setup() {
@@ -1620,8 +1621,6 @@ class p5 {
    * function doubleClicked() {
    *   remove();
    * }
-   * </code>
-   * </div>
    */
   async remove() {
     // Remove start listener to prevent orphan canvas being created
@@ -1830,8 +1829,6 @@ p5.registerAddon(graphics);
  * @for p5
  *
  * @example
- * <div>
- * <code>
  * function setup() {
  *   createCanvas(100, 100);
  *
@@ -1842,11 +1839,8 @@ p5.registerAddon(graphics);
  *
  *   describe('A white circle on a gray background.');
  * }
- * </code>
- * </div>
  *
- * <div>
- * <code>
+ * @example
  * function setup() {
  *   createCanvas(100, 100);
  *
@@ -1862,11 +1856,8 @@ p5.registerAddon(graphics);
  *   // Draw circles repeatedly.
  *   circle(mouseX, mouseY, 40);
  * }
- * </code>
- * </div>
  *
- * <div>
- * <code>
+ * @example
  * let img;
  *
  * async function setup() {
@@ -1889,8 +1880,6 @@ p5.registerAddon(graphics);
  *   // Draw the circle.
  *   circle(mouseX, mouseY, 10);
  * }
- * </code>
- * </div>
  */
 /**
  * A function that's called repeatedly while the sketch runs.
@@ -1923,8 +1912,6 @@ p5.registerAddon(graphics);
  * @for p5
  *
  * @example
- * <div>
- * <code>
  * function setup() {
  *   createCanvas(100, 100);
  *
@@ -1940,11 +1927,8 @@ p5.registerAddon(graphics);
  *   // Draw circles repeatedly.
  *   circle(mouseX, mouseY, 40);
  * }
- * </code>
- * </div>
  *
- * <div>
- * <code>
+ * @example
  * function setup() {
  *   createCanvas(100, 100);
  *
@@ -1960,11 +1944,8 @@ p5.registerAddon(graphics);
  *   // Draw circles repeatedly.
  *   circle(mouseX, mouseY, 40);
  * }
- * </code>
- * </div>
  *
- * <div>
- * <code>
+ * @example
  * // Double-click the canvas to change the circle's color.
  *
  * function setup() {
@@ -1987,8 +1968,6 @@ p5.registerAddon(graphics);
  * function doubleClicked() {
  *   fill('deeppink');
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -2004,8 +1983,6 @@ p5.registerAddon(graphics);
  * @property {Boolean} disableFriendlyErrors
  *
  * @example
- * <div>
- * <code>
  * // Disable the FES.
  * p5.disableFriendlyErrors = true;
  *
@@ -2022,8 +1999,6 @@ p5.registerAddon(graphics);
  *
  *   describe('A gray square.');
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -2040,8 +2015,6 @@ p5.registerAddon(graphics);
  * @param {Function} library The library function to register
  *
  * @example
- * <div>
- * <code>
  * function myAddon(p5, fn, lifecycles) {
  *   fn.sayHello = function() {
  *     this.textAlign(this.CENTER, this.CENTER);
@@ -2058,8 +2031,6 @@ p5.registerAddon(graphics);
  *
  *   describe('The text "Hello!"');
  * }
- * </code>
- * </div>
  */
 
 export { Renderer2D as R, p5 as p, renderer2D as r };