p5 2.0.1 → 2.0.3

package/lib/p5.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.0.1 April 23, 2025 */
+/*! p5.js v2.0.3 May 30, 2025 */
 var p5 = (function () {
   'use strict';
 
@@ -15,17 +15,33 @@ var p5 = (function () {
    * @property {String} VERSION
    * @final
    */
-  const VERSION = '2.0.1';
+  const VERSION = '2.0.3';
 
   // GRAPHICS RENDERER
   /**
-   * The default, two-dimensional renderer.
-   * @typedef {unique symbol} P2D
+   * The default, two-dimensional renderer in p5.js.
+   *
+   * Use this when calling <a href="#/p5/createCanvas"> (for example,
+   * `createCanvas(400, 400, P2D)`) to specify a 2D context.
+   *
+   * @typedef {'p2d'} P2D
    * @property {P2D} P2D
    * @final
    */
   const P2D = 'p2d';
 
+  /**
+   * A high-dynamic-range (HDR) variant of the default, two-dimensional renderer.
+   *
+   * When available, this mode can allow for extended color ranges and more
+   * dynamic color representation. Use it similarly to `P2D`:
+   * `createCanvas(400, 400, P2DHDR)`.
+   *
+   * @typedef {'p2d-hdr'} P2DHDR
+   * @property {P2DHDR} P2DHDR
+   * @final
+   */
+
   const P2DHDR = 'p2d-hdr';
 
   /**
@@ -8013,8 +8029,8 @@ var p5 = (function () {
      * @method print
      * @param {Any} contents content to print to the console.
      * @example
-     * <div>
-     * <code class="norender">
+     * <div class="norender">
+     * <code>
      * function setup() {
      *   // Prints "hello, world" to the console.
      *   print('hello, world');
@@ -8022,8 +8038,8 @@ var p5 = (function () {
      * </code>
      * </div>
      *
-     * <div>
-     * <code class="norender">
+     * <div class="norender">
+     * <code>
      * function setup() {
      *   let name = 'ada';
      *   // Prints "hello, ada" to the console.
@@ -8496,6 +8512,7 @@ var p5 = (function () {
      * - `WEBGL2` whose value is `'webgl2'`,
      * - `WEBGL` whose value is `'webgl'`, or
      * - `P2D` whose value is `'p2d'`. This is the default for 2D sketches.
+     * - `P2DHDR` whose value is `'p2d-hdr'` (used for HDR 2D sketches, if available).
      *
      * See <a href="#/p5/setAttributes">setAttributes()</a> for ways to set the
      * WebGL version.
@@ -13843,7 +13860,7 @@ var p5 = (function () {
      * }
      * </code>
      * </div>
-     **/
+     */
     setGreen(new_green, max=[0, 1]) {
       if(!Array.isArray(max)){
         max = [0, max];
@@ -13954,7 +13971,7 @@ var p5 = (function () {
      * }
      * </code>
      * </div>
-     **/
+     */
     setAlpha(new_alpha, max=[0, 1]) {
       if(!Array.isArray(max)){
         max = [0, max];
@@ -22661,7 +22678,7 @@ var p5 = (function () {
      *
      * async function setup() {
      *   // Load the image.
-     *   gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');
+     *   gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');
      *
      *   createCanvas(100, 100);
      *
@@ -22701,7 +22718,7 @@ var p5 = (function () {
      *
      * async function setup() {
      *   // Load the image.
-     *   gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');
+     *   gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');
      *
      *   createCanvas(100, 100);
      *
@@ -22757,7 +22774,7 @@ var p5 = (function () {
      *
      * async function setup() {
      *   // Load the image.
-     *   gif = await loadImage('assets/arnott-wallace-wink-loop-forever.gif');
+     *   gif = await loadImage('assets/arnott-wallace-eye-loop-forever.gif');
      *
      *   createCanvas(100, 100);
      *
@@ -37619,7 +37636,7 @@ var p5 = (function () {
      * }
      *
      * function mousePressed() {
-     *   httpPost(url, 'json', postData, function(result) {
+     *   httpPost(url, postData, 'json', function(result) {
      *     strokeWeight(2);
      *     text(result.body, mouseX, mouseY);
      *   });
@@ -37639,8 +37656,8 @@ var p5 = (function () {
      * function mousePressed() {
      *   httpPost(
      *     url,
-     *     'json',
      *     postData,
+     *     'json',
      *     function(result) {
      *       // ... won't be called
      *     },
@@ -37758,20 +37775,29 @@ var p5 = (function () {
      * let eqFeatureIndex = 0;
      *
      * function setup() {
+     *  createCanvas(100,100);
+     * 
      *   let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';
+     * 
+     *   const req = new Request(url, {
+     *    method: 'GET',
+     *    headers: {authorization: 'Bearer secretKey'}
+     *  });
+     *  // httpDo(path, method, datatype, success, error) 
+     * 
      *   httpDo(
-     *     url,
-     *     {
-     *       method: 'GET',
-     *       // Other Request options, like special headers for apis
-     *       headers: { authorization: 'Bearer secretKey' }
+     *     req,
+     *     'GET',
+     *    'json',
+     *     res => {
+     *      earthquakes = res;
      *     },
-     *     function(res) {
-     *       earthquakes = res;
-     *     }
-     *   );
+     *    err => {
+     *      console.error('Error loading data:', err);
+     *    }
+     *  );
      * }
-     *
+     * 
      * function draw() {
      *   // wait until the data is loaded
      *   if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {
@@ -39767,7 +39793,7 @@ var p5 = (function () {
      * are set to `CENTER`.
      *
      * @method image
-     * @param  {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture} img image to display.
+     * @param  {p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture|p5.Renderer|p5.Graphics} img image to display.
      * @param  {Number}   x x-coordinate of the top-left corner of the image.
      * @param  {Number}   y y-coordinate of the top-left corner of the image.
      * @param  {Number}   [width]  width to draw the image.
@@ -40334,6 +40360,7 @@ var p5 = (function () {
      * <code>
      * function setup() {
      *   createCanvas(100, 100);
+     *   background(128);
      *
      *   // Load the pixels array.
      *   loadPixels();
@@ -46689,7 +46716,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of eyeX, rounded to the nearest integer.
-     *   text(`eyeX: ${round(cam.eyeX)}`, 0, 55);
+     *   text(`eyeX: ${round(cam.eyeX)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -46707,9 +46734,6 @@ var p5 = (function () {
      *   // Create a p5.Camera object.
      *   cam = createCamera();
      *
-     *   // Set the camera
-     *   setCamera(cam);
-     *
      *   // Place the camera at the top-center.
      *   cam.setPosition(0, -400, 800);
      *
@@ -46743,7 +46767,7 @@ var p5 = (function () {
      *   cam.setPosition(x, -400, 800);
      *
      *   // Display the value of eyeX, rounded to the nearest integer.
-     *   text(`eyeX: ${round(cam.eyeX)}`, 0, 55);
+     *   text(`eyeX: ${round(cam.eyeX)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -46801,7 +46825,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of eyeY, rounded to the nearest integer.
-     *   text(`eyeY: ${round(cam.eyeY)}`, 0, 55);
+     *   text(`eyeY: ${round(cam.eyeY)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -46855,7 +46879,7 @@ var p5 = (function () {
      *   cam.setPosition(0, y, 800);
      *
      *   // Display the value of eyeY, rounded to the nearest integer.
-     *   text(`eyeY: ${round(cam.eyeY)}`, 0, 55);
+     *   text(`eyeY: ${round(cam.eyeY)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -46913,7 +46937,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of eyeZ, rounded to the nearest integer.
-     *   text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);
+     *   text(`eyeZ: ${round(cam.eyeZ)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -46967,7 +46991,7 @@ var p5 = (function () {
      *   cam.setPosition(0, -400, z);
      *
      *   // Display the value of eyeZ, rounded to the nearest integer.
-     *   text(`eyeZ: ${round(cam.eyeZ)}`, 0, 55);
+     *   text(`eyeZ: ${round(cam.eyeZ)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47026,7 +47050,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of centerX, rounded to the nearest integer.
-     *   text(`centerX: ${round(cam.centerX)}`, 0, 55);
+     *   text(`centerX: ${round(cam.centerX)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47080,7 +47104,7 @@ var p5 = (function () {
      *   cam.lookAt(x, 20, -30);
      *
      *   // Display the value of centerX, rounded to the nearest integer.
-     *   text(`centerX: ${round(cam.centerX)}`, 0, 55);
+     *   text(`centerX: ${round(cam.centerX)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47139,7 +47163,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of centerY, rounded to the nearest integer.
-     *   text(`centerY: ${round(cam.centerY)}`, 0, 55);
+     *   text(`centerY: ${round(cam.centerY)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47193,7 +47217,7 @@ var p5 = (function () {
      *   cam.lookAt(10, y, -30);
      *
      *   // Display the value of centerY, rounded to the nearest integer.
-     *   text(`centerY: ${round(cam.centerY)}`, 0, 55);
+     *   text(`centerY: ${round(cam.centerY)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47252,7 +47276,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of centerZ, rounded to the nearest integer.
-     *   text(`centerZ: ${round(cam.centerZ)}`, 0, 55);
+     *   text(`centerZ: ${round(cam.centerZ)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47270,9 +47294,6 @@ var p5 = (function () {
      *   // Create a p5.Camera object.
      *   cam = createCamera();
      *
-     *   // Set the camera
-     *   setCamera(cam);
-     *
      *   // Place the camera at the top-right.
      *   cam.setPosition(100, -400, 800);
      *
@@ -47306,7 +47327,7 @@ var p5 = (function () {
      *   cam.lookAt(10, 20, z);
      *
      *   // Display the value of centerZ, rounded to the nearest integer.
-     *   text(`centerZ: ${round(cam.centerZ)}`, 0, 55);
+     *   text(`centerZ: ${round(cam.centerZ)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47364,7 +47385,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of upX, rounded to the nearest tenth.
-     *   text(`upX: ${round(cam.upX, 1)}`, 0, 55);
+     *   text(`upX: ${round(cam.upX, 1)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47417,7 +47438,7 @@ var p5 = (function () {
      *   cam.camera(100, -400, 800, 0, 0, 0, x, 1, 0);
      *
      *   // Display the value of upX, rounded to the nearest tenth.
-     *   text(`upX: ${round(cam.upX, 1)}`, 0, 55);
+     *   text(`upX: ${round(cam.upX, 1)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47475,7 +47496,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of upY, rounded to the nearest tenth.
-     *   text(`upY: ${round(cam.upY, 1)}`, 0, 55);
+     *   text(`upY: ${round(cam.upY, 1)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47528,7 +47549,7 @@ var p5 = (function () {
      *   cam.camera(100, -400, 800, 0, 0, 0, 0, y, 0);
      *
      *   // Display the value of upY, rounded to the nearest tenth.
-     *   text(`upY: ${round(cam.upY, 1)}`, 0, 55);
+     *   text(`upY: ${round(cam.upY, 1)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47586,7 +47607,7 @@ var p5 = (function () {
      *   fill(0);
      *
      *   // Display the value of upZ, rounded to the nearest tenth.
-     *   text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);
+     *   text(`upZ: ${round(cam.upZ, 1)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -47639,7 +47660,7 @@ var p5 = (function () {
      *   cam.camera(100, -400, 800, 0, 0, 0, 0, 1, z);
      *
      *   // Display the value of upZ, rounded to the nearest tenth.
-     *   text(`upZ: ${round(cam.upZ, 1)}`, 0, 55);
+     *   text(`upZ: ${round(cam.upZ, 1)}`, 0, 45);
      * }
      * </code>
      * </div>
@@ -55474,11 +55495,10 @@ var p5 = (function () {
      * }
      * </code>
      * </div>
-     * <br>
-     * Now with the antialias attribute set to true.
-     * <br>
+     * 
      * <div>
      * <code>
+     *  // Now with the antialias attribute set to true.
      * function setup() {
      *   setAttributes('antialias', true);
      *   createCanvas(100, 100, WEBGL);
@@ -58930,7 +58950,7 @@ var p5 = (function () {
      * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
      * current <a href="#/p5/colorMode">colorMode()</a>. The last parameter,
      * `direction` sets the light’s direction using a
-     * <a href="#/p5.Geometry">p5.Geometry</a> object. For example,
+     * <a href="#/p5.Vector">p5.Vector</a> object. For example,
      * `directionalLight(255, 0, 0, lightDir)` creates a red `(255, 0, 0)` light
      * that shines in the direction the `lightDir` vector points.
      *
@@ -58945,7 +58965,7 @@ var p5 = (function () {
      * parameter, `color`, sets the light’s color using a
      * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
      * second parameter, `direction`, sets the light’s direction using a
-     * <a href="#/p5.Color">p5.Color</a> object. For example,
+     * <a href="#/p5.Vector">p5.Vector</a> object. For example,
      * `directionalLight(myColor, lightDir)` creates a light that shines in the
      * direction the `lightDir` vector points with the color value of `myColor`.
      *
@@ -65845,6 +65865,7 @@ var p5 = (function () {
       // FramebufferTexture instances wrap raw WebGL textures already, which
       // don't need any extra updating, as they already live on the GPU
       if (this.isFramebufferTexture) {
+        this.src.update();
         return false;
       }
 
@@ -66236,6 +66257,10 @@ var p5 = (function () {
       return this.framebuffer.height * this.framebuffer.density;
     }
 
+    update() {
+      this.framebuffer._update(this.property);
+    }
+
     rawTexture() {
       return this.framebuffer[this.property];
     }
@@ -66248,6 +66273,8 @@ var p5 = (function () {
 
       this._isClipApplied = false;
 
+      this.dirty = { colorTexture: false, depthTexture: false };
+
       this.pixels = [];
 
       this.format = settings.format || UNSIGNED_BYTE;
@@ -67287,6 +67314,49 @@ var p5 = (function () {
       }
     }
 
+    /**
+     * Ensure all readable textures are up-to-date.
+     * @private
+     * @property {'colorTexutre'|'depthTexture'} property The property to update
+     */
+    _update(property) {
+      if (this.dirty[property] && this.antialias) {
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.aaFramebuffer);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
+        const partsToCopy = {
+          colorTexture: [gl.COLOR_BUFFER_BIT, this.colorP5Texture.glMagFilter],
+        };
+        if (this.useDepth) {
+          partsToCopy.depthTexture = [
+            gl.DEPTH_BUFFER_BIT,
+            this.depthP5Texture.glMagFilter
+          ];
+        }
+        const [flag, filter] = partsToCopy[property];
+        gl.blitFramebuffer(
+          0,
+          0,
+          this.width * this.density,
+          this.height * this.density,
+          0,
+          0,
+          this.width * this.density,
+          this.height * this.density,
+          flag,
+          filter
+        );
+        this.dirty[property] = false;
+
+        const activeFbo = this.renderer.activeFramebuffer();
+        if (activeFbo) {
+          gl.bindFramebuffer(gl.FRAMEBUFFER, activeFbo._framebufferToBind());
+        } else {
+          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        }
+      }
+    }
+
     /**
      * Ensures that the framebuffer is ready to be drawn to
      *
@@ -67308,27 +67378,7 @@ var p5 = (function () {
      */
     _beforeEnd() {
       if (this.antialias) {
-        const gl = this.gl;
-        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.aaFramebuffer);
-        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer);
-        const partsToCopy = [
-          [gl.COLOR_BUFFER_BIT, this.colorP5Texture.glMagFilter]
-        ];
-        if (this.useDepth) {
-          partsToCopy.push(
-            [gl.DEPTH_BUFFER_BIT, this.depthP5Texture.glMagFilter]
-          );
-        }
-        for (const [flag, filter] of partsToCopy) {
-          gl.blitFramebuffer(
-            0, 0,
-            this.width * this.density, this.height * this.density,
-            0, 0,
-            this.width * this.density, this.height * this.density,
-            flag,
-            filter
-          );
-        }
+        this.dirty = { colorTexture: true, depthTexture: true };
       }
     }
 
@@ -67508,6 +67558,7 @@ var p5 = (function () {
      * </div>
      */
     loadPixels() {
+      this._update('colorTexture');
       const gl = this.gl;
       const prevFramebuffer = this.renderer.activeFramebuffer();
       gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
@@ -67566,6 +67617,7 @@ var p5 = (function () {
      * @return {Number[]}  color of the pixel at `(x, y)` as an array of color values `[R, G, B, A]`.
      */
     get(x, y, w, h) {
+      this._update('colorTexture');
       // p5._validateParameters('p5.Framebuffer.get', arguments);
       const colorFormat = this._glColorFormat();
       if (x === undefined && y === undefined) {
@@ -67732,6 +67784,7 @@ var p5 = (function () {
         this.pixels
       );
       this.colorP5Texture.unbindTexture();
+      this.dirty.colorTexture = false;
 
       const prevFramebuffer = this.renderer.activeFramebuffer();
       if (this.antialias) {
@@ -70540,10 +70593,14 @@ var p5 = (function () {
    * ```
    *
    * 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
-   * 
+   * <a href="#/p5/draw">draw()</a> begins looping.
+   * If `setup()` is declared `async` (e.g. `async function setup()`),
+   * execution pauses at each `await` until its promise resolves.
+   * For example, `font = await loadFont(...)` waits for the font asset
+   * to load because `loadFont()` function returns a promise, and the await 
+   * keyword means the program will wait for the promise to resolve.
+   * This ensures that all assets are fully loaded before the sketch continues.
+
    * 
    * loading assets.
    *
@@ -70615,7 +70672,6 @@ var p5 = (function () {
    * </code>
    * </div>
    */
-
   /**
    * A function that's called repeatedly while the sketch runs.
    *
@@ -70843,6 +70899,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     *  createCanvas(100, 100);
+     * };
+     * 
      * function draw() {
      *   background(200);
      *
@@ -70864,6 +70925,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     * createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   background(200);
      *
@@ -71636,6 +71702,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     *  createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   // Add the text description.
      *   textOutput();
@@ -71656,6 +71727,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     *  createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   // Add the text description and
      *   // display it for debugging.
@@ -71770,6 +71846,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup() {
+     *   createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   // Add the grid description.
      *   gridOutput();
@@ -71790,6 +71871,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     *  createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   // Add the grid description and
      *   // display it for debugging.
@@ -71810,6 +71896,7 @@ var p5 = (function () {
      * </div>
      */
 
+
     fn.gridOutput = function(display) {
       // p5._validateParameters('gridOutput', arguments);
       //if gridOutput is already true
@@ -82767,7 +82854,7 @@ var p5 = (function () {
   	image: {
   		overloads: [
   			[
-  				"p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture",
+  				"p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture|p5.Renderer|p5.Graphics",
   				"Number",
   				"Number",
   				"Number?",
@@ -83265,14 +83352,7 @@ var p5 = (function () {
   	createVector: {
   		overloads: [
   			[
-  				null
-  			]
-  		]
-  	},
-  	createMatrix: {
-  		overloads: [
-  			[
-  				"Number[]"
+  				"...Number[]"
   			]
   		]
   	},
@@ -83698,14 +83778,23 @@ var p5 = (function () {
   	bezierOrder: {
   		overloads: [
   			[
+  				"Number"
   			],
   			[
-  				"Number"
   			]
   		]
   	},
   	splineVertex: {
   		overloads: [
+  			[
+  				"Number",
+  				"Number"
+  			],
+  			[
+  				"Number",
+  				"Number",
+  				"Number?"
+  			],
   			[
   				"Number",
   				"Number",
@@ -83723,21 +83812,21 @@ var p5 = (function () {
   	},
   	splineProperty: {
   		overloads: [
-  			[
-  				"String"
-  			],
   			[
   				"String",
   				null
+  			],
+  			[
+  				"String"
   			]
   		]
   	},
   	splineProperties: {
   		overloads: [
   			[
+  				"Object"
   			],
   			[
-  				"Object"
   			]
   		]
   	},
@@ -83799,19 +83888,6 @@ var p5 = (function () {
   			]
   		]
   	},
-  	curveVertex: {
-  		overloads: [
-  			[
-  				"Number",
-  				"Number"
-  			],
-  			[
-  				"Number",
-  				"Number",
-  				"Number?"
-  			]
-  		]
-  	},
   	endShape: {
   		overloads: [
   			[
@@ -83846,7 +83922,6 @@ var p5 = (function () {
   				"String",
   				"String?",
   				"Object?",
-  				"String|String[]?",
   				"Function?",
   				"Function?"
   			],
@@ -84608,56 +84683,15 @@ var p5 = (function () {
   			],
   			[
   				"String|Request",
-  				"Object?",
-  				"String?",
-  				"function(p5.Geometry)?",
-  				"function(Event)?",
-  				"Boolean?",
-  				"Boolean?",
-  				"Boolean?"
-  			]
-  		]
-  	},
-  	parseObj: {
-  		overloads: [
-  			[
-  			]
-  		]
-  	},
-  	parseSTL: {
-  		overloads: [
-  			[
-  			]
-  		]
-  	},
-  	isBinary: {
-  		overloads: [
-  			[
-  			]
-  		]
-  	},
-  	matchDataViewAt: {
-  		overloads: [
-  			[
-  			]
-  		]
-  	},
-  	parseBinarySTL: {
-  		overloads: [
-  			[
-  			]
-  		]
-  	},
-  	parseASCIISTL: {
-  		overloads: [
-  			[
+  				"Object?"
   			]
   		]
   	},
   	model: {
   		overloads: [
   			[
-  				"p5.Geometry"
+  				"p5.Geometry",
+  				"Number?"
   			]
   		]
   	},
@@ -84679,12 +84713,7 @@ var p5 = (function () {
   			[
   				"String",
   				"String?",
-  				"Object?",
-  				"function(p5.Geometry)?",
-  				"function(Event)?",
-  				"boolean?",
-  				"boolean?",
-  				"boolean?"
+  				"Object?"
   			]
   		]
   	},
@@ -86471,9 +86500,7 @@ var p5 = (function () {
   				"Number",
   				"Number",
   				"Number",
-  				"Object?",
-  				"Number?",
-  				"Number?"
+  				"Object?"
   			]
   		]
   	}
@@ -86920,9 +86947,14 @@ var p5 = (function () {
         const isOptional = param?.endsWith('?');
         param = param?.replace(/\?$/, '');
 
-        let schema = generateTypeSchema(param);
+        const isRest = param?.startsWith('...') && param?.endsWith('[]');
+        param = param?.replace(/^\.\.\.(.+)\[\]$/, '$1');
 
-        return isOptional ? schema.optional() : schema;
+        let schema = generateTypeSchema(param);
+        if (isOptional) {
+          schema = schema.optional();
+        }
+        return { schema, rest: isRest };
       };
 
       // Note that in Zod, `optional()` only checks for undefined, not the absence
@@ -86956,14 +86988,22 @@ var p5 = (function () {
       const overloadSchemas = overloads.flatMap(overload => {
         const combinations = generateOverloadCombinations(overload);
 
-        return combinations.map(combo =>
-          tupleType(
-            combo
-              .map(p => generateParamSchema(p))
-              // For now, ignore schemas that cannot be mapped to a defined type
-              .filter(schema => schema !== undefined)
-          )
-        );
+        return combinations.map(combo => {
+          const params = combo
+            .map(p => generateParamSchema(p))
+            .filter(s => s.schema !== undefined);
+
+          let rest;
+          if (params.at(-1)?.rest) {
+            rest = params.pop();
+          }
+
+          let combined = tupleType(params.map(s => s.schema));
+          if (rest) {
+            combined = combined.rest(rest.schema);
+          }
+          return combined;
+        });
       });
 
       return overloadSchemas.length === 1
@@ -87198,7 +87238,7 @@ var p5 = (function () {
       // theoretically allowed to stay undefined and valid, it is likely that the
       // user intended to call the function with non-undefined arguments. Skip
       // regular workflow and return a friendly error message right away.
-      if (Array.isArray(args) && args.every(arg => arg === undefined)) {
+      if (Array.isArray(args) && args.length > 0 && args.every(arg => arg === undefined)) {
         const undefinedErrorMessage = `🌸 p5.js says: All arguments for ${func}() are undefined. There is likely an error in the code.`;
 
         return {
@@ -94821,7 +94861,7 @@ var p5 = (function () {
      * let slider;
      *
      * function setup() {
-     *   createCanvas(100, 100);
+     *   createCanvas(200, 200);
      *
      *   // Create a paragraph element and place
      *   // it at the top of the canvas.
@@ -95062,10 +95102,10 @@ var p5 = (function () {
      *   background(200);
      *
      *   let img = createImg(
-     *     'https://p5js.org/assets/img/asterisk-01.png',
-     *     'The p5.js magenta asterisk.'
+     *     '/assets/cat.jpg',
+     *     'image of a cat'
      *   );
-     *   img.position(0, -10);
+     *   img.position(0, 10);
      *
      *   describe('A gray square with a magenta asterisk in its center.');
      * }
@@ -95414,7 +95454,7 @@ var p5 = (function () {
      *
      *   // Create a checkbox and place it beneath the canvas.
      *   checkbox = createCheckbox();
-     *   checkbox.position(0, 100);
+     *   checkbox.position(0, 70);
      *
      *   describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
      * }
@@ -95440,7 +95480,7 @@ var p5 = (function () {
      *   // Create a checkbox and place it beneath the canvas.
      *   // Label the checkbox "white".
      *   checkbox = createCheckbox(' white');
-     *   checkbox.position(0, 100);
+     *   checkbox.position(0, 70);
      *
      *   describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
      * }
@@ -95466,7 +95506,7 @@ var p5 = (function () {
      *   // Create a checkbox and place it beneath the canvas.
      *   // Label the checkbox "white" and set its value to true.
      *   checkbox = createCheckbox(' white', true);
-     *   checkbox.position(0, 100);
+     *   checkbox.position(0, 70);
      *
      *   describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
      * }
@@ -96345,7 +96385,7 @@ var p5 = (function () {
      * let img;
      *
      * function setup() {
-     *   createCanvas(100, 100);
+     *   createCanvas(200, 200);
      *
      *   // Create a file input and place it beneath
      *   // the canvas.
@@ -96599,18 +96639,18 @@ var p5 = (function () {
      * @example
      * <div>
      * <code>
+     * let rotationX = 0;            // Angle in degrees
+     *
      * function setup() {
-     *   createCanvas(100, 100, WEBGL);
+     *   createCanvas(200, 200, WEBGL);   // Create 3D canvas
      * }
      *
      * function draw() {
-     *   background(200);
-     *   //rotateZ(radians(rotationZ));
-     *   rotateX(radians(rotationX));
-     *   //rotateY(radians(rotationY));
-     *   box(200, 200, 200);
-     *   describe(`red horizontal line right, green vertical line bottom.
-     *     black background.`);
+     *   background(220);                 // Set light gray background
+     *   rotateX(radians(rotationX));     // Rotate around X-axis
+     *   normalMaterial();                // Apply simple shaded material
+     *   box(60);                         // Draw 3D cube (60 units wide)
+     *   rotationX = (rotationX + 2) % 360; // Increment rotation (2° per frame)
      * }
      * </code>
      * </div>
@@ -96632,18 +96672,18 @@ var p5 = (function () {
      * @example
      * <div>
      * <code>
+     * let rotationY = 0;            // Angle in degrees
+     *
      * function setup() {
-     *   createCanvas(100, 100, WEBGL);
+     *   createCanvas(200, 200, WEBGL);   // Create 3D canvas
      * }
      *
      * function draw() {
-     *   background(200);
-     *   //rotateZ(radians(rotationZ));
-     *   //rotateX(radians(rotationX));
-     *   rotateY(radians(rotationY));
-     *   box(200, 200, 200);
-     *   describe(`red horizontal line right, green vertical line bottom.
-     *     black background.`);
+     *   background(220);                 // Set light gray background
+     *   rotateY(radians(rotationY));     // Rotate around Y-axis (vertical)
+     *   normalMaterial();                // Apply simple shaded material
+     *   box(60);                         // Draw 3D cube (60 units wide)
+     *   rotationY = (rotationY + 2) % 360; // Increment rotation (2° per frame)
      * }
      * </code>
      * </div>
@@ -96666,18 +96706,18 @@ var p5 = (function () {
      * @example
      * <div>
      * <code>
+     * let rotationZ = 0;          // Angle in degrees
+     *
      * function setup() {
-     *   createCanvas(100, 100, WEBGL);
+     *   createCanvas(200, 200, WEBGL);   // Create 3D canvas
      * }
      *
      * function draw() {
-     *   background(200);
-     *   rotateZ(radians(rotationZ));
-     *   //rotateX(radians(rotationX));
-     *   //rotateY(radians(rotationY));
-     *   box(200, 200, 200);
-     *   describe(`red horizontal line right, green vertical line bottom.
-     *     black background.`);
+     *   background(220);
+     *   rotateZ(radians(rotationZ));     // Rotate around Z-axis
+     *   normalMaterial();                // Apply simple shaded material
+     *   box(60);                         // Draw 3D cube
+     *   rotationZ = (rotationZ + 2) % 360; // Increment rotation angle
      * }
      * </code>
      * </div>
@@ -97866,7 +97906,6 @@ var p5 = (function () {
 
     };
 
-
     /**
      * A function that's called once when keys with printable characters are pressed.
      *
@@ -97998,7 +98037,7 @@ var p5 = (function () {
      * </div>
      */
     fn._onkeypress = function(e) {
-      if (e.which === this._lastKeyCodeTyped) {
+      if (e.which === this._lastKeyCodeTyped && e.repeat) {
         // prevent multiple firings
         return;
       }
@@ -98036,10 +98075,16 @@ var p5 = (function () {
      * }
      * ```
      *
-     * `keyIsDown()` can check for key presses using
-     * <a href="#/p5/keyCode">keyCode</a> values, as in `keyIsDown(37)` or
-     * `keyIsDown(LEFT_ARROW)`. Key codes can be found on websites such as
-     * <a href="https://keycode.info" target="_blank">keycode.info</a>.
+     * `keyIsDown()` can check for key presses using strings based on
+     * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
+     * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
+     * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
+     *
+     * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
+     * This is a breaking change from previous versions.
+     *
+     * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
+     * internally rather than numeric codes.
      *
      * @method keyIsDown
      * @param {Number|String}   code key to check.
@@ -101908,8 +101953,8 @@ var p5 = (function () {
      * let table;
      *
      * async function setup() {
-     *   // Create a 200x100 canvas and set a white background
-     *   createCanvas(200, 100);
+     *   // Create a 300x100 canvas and set a white background
+     *   createCanvas(300, 100);
      *   background(255);
      *
      *   // Load the CSV file with a header row
@@ -104051,7 +104096,7 @@ var p5 = (function () {
      * <a href="#/p5.Vector">p5.Vector</a> class.
      *
      * @method createVector
-     * @param {...Number} components Components of the vector.
+     * @param {...Number} x Zero or more numbers, representing each component of the vector.
      * @return {p5.Vector} new <a href="#/p5.Vector">p5.Vector</a> object.
      *
      * @example
@@ -108219,6 +108264,7 @@ var p5 = (function () {
      * @method model
      * @param  {p5.Geometry} model 3D shape to be drawn.
      *
+     * @param {Number} [count=1] number of instances to draw.
      * @example
      * <div>
      * <code>
@@ -109749,7 +109795,7 @@ var p5 = (function () {
      *   createCanvas(300, 300);
      *   background(220);
      *
-     *   textSize(48);
+     *   textSize(35);
      *   textAlign(LEFT, BASELINE);
      *   textFont('Georgia');
      *
@@ -118714,7 +118760,6 @@ var p5 = (function () {
   const fontFaceVariations = ['weight', 'stretch', 'style'];
 
 
-  let nextId = 0;
   class Font {
     constructor(p, fontFace, name, path, data) {
       if (!(fontFace instanceof FontFace)) {
@@ -118725,7 +118770,6 @@ var p5 = (function () {
       this.path = path;
       this.data = data;
       this.face = fontFace;
-      this.id = nextId++;
     }
 
     /**
@@ -120159,24 +120203,7 @@ var p5 = (function () {
   function text(p5, fn) {
     RendererGL.prototype.maxCachedGlyphs = function() {
       // TODO: use more than vibes to find a good value for this
-      return 200
-    };
-
-    RendererGL.prototype.freeGlyphInfo = function(gi) {
-      const datas = [
-        gi.strokeImageInfo.imageData,
-        gi.rowInfo.cellImageInfo.imageData,
-        gi.rowInfo.dimImageInfo.imageData,
-        gi.colInfo.cellImageInfo.imageData,
-        gi.colInfo.dimImageInfo.imageData,
-      ];
-      for (const data of datas) {
-        const tex = this.textures.get(data);
-        if (tex) {
-          tex.remove();
-          this.textures.delete(data);
-        }
-      }
+      return 200;
     };
 
     Font.prototype._getFontInfo = function(axs) {
@@ -120944,7 +120971,7 @@ var p5 = (function () {
       sh.setUniform("uMaterialColor", curFillColor);
       gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
 
-      this.fontCache = this.fontCache || new Map();
+      this.glyphDataCache = this.glyphDataCache || new Set();
 
       try {
         // fetch the glyphs in the line of text
@@ -120953,20 +120980,35 @@ var p5 = (function () {
         for (const glyph of glyphs) {
           const gi = fontInfo.getGlyphInfo(glyph);
           if (gi.uGlyphRect) {
+            const rowInfo = gi.rowInfo;
+            const colInfo = gi.colInfo;
 
-            const cacheKey = JSON.stringify({ font: font.id, axs, glyph: glyph.shape.g });
-            // Bump this font to the end of the cache list by deleting and re-adding it
-            this.fontCache.delete(cacheKey);
-            this.fontCache.set(cacheKey, gi);
-            if (this.fontCache.size > this.maxCachedGlyphs()) {
-              const keyToRemove = this.fontCache.keys().next().value;
-              const val = this.fontCache.get(keyToRemove);
-              this.fontCache.delete(keyToRemove);
-              this.freeGlyphInfo(val);
+            // Bump the resources for this glyph to the end of the cache list by deleting and re-adding
+            const glyphResources = [
+              gi.strokeImageInfo.imageData,
+              rowInfo.cellImageInfo.imageData,
+              rowInfo.dimImageInfo.imageData,
+              colInfo.cellImageInfo.imageData,
+              colInfo.dimImageInfo.imageData
+            ];
+            for (const resource of glyphResources) {
+              this.glyphDataCache.delete(resource);
+              this.glyphDataCache.add(resource);
+            }
+
+            // If we have too many glyph textures, remove the least recently used
+            // ones from GPU memory. The data still exists on the CPU and will be
+            // re-uploaded if it gets actively used again.
+            while (this.glyphDataCache.size > this.maxCachedGlyphs()) {
+              const data = this.glyphDataCache.values().next().value;
+              this.glyphDataCache.delete(data);
+              const tex = this.textures.get(data);
+              if (tex) {
+                tex.remove();
+                this.textures.delete(data);
+              }
             }
 
-            const rowInfo = gi.rowInfo;
-            const colInfo = gi.colInfo;
             sh.setUniform("uSamplerStrokes", gi.strokeImageInfo.imageData);
             sh.setUniform("uSamplerRowStrokes", rowInfo.cellImageInfo.imageData);
             sh.setUniform("uSamplerRows", rowInfo.dimImageInfo.imageData);