p5 2.0.0 → 2.0.1

package/{src/core/p5.Renderer2D.js → dist/main-s72KWcUy.js}

@@ -1,15 +1,16 @@
-import * as constants from './constants';
-import p5 from './main';
-import { Renderer } from './p5.Renderer';
-import { Graphics } from './p5.Graphics';
-import { Image } from '../image/p5.Image';
-import { Element } from '../dom/p5.Element';
-import { MediaElement } from '../dom/p5.MediaElement';
-import { RGBHDR } from '../color/creating_reading';
-import FilterRenderer2D from '../image/filterRenderer2D';
-import { Matrix } from '../math/p5.Matrix';
-import { PrimitiveToPath2DConverter } from '../shape/custom_shapes';
-
+import { P as P2D, a0 as WEBGL, u as BLEND, a2 as _DEFAULT_FILL, a3 as _DEFAULT_STROKE, j as ROUND, a4 as REMOVE, a5 as SUBTRACT, a6 as DARKEST, a7 as LIGHTEST, a8 as DIFFERENCE, a9 as MULTIPLY, aa as EXCLUSION, ab as SCREEN, ac as REPLACE, ad as OVERLAY, ae as HARD_LIGHT, af as SOFT_LIGHT, ag as DODGE, ah as BURN, ai as ADD, aj as PIE, ak as CHORD, f as TWO_PI, S as SQUARE, k as PROJECT, B as BEVEL, l as MITER, O as OPEN, v as constants, al as VERSION } from './constants-C-g_eAdC.js';
+import transform from './core/transform.js';
+import structure from './core/structure.js';
+import environment from './core/environment.js';
+import { G as Graphics, y as rendering, z as graphics } from './rendering--aAe5aq3.js';
+import { R as Renderer, I as Image, r as renderer } from './p5.Renderer-CwAYZOC2.js';
+import { Element } from './dom/p5.Element.js';
+import { MediaElement } from './dom/p5.MediaElement.js';
+import { b as RGBHDR } from './creating_reading-D4AAKRbx.js';
+import FilterRenderer2D from './image/filterRenderer2D.js';
+import './math/p5.Matrix.js';
+import { PrimitiveToPath2DConverter } from './shape/custom_shapes.js';
+import { Matrix } from './math/Matrices/Matrix.js';
 
 const styleEmpty = 'rgba(0,0,0,0)';
 // const alphaThreshold = 0.00125; // minimum visible
@@ -39,7 +40,7 @@ class Renderer2D extends Renderer {
           get() {
             return this.wrappedElt[p];
           }
-        })
+        });
       }
     }
 
@@ -96,7 +97,7 @@ class Renderer2D extends Renderer {
         new Graphics(
           this.width,
           this.height,
-          constants.WEBGL,
+          WEBGL,
           pInst
         );
     }
@@ -119,10 +120,10 @@ class Renderer2D extends Renderer {
   _applyDefaults() {
     this.states.setValue('_cachedFillStyle', undefined);
     this.states.setValue('_cachedStrokeStyle', undefined);
-    this._cachedBlendMode = constants.BLEND;
-    this._setFill(constants._DEFAULT_FILL);
-    this._setStroke(constants._DEFAULT_STROKE);
-    this.drawingContext.lineCap = constants.ROUND;
+    this._cachedBlendMode = BLEND;
+    this._setFill(_DEFAULT_FILL);
+    this._setStroke(_DEFAULT_STROKE);
+    this.drawingContext.lineCap = ROUND;
     this.drawingContext.font = 'normal 12px sans-serif';
   }
 
@@ -242,7 +243,7 @@ class Renderer2D extends Renderer {
 
       // cache blendMode
       const tempBlendMode = this._cachedBlendMode;
-      this.blendMode(constants.REMOVE);
+      this.blendMode(REMOVE);
       this._cachedBlendMode = tempBlendMode;
 
       this._isErasing = true;
@@ -290,7 +291,7 @@ class Renderer2D extends Renderer {
 
     // cache blendMode
     const tempBlendMode = this._cachedBlendMode;
-    this.blendMode(constants.BLEND);
+    this.blendMode(BLEND);
     this._cachedBlendMode = tempBlendMode;
 
     // Since everything must be in one path, create a new single Path2D to chain all shapes onto.
@@ -463,24 +464,24 @@ class Renderer2D extends Renderer {
   //////////////////////////////////////////////
 
   blendMode(mode) {
-    if (mode === constants.SUBTRACT) {
+    if (mode === SUBTRACT) {
       console.warn('blendMode(SUBTRACT) only works in WEBGL mode.');
     } else if (
-      mode === constants.BLEND ||
-      mode === constants.REMOVE ||
-      mode === constants.DARKEST ||
-      mode === constants.LIGHTEST ||
-      mode === constants.DIFFERENCE ||
-      mode === constants.MULTIPLY ||
-      mode === constants.EXCLUSION ||
-      mode === constants.SCREEN ||
-      mode === constants.REPLACE ||
-      mode === constants.OVERLAY ||
-      mode === constants.HARD_LIGHT ||
-      mode === constants.SOFT_LIGHT ||
-      mode === constants.DODGE ||
-      mode === constants.BURN ||
-      mode === constants.ADD
+      mode === BLEND ||
+      mode === REMOVE ||
+      mode === DARKEST ||
+      mode === LIGHTEST ||
+      mode === DIFFERENCE ||
+      mode === MULTIPLY ||
+      mode === EXCLUSION ||
+      mode === SCREEN ||
+      mode === REPLACE ||
+      mode === OVERLAY ||
+      mode === HARD_LIGHT ||
+      mode === SOFT_LIGHT ||
+      mode === DODGE ||
+      mode === BURN ||
+      mode === ADD
     ) {
       this._cachedBlendMode = mode;
       this.drawingContext.globalCompositeOperation = mode;
@@ -640,11 +641,6 @@ class Renderer2D extends Renderer {
    */
   arc(x, y, w, h, start, stop, mode) {
     const ctx = this.clipPa || 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,
@@ -655,9 +651,9 @@ class Renderer2D extends Renderer {
     // 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
+      mode === CHORD ||
+      mode === OPEN ||
+      (stop - start) % TWO_PI === 0
     );
 
     // Fill curves
@@ -674,13 +670,13 @@ class Renderer2D extends Renderer {
       if (!this._clipping) ctx.beginPath();
       ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
 
-      if (mode === constants.PIE && createPieSlice) {
+      if (mode === 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) {
+      if (mode === PIE || mode === CHORD) {
         // Stroke connects back to path begin for both PIE and CHORD
         ctx.closePath();
       }
@@ -754,7 +750,7 @@ class Renderer2D extends Renderer {
       this._setFill(s);
     }
     if (!this._clipping) ctx.beginPath();
-    ctx.arc(x, y, ctx.lineWidth / 2, 0, constants.TWO_PI, false);
+    ctx.arc(x, y, ctx.lineWidth / 2, 0, TWO_PI, false);
     if (!this._clipping) {
       ctx.fill();
       this._setFill(f);
@@ -910,9 +906,9 @@ class Renderer2D extends Renderer {
 
   strokeCap(cap) {
     if (
-      cap === constants.ROUND ||
-      cap === constants.SQUARE ||
-      cap === constants.PROJECT
+      cap === ROUND ||
+      cap === SQUARE ||
+      cap === PROJECT
     ) {
       this.drawingContext.lineCap = cap;
     }
@@ -921,9 +917,9 @@ class Renderer2D extends Renderer {
 
   strokeJoin(join) {
     if (
-      join === constants.ROUND ||
-      join === constants.BEVEL ||
-      join === constants.MITER
+      join === ROUND ||
+      join === BEVEL ||
+      join === MITER
     ) {
       this.drawingContext.lineJoin = join;
     }
@@ -1052,13 +1048,695 @@ function renderer2D(p5, fn){
    * @private
    */
   p5.Renderer2D = Renderer2D;
-  p5.renderers[constants.P2D] = Renderer2D;
+  p5.renderers[P2D] = Renderer2D;
   p5.renderers['p2d-hdr'] = new Proxy(Renderer2D, {
     construct(target, [pInst, w, h, isMainCanvas, elt]){
       return new target(pInst, w, h, isMainCanvas, elt, {colorSpace: "display-p3"})
     }
-  })
+  });
+}
+
+/**
+ * @module Structure
+ * @submodule Structure
+ * @for p5
+ * @requires constants
+ */
+
+
+/**
+ * This is the p5 instance constructor.
+ *
+ * A p5 instance holds all the properties and methods related to
+ * a p5 sketch.  It expects an incoming sketch closure and it can also
+ * take an optional node parameter for attaching the generated p5 canvas
+ * to a node.  The sketch closure takes the newly created p5 instance as
+ * its sole argument and may optionally set an asynchronous function
+ * using `async/await`, along with the standard <a href="#/p5/setup">setup()</a>,
+ *  and/or <a href="#/p5/setup">setup()</a>, and/or <a href="#/p5/draw">draw()</a>
+ *  properties on it for running a sketch.
+ *
+ * A p5 sketch can run in "global" or "instance" mode:
+ * "global"   - all properties and methods are attached to the window
+ * "instance" - all properties and methods are bound to this p5 object
+ *
+ * @class p5
+ * @param  {function(p5)}       sketch a closure that can set optional <a href="#/p5/preload">preload()</a>,
+ *                              <a href="#/p5/setup">setup()</a>, and/or <a href="#/p5/draw">draw()</a> properties on the
+ *                              given p5 instance
+ * @param  {HTMLElement}        [node] element to attach canvas to
+ * @return {p5}                 a p5 instance
+ */
+class p5 {
+  static VERSION = VERSION;
+  // This is a pointer to our global mode p5 instance, if we're in
+  // global mode.
+  static instance = null;
+  static lifecycleHooks = {
+    presetup: [],
+    postsetup: [],
+    predraw: [],
+    postdraw: [],
+    remove: []
+  };
+
+  // FES stub
+  static _checkForUserDefinedFunctions = () => {};
+  static _friendlyFileLoadError = () => {};
+
+  constructor(sketch, node) {
+    //////////////////////////////////////////////
+    // PRIVATE p5 PROPERTIES AND METHODS
+    //////////////////////////////////////////////
+
+    this.hitCriticalError = false;
+    this._setupDone = false;
+    this._userNode = node;
+    this._curElement = null;
+    this._elements = [];
+    this._glAttributes = null;
+    this._requestAnimId = 0;
+    this._isGlobal = false;
+    this._loop = true;
+    this._startListener = null;
+    this._initializeInstanceVariables();
+    this._events = {
+      // keep track of user-events for unregistering later
+      pointerdown: null,
+      pointerup: null,
+      pointermove: null,
+      dragend: null,
+      dragover: null,
+      click: null,
+      dblclick: null,
+      mouseover: null,
+      mouseout: null,
+      keydown: null,
+      keyup: null,
+      keypress: null,
+      wheel: null,
+      resize: null,
+      blur: null
+    };
+    this._millisStart = -1;
+    this._recording = false;
+
+    // States used in the custom random generators
+    this._lcg_random_state = null; // NOTE: move to random.js
+    this._gaussian_previous = false; // NOTE: move to random.js
+
+    if (window.DeviceOrientationEvent) {
+      this._events.deviceorientation = null;
+    }
+    if (window.DeviceMotionEvent && !window._isNodeWebkit) {
+      this._events.devicemotion = null;
+    }
+
+    // ensure correct reporting of window dimensions
+    this._updateWindowSize();
+
+    const bindGlobal = (property) => {
+      Object.defineProperty(window, property, {
+        configurable: true,
+        enumerable: true,
+        get: () => {
+          if(typeof this[property] === 'function'){
+            return this[property].bind(this);
+          }else {
+            return this[property];
+          }
+        },
+        set: (newValue) => {
+          Object.defineProperty(window, property, {
+            configurable: true,
+            enumerable: true,
+            value: newValue,
+            writable: true
+          });
+          if (!p5.disableFriendlyErrors) {
+            console.log(`You just changed the value of "${property}", which was a p5 global value. This could cause problems later if you're not careful.`);
+          }
+        }
+      });
+    };
+    // If the user has created a global setup or draw function,
+    // assume "global" mode and make everything global (i.e. on the window)
+    if (!sketch) {
+      this._isGlobal = true;
+      if (window.hitCriticalError) {
+        return;
+      }
+      p5.instance = this;
+
+      // Loop through methods on the prototype and attach them to the window
+      // All methods and properties with name starting with '_' will be skipped
+      for (const p of Object.getOwnPropertyNames(p5.prototype)) {
+        if(p[0] === '_') continue;
+        bindGlobal(p);
+      }
+
+      const protectedProperties = ['constructor', 'length'];
+      // Attach its properties to the window
+      for (const p in this) {
+        if (this.hasOwnProperty(p)) {
+          if(p[0] === '_' || protectedProperties.includes(p)) continue;
+          bindGlobal(p);
+        }
+      }
+    } else {
+      // Else, the user has passed in a sketch closure that may set
+      // user-provided 'setup', 'draw', etc. properties on this instance of p5
+      sketch(this);
+
+      // Run a check to see if the user has misspelled 'setup', 'draw', etc
+      // detects capitalization mistakes only ( Setup, SETUP, MouseClicked, etc)
+      p5._checkForUserDefinedFunctions(this);
+    }
+
+    // Bind events to window (not using container div bc key events don't work)
+    for (const e in this._events) {
+      const f = this[`_on${e}`];
+      if (f) {
+        const m = f.bind(this);
+        window.addEventListener(e, m, { passive: false });
+        this._events[e] = m;
+      }
+    }
+
+    const focusHandler = () => {
+      this.focused = true;
+    };
+    const blurHandler = () => {
+      this.focused = false;
+    };
+    window.addEventListener('focus', focusHandler);
+    window.addEventListener('blur', blurHandler);
+    p5.lifecycleHooks.remove.push(function() {
+      window.removeEventListener('focus', focusHandler);
+      window.removeEventListener('blur', blurHandler);
+    });
+
+    // Initialization complete, start runtime
+    if (document.readyState === 'complete') {
+      this.#_start();
+    } else {
+      this._startListener = this.#_start.bind(this);
+      window.addEventListener('load', this._startListener, false);
+    }
+  }
+
+  get pixels(){
+    return this._renderer.pixels;
+  }
+
+  get drawingContext(){
+    return this._renderer.drawingContext;
+  }
+
+  static registerAddon(addon) {
+    const lifecycles = {};
+    addon(p5, p5.prototype, lifecycles);
+
+    const validLifecycles = Object.keys(p5.lifecycleHooks);
+    for(const name of validLifecycles){
+      if(typeof lifecycles[name] === 'function'){
+        p5.lifecycleHooks[name].push(lifecycles[name]);
+      }
+    }
+  }
+
+  async #_start() {
+    if (this.hitCriticalError) return;
+    // Find node if id given
+    if (this._userNode) {
+      if (typeof this._userNode === 'string') {
+        this._userNode = document.getElementById(this._userNode);
+      }
+    }
+
+    await this.#_setup();
+    if (this.hitCriticalError) return;
+    if (!this._recording) {
+      this._draw();
+    }
+  }
+
+  async #_setup() {
+    // Run `presetup` hooks
+    await this._runLifecycleHook('presetup');
+    if (this.hitCriticalError) return;
+
+    // Always create a default canvas.
+    // Later on if the user calls createCanvas, this default one
+    // will be replaced
+    this.createCanvas(
+      100,
+      100,
+      P2D
+    );
+
+    // Record the time when sketch starts
+    this._millisStart = window.performance.now();
+
+    const context = this._isGlobal ? window : this;
+    if (typeof context.setup === 'function') {
+      await context.setup();
+    }
+    if (this.hitCriticalError) return;
+
+    // unhide any hidden canvases that were created
+    const canvases = document.getElementsByTagName('canvas');
+
+    // Apply touchAction = 'none' to canvases if pointer events exist
+    if (Object.keys(this._events).some(event => event.startsWith('pointer'))) {
+      for (const k of canvases) {
+        k.style.touchAction = 'none';
+      }
+    }
+
+
+    for (const k of canvases) {
+      if (k.dataset.hidden === 'true') {
+        k.style.visibility = '';
+        delete k.dataset.hidden;
+      }
+    }
+
+    this._lastTargetFrameTime = window.performance.now();
+    this._lastRealFrameTime = window.performance.now();
+    this._setupDone = true;
+    if (this._accessibleOutputs.grid || this._accessibleOutputs.text) {
+      this._updateAccsOutput();
+    }
+
+    // Run `postsetup` hooks
+    await this._runLifecycleHook('postsetup');
+  }
+
+  // While '#_draw' here is async, it is not awaited as 'requestAnimationFrame'
+  // does not await its callback. Thus it is not recommended for 'draw()` to be
+  // async and use await within as the next frame may start rendering before the
+  // current frame finish awaiting. The same goes for lifecycle hooks 'predraw'
+  // and 'postdraw'.
+  async _draw(requestAnimationFrameTimestamp) {
+    if (this.hitCriticalError) return;
+    const now = requestAnimationFrameTimestamp || window.performance.now();
+    const timeSinceLastFrame = now - this._lastTargetFrameTime;
+    const targetTimeBetweenFrames = 1000 / this._targetFrameRate;
+
+    // only draw if we really need to; don't overextend the browser.
+    // draw if we're within 5ms of when our next frame should paint
+    // (this will prevent us from giving up opportunities to draw
+    // again when it's really about time for us to do so). fixes an
+    // issue where the frameRate is too low if our refresh loop isn't
+    // in sync with the browser. note that we have to draw once even
+    // if looping is off, so we bypass the time delay if that
+    // is the case.
+    const epsilon = 5;
+    if (
+      !this._loop ||
+      timeSinceLastFrame >= targetTimeBetweenFrames - epsilon
+    ) {
+      //mandatory update values(matrixes and stack)
+      this.deltaTime = now - this._lastRealFrameTime;
+      this._frameRate = 1000.0 / this.deltaTime;
+      await this.redraw();
+      this._lastTargetFrameTime = Math.max(this._lastTargetFrameTime
+        + targetTimeBetweenFrames, now);
+      this._lastRealFrameTime = now;
+
+      // If the user is actually using mouse module, then update
+      // coordinates, otherwise skip. We can test this by simply
+      // checking if any of the mouse functions are available or not.
+      // NOTE : This reflects only in complete build or modular build.
+      if (typeof this._updateMouseCoords !== 'undefined') {
+        this._updateMouseCoords();
+
+        //reset delta values so they reset even if there is no mouse event to set them
+        // for example if the mouse is outside the screen
+        this.movedX = 0;
+        this.movedY = 0;
+      }
+    }
+
+    // get notified the next time the browser gives us
+    // an opportunity to draw.
+    if (this._loop) {
+      this._requestAnimId = window.requestAnimationFrame(
+        this._draw.bind(this)
+      );
+    }
+  }
+
+  /**
+   * Removes the sketch from the web page.
+   *
+   * Calling `remove()` stops the draw loop and removes any HTML elements
+   * created by the sketch, including the canvas. A new sketch can be
+   * created by using the <a href="#/p5/p5">p5()</a> constructor, as in
+   * `new p5()`.
+   *
+   * @example
+   * <div>
+   * <code>
+   * // Double-click to remove the canvas.
+   *
+   * function setup() {
+   *   createCanvas(100, 100);
+   *
+   *   describe(
+   *     'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'
+   *   );
+   * }
+   *
+   * function draw() {
+   *   // Paint the background repeatedly.
+   *   background(200);
+   *
+   *   // Draw circles repeatedly.
+   *   circle(mouseX, mouseY, 40);
+   * }
+   *
+   * // Remove the sketch when the user double-clicks.
+   * function doubleClicked() {
+   *   remove();
+   * }
+   * </code>
+   * </div>
+   */
+  async remove() {
+    // Remove start listener to prevent orphan canvas being created
+    if(this._startListener){
+      window.removeEventListener('load', this._startListener, false);
+    }
+
+    if (this._curElement) {
+      // stop draw
+      this._loop = false;
+      if (this._requestAnimId) {
+        window.cancelAnimationFrame(this._requestAnimId);
+      }
+
+      // unregister events sketch-wide
+      for (const ev in this._events) {
+        window.removeEventListener(ev, this._events[ev]);
+      }
+
+      // remove DOM elements created by p5, and listeners
+      for (const e of this._elements) {
+        if (e.elt && e.elt.parentNode) {
+          e.elt.parentNode.removeChild(e.elt);
+        }
+        for (const elt_ev in e._events) {
+          e.elt.removeEventListener(elt_ev, e._events[elt_ev]);
+        }
+      }
+
+      // Run `remove` hooks
+      await this._runLifecycleHook('remove');
+    }
+
+    // remove window bound properties and methods
+    if (this._isGlobal) {
+      for (const p in p5.prototype) {
+        try {
+          delete window[p];
+        } catch (x) {
+          window[p] = undefined;
+        }
+      }
+      for (const p2 in this) {
+        if (this.hasOwnProperty(p2)) {
+          try {
+            delete window[p2];
+          } catch (x) {
+            window[p2] = undefined;
+          }
+        }
+      }
+      p5.instance = null;
+    }
+  }
+
+  async _runLifecycleHook(hookName) {
+    for(const hook of p5.lifecycleHooks[hookName]){
+      await hook.call(this);
+    }
+  }
+
+  _initializeInstanceVariables() {
+    this._accessibleOutputs = {
+      text: false,
+      grid: false,
+      textLabel: false,
+      gridLabel: false
+    };
+
+    this._styles = [];
+    this._downKeys = {}; //Holds the key codes of currently pressed keys
+    this._downKeyCodes = {};
+  }
+}
+
+// Attach constants to p5 prototype
+for (const k in constants) {
+  p5.prototype[k] = constants[k];
 }
 
-export default renderer2D;
-export { Renderer2D };
+//////////////////////////////////////////////
+// PUBLIC p5 PROPERTIES AND METHODS
+//////////////////////////////////////////////
+
+/**
+ * A function that's called once when the sketch begins running.
+ *
+ * Declaring the function `setup()` sets a code block to run once
+ * automatically when the sketch starts running. It's used to perform
+ * setup tasks such as creating the canvas and initializing variables:
+ *
+ * ```js
+ * function setup() {
+ *   // Code to run once at the start of the sketch.
+ * }
+ * ```
+ *
+ * Code placed in `setup()` will run once before code placed in
+ * <a href="#/p5/draw">draw()</a> begins looping. If the
+ * <a href="#/p5/preload">preload()</a> is declared, then `setup()` will
+ * run immediately after <a href="#/p5/preload">preload()</a> finishes
+ * 
+ * 
+ * loading assets.
+ *
+ * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
+ *
+ * @method setup
+ * @for p5
+ *
+ * @example
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
+ *   background(200);
+ *
+ *   // Draw the circle.
+ *   circle(50, 50, 40);
+ *
+ *   describe('A white circle on a gray background.');
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
+ *   // Paint the background once.
+ *   background(200);
+ *
+ *   describe(
+ *     'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   // Draw circles repeatedly.
+ *   circle(mouseX, mouseY, 40);
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * let img;
+ *
+ * async function setup() {
+ *   img = await loadImage('assets/bricks.jpg');
+ *
+ *   createCanvas(100, 100);
+ *
+ *   // Draw the image.
+ *   image(img, 0, 0);
+ *
+ *   describe(
+ *     'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   // Style the circle.
+ *   noStroke();
+ *
+ *   // Draw the circle.
+ *   circle(mouseX, mouseY, 10);
+ * }
+ * </code>
+ * </div>
+ */
+
+/**
+ * A function that's called repeatedly while the sketch runs.
+ *
+ * Declaring the function `draw()` sets a code block to run repeatedly
+ * once the sketch starts. It’s used to create animations and respond to
+ * user inputs:
+ *
+ * ```js
+ * function draw() {
+ *   // Code to run repeatedly.
+ * }
+ * ```
+ *
+ * This is often called the "draw loop" because p5.js calls the code in
+ * `draw()` in a loop behind the scenes. By default, `draw()` tries to run
+ * 60 times per second. The actual rate depends on many factors. The
+ * drawing rate, called the "frame rate", can be controlled by calling
+ * <a href="#/p5/frameRate">frameRate()</a>. The number of times `draw()`
+ * has run is stored in the system variable
+ * <a href="#/p5/frameCount">frameCount()</a>.
+ *
+ * Code placed within `draw()` begins looping after
+ * <a href="#/p5/setup">setup()</a> runs. `draw()` will run until the user
+ * closes the sketch. `draw()` can be stopped by calling the
+ * <a href="#/p5/noLoop">noLoop()</a> function. `draw()` can be resumed by
+ * calling the <a href="#/p5/loop">loop()</a> function.
+ *
+ * @method draw
+ * @for p5
+ *
+ * @example
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
+ *   // Paint the background once.
+ *   background(200);
+ *
+ *   describe(
+ *     'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   // Draw circles repeatedly.
+ *   circle(mouseX, mouseY, 40);
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
+ *   describe(
+ *     'A white circle on a gray background. The circle follows the mouse as the user moves.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   // Paint the background repeatedly.
+ *   background(200);
+ *
+ *   // Draw circles repeatedly.
+ *   circle(mouseX, mouseY, 40);
+ * }
+ * </code>
+ * </div>
+ *
+ * <div>
+ * <code>
+ * // Double-click the canvas to change the circle's color.
+ *
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
+ *   describe(
+ *     'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'
+ *   );
+ * }
+ *
+ * function draw() {
+ *   // Paint the background repeatedly.
+ *   background(200);
+ *
+ *   // Draw circles repeatedly.
+ *   circle(mouseX, mouseY, 40);
+ * }
+ *
+ * // Change the fill color when the user double-clicks.
+ * function doubleClicked() {
+ *   fill('deeppink');
+ * }
+ * </code>
+ * </div>
+ */
+
+/**
+ * Turns off the parts of the Friendly Error System (FES) that impact performance.
+ *
+ * The <a href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md" target="_blank">FES</a>
+ * can cause sketches to draw slowly because it does extra work behind the
+ * scenes. For example, the FES checks the arguments passed to functions,
+ * which takes time to process. Disabling the FES can significantly improve
+ * performance by turning off these checks.
+ *
+ * @property {Boolean} disableFriendlyErrors
+ *
+ * @example
+ * <div>
+ * <code>
+ * // Disable the FES.
+ * p5.disableFriendlyErrors = true;
+ *
+ * function setup() {
+ *   createCanvas(100, 100);
+ *
+ *   background(200);
+ *
+ *   // The circle() function requires three arguments. The
+ *   // next line would normally display a friendly error that
+ *   // points this out. Instead, nothing happens and it fails
+ *   // silently.
+ *   circle(50, 50);
+ *
+ *   describe('A gray square.');
+ * }
+ * </code>
+ * </div>
+ */
+p5.disableFriendlyErrors = false;
+
+p5.registerAddon(transform);
+p5.registerAddon(structure);
+p5.registerAddon(environment);
+p5.registerAddon(rendering);
+p5.registerAddon(renderer);
+p5.registerAddon(renderer2D);
+p5.registerAddon(graphics);
+
+export { Renderer2D as R, p5 as p, renderer2D as r };