p5 2.0.1 → 2.0.3

package/lib/p5.esm.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.0.1 April 23, 2025 */
+/*! p5.js v2.0.3 May 30, 2025 */
 /**
  * @module Constants
  * @submodule Constants
@@ -12,17 +12,33 @@ const _PI = Math.PI;
  * @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';
 
 /**
@@ -8010,8 +8026,8 @@ function environment$1(p5, fn){
    * @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');
@@ -8019,8 +8035,8 @@ function environment$1(p5, fn){
    * </code>
    * </div>
    *
-   * <div>
-   * <code class="norender">
+   * <div class="norender">
+   * <code>
    * function setup() {
    *   let name = 'ada';
    *   // Prints "hello, ada" to the console.
@@ -8493,6 +8509,7 @@ function environment$1(p5, fn){
    * - `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.
@@ -13840,7 +13857,7 @@ class Color {
    * }
    * </code>
    * </div>
-   **/
+   */
   setGreen(new_green, max=[0, 1]) {
     if(!Array.isArray(max)){
       max = [0, max];
@@ -13951,7 +13968,7 @@ class Color {
    * }
    * </code>
    * </div>
-   **/
+   */
   setAlpha(new_alpha, max=[0, 1]) {
     if(!Array.isArray(max)){
       max = [0, max];
@@ -22658,7 +22675,7 @@ class Image {
    *
    * 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);
    *
@@ -22698,7 +22715,7 @@ class Image {
    *
    * 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);
    *
@@ -22754,7 +22771,7 @@ class Image {
    *
    * 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);
    *
@@ -37616,7 +37633,7 @@ function files(p5, fn){
    * }
    *
    * function mousePressed() {
-   *   httpPost(url, 'json', postData, function(result) {
+   *   httpPost(url, postData, 'json', function(result) {
    *     strokeWeight(2);
    *     text(result.body, mouseX, mouseY);
    *   });
@@ -37636,8 +37653,8 @@ function files(p5, fn){
    * function mousePressed() {
    *   httpPost(
    *     url,
-   *     'json',
    *     postData,
+   *     'json',
    *     function(result) {
    *       // ... won't be called
    *     },
@@ -37755,20 +37772,29 @@ function files(p5, fn){
    * 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]) {
@@ -39764,7 +39790,7 @@ function loadingDisplaying(p5, fn){
    * 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.
@@ -40331,6 +40357,7 @@ function pixels(p5, fn){
    * <code>
    * function setup() {
    *   createCanvas(100, 100);
+   *   background(128);
    *
    *   // Load the pixels array.
    *   loadPixels();
@@ -46686,7 +46713,7 @@ class Camera {
    *   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>
@@ -46704,9 +46731,6 @@ class Camera {
    *   // Create a p5.Camera object.
    *   cam = createCamera();
    *
-   *   // Set the camera
-   *   setCamera(cam);
-   *
    *   // Place the camera at the top-center.
    *   cam.setPosition(0, -400, 800);
    *
@@ -46740,7 +46764,7 @@ class Camera {
    *   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>
@@ -46798,7 +46822,7 @@ class Camera {
    *   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>
@@ -46852,7 +46876,7 @@ class Camera {
    *   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>
@@ -46910,7 +46934,7 @@ class Camera {
    *   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>
@@ -46964,7 +46988,7 @@ class Camera {
    *   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>
@@ -47023,7 +47047,7 @@ class Camera {
    *   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>
@@ -47077,7 +47101,7 @@ class Camera {
    *   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>
@@ -47136,7 +47160,7 @@ class Camera {
    *   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>
@@ -47190,7 +47214,7 @@ class Camera {
    *   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>
@@ -47249,7 +47273,7 @@ class Camera {
    *   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>
@@ -47267,9 +47291,6 @@ class Camera {
    *   // Create a p5.Camera object.
    *   cam = createCamera();
    *
-   *   // Set the camera
-   *   setCamera(cam);
-   *
    *   // Place the camera at the top-right.
    *   cam.setPosition(100, -400, 800);
    *
@@ -47303,7 +47324,7 @@ class Camera {
    *   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>
@@ -47361,7 +47382,7 @@ class Camera {
    *   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>
@@ -47414,7 +47435,7 @@ class Camera {
    *   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>
@@ -47472,7 +47493,7 @@ class Camera {
    *   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>
@@ -47525,7 +47546,7 @@ class Camera {
    *   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>
@@ -47583,7 +47604,7 @@ class Camera {
    *   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>
@@ -47636,7 +47657,7 @@ class Camera {
    *   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>
@@ -55471,11 +55492,10 @@ function rendererGL(p5, fn) {
    * }
    * </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);
@@ -58927,7 +58947,7 @@ function light(p5, fn){
    * 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.
    *
@@ -58942,7 +58962,7 @@ function light(p5, fn){
    * 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`.
    *
@@ -65842,6 +65862,7 @@ class Texture {
     // 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;
     }
 
@@ -66233,6 +66254,10 @@ class FramebufferTexture {
     return this.framebuffer.height * this.framebuffer.density;
   }
 
+  update() {
+    this.framebuffer._update(this.property);
+  }
+
   rawTexture() {
     return this.framebuffer[this.property];
   }
@@ -66245,6 +66270,8 @@ class Framebuffer {
 
     this._isClipApplied = false;
 
+    this.dirty = { colorTexture: false, depthTexture: false };
+
     this.pixels = [];
 
     this.format = settings.format || UNSIGNED_BYTE;
@@ -67284,6 +67311,49 @@ class Framebuffer {
     }
   }
 
+  /**
+   * 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
    *
@@ -67305,27 +67375,7 @@ class Framebuffer {
    */
   _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 };
     }
   }
 
@@ -67505,6 +67555,7 @@ class Framebuffer {
    * </div>
    */
   loadPixels() {
+    this._update('colorTexture');
     const gl = this.gl;
     const prevFramebuffer = this.renderer.activeFramebuffer();
     gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
@@ -67563,6 +67614,7 @@ class Framebuffer {
    * @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) {
@@ -67729,6 +67781,7 @@ class Framebuffer {
       this.pixels
     );
     this.colorP5Texture.unbindTexture();
+    this.dirty.colorTexture = false;
 
     const prevFramebuffer = this.renderer.activeFramebuffer();
     if (this.antialias) {
@@ -70537,10 +70590,14 @@ for (const k in constants) {
  * ```
  *
  * 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.
  *
@@ -70612,7 +70669,6 @@ for (const k in constants) {
  * </code>
  * </div>
  */
-
 /**
  * A function that's called repeatedly while the sketch runs.
  *
@@ -70840,6 +70896,11 @@ function describe(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * };
+   * 
    * function draw() {
    *   background(200);
    *
@@ -70861,6 +70922,11 @@ function describe(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   * createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   background(200);
    *
@@ -71633,6 +71699,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the text description.
    *   textOutput();
@@ -71653,6 +71724,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the text description and
    *   // display it for debugging.
@@ -71767,6 +71843,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup() {
+   *   createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the grid description.
    *   gridOutput();
@@ -71787,6 +71868,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the grid description and
    *   // display it for debugging.
@@ -71807,6 +71893,7 @@ function outputs(p5, fn){
    * </div>
    */
 
+
   fn.gridOutput = function(display) {
     // p5._validateParameters('gridOutput', arguments);
     //if gridOutput is already true
@@ -82764,7 +82851,7 @@ var p5$1 = {
 	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?",
@@ -83262,14 +83349,7 @@ var p5$1 = {
 	createVector: {
 		overloads: [
 			[
-				null
-			]
-		]
-	},
-	createMatrix: {
-		overloads: [
-			[
-				"Number[]"
+				"...Number[]"
 			]
 		]
 	},
@@ -83695,14 +83775,23 @@ var p5$1 = {
 	bezierOrder: {
 		overloads: [
 			[
+				"Number"
 			],
 			[
-				"Number"
 			]
 		]
 	},
 	splineVertex: {
 		overloads: [
+			[
+				"Number",
+				"Number"
+			],
+			[
+				"Number",
+				"Number",
+				"Number?"
+			],
 			[
 				"Number",
 				"Number",
@@ -83720,21 +83809,21 @@ var p5$1 = {
 	},
 	splineProperty: {
 		overloads: [
-			[
-				"String"
-			],
 			[
 				"String",
 				null
+			],
+			[
+				"String"
 			]
 		]
 	},
 	splineProperties: {
 		overloads: [
 			[
+				"Object"
 			],
 			[
-				"Object"
 			]
 		]
 	},
@@ -83796,19 +83885,6 @@ var p5$1 = {
 			]
 		]
 	},
-	curveVertex: {
-		overloads: [
-			[
-				"Number",
-				"Number"
-			],
-			[
-				"Number",
-				"Number",
-				"Number?"
-			]
-		]
-	},
 	endShape: {
 		overloads: [
 			[
@@ -83843,7 +83919,6 @@ var p5$1 = {
 				"String",
 				"String?",
 				"Object?",
-				"String|String[]?",
 				"Function?",
 				"Function?"
 			],
@@ -84605,56 +84680,15 @@ var p5$1 = {
 			],
 			[
 				"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?"
 			]
 		]
 	},
@@ -84676,12 +84710,7 @@ var p5$1 = {
 			[
 				"String",
 				"String?",
-				"Object?",
-				"function(p5.Geometry)?",
-				"function(Event)?",
-				"boolean?",
-				"boolean?",
-				"boolean?"
+				"Object?"
 			]
 		]
 	},
@@ -86468,9 +86497,7 @@ var dataDoc = {
 				"Number",
 				"Number",
 				"Number",
-				"Object?",
-				"Number?",
-				"Number?"
+				"Object?"
 			]
 		]
 	}
@@ -86917,9 +86944,14 @@ function validateParams(p5, fn, lifecycles) {
       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
@@ -86953,14 +86985,22 @@ function validateParams(p5, fn, lifecycles) {
     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
@@ -87195,7 +87235,7 @@ function validateParams(p5, fn, lifecycles) {
     // 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 {
@@ -94818,7 +94858,7 @@ function dom$1(p5, fn){
    * let slider;
    *
    * function setup() {
-   *   createCanvas(100, 100);
+   *   createCanvas(200, 200);
    *
    *   // Create a paragraph element and place
    *   // it at the top of the canvas.
@@ -95059,10 +95099,10 @@ function dom$1(p5, fn){
    *   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.');
    * }
@@ -95411,7 +95451,7 @@ function dom$1(p5, fn){
    *
    *   // 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.');
    * }
@@ -95437,7 +95477,7 @@ function dom$1(p5, fn){
    *   // 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.');
    * }
@@ -95463,7 +95503,7 @@ function dom$1(p5, fn){
    *   // 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.');
    * }
@@ -96342,7 +96382,7 @@ function dom$1(p5, fn){
    * let img;
    *
    * function setup() {
-   *   createCanvas(100, 100);
+   *   createCanvas(200, 200);
    *
    *   // Create a file input and place it beneath
    *   // the canvas.
@@ -96596,18 +96636,18 @@ function acceleration(p5, fn){
    * @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>
@@ -96629,18 +96669,18 @@ function acceleration(p5, fn){
    * @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>
@@ -96663,18 +96703,18 @@ function acceleration(p5, fn){
    * @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>
@@ -97863,7 +97903,6 @@ function keyboard(p5, fn){
 
   };
 
-
   /**
    * A function that's called once when keys with printable characters are pressed.
    *
@@ -97995,7 +98034,7 @@ function keyboard(p5, fn){
    * </div>
    */
   fn._onkeypress = function(e) {
-    if (e.which === this._lastKeyCodeTyped) {
+    if (e.which === this._lastKeyCodeTyped && e.repeat) {
       // prevent multiple firings
       return;
     }
@@ -98033,10 +98072,16 @@ function keyboard(p5, fn){
    * }
    * ```
    *
-   * `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.
@@ -101905,8 +101950,8 @@ class TableRow {
    * 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
@@ -104048,7 +104093,7 @@ function math$1(p5, fn) {
    * <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
@@ -108216,6 +108261,7 @@ function loading$1(p5, fn){
    * @method model
    * @param  {p5.Geometry} model 3D shape to be drawn.
    *
+   * @param {Number} [count=1] number of instances to draw.
    * @example
    * <div>
    * <code>
@@ -109746,7 +109792,7 @@ function textCore(p5, fn) {
    *   createCanvas(300, 300);
    *   background(220);
    *
-   *   textSize(48);
+   *   textSize(35);
    *   textAlign(LEFT, BASELINE);
    *   textFont('Georgia');
    *
@@ -118711,7 +118757,6 @@ const invalidFontError = 'Sorry, only TTF, OTF and WOFF files are supported.'; /
 const fontFaceVariations = ['weight', 'stretch', 'style'];
 
 
-let nextId = 0;
 class Font {
   constructor(p, fontFace, name, path, data) {
     if (!(fontFace instanceof FontFace)) {
@@ -118722,7 +118767,6 @@ class Font {
     this.path = path;
     this.data = data;
     this.face = fontFace;
-    this.id = nextId++;
   }
 
   /**
@@ -120156,24 +120200,7 @@ if (typeof p5 !== 'undefined') {
 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) {
@@ -120941,7 +120968,7 @@ function text(p5, fn) {
     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
@@ -120950,20 +120977,35 @@ function text(p5, fn) {
       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);