p5 2.0.0 → 2.0.2

package/lib/p5.esm.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.0.0 April 17, 2025 */
+/*! p5.js v2.0.2 May 14, 2025 */
 /**
  * @module Constants
  * @submodule Constants
@@ -12,17 +12,33 @@ const _PI = Math.PI;
  * @property {String} VERSION
  * @final
  */
-const VERSION = '2.0.0';
+const VERSION = '2.0.2';
 
 // 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>
@@ -52867,7 +52888,7 @@ var lightTextureFrag = "uniform vec4 uTint;\nuniform sampler2D uSampler;\nunifor
 
 var phongVert = "precision highp int;\n\n#define HOOK_DEFINES\n\nIN vec3 aPosition;\nIN vec3 aNormal;\nIN vec2 aTexCoord;\nIN vec4 aVertexColor;\n\nuniform vec3 uAmbientColor[5];\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\nuniform mat4 uModelMatrix;\nuniform mat4 uViewMatrix;\nuniform mat3 uModelNormalMatrix;\nuniform mat3 uCameraNormalMatrix;\n#else\nuniform mat4 uModelViewMatrix;\nuniform mat3 uNormalMatrix;\n#endif\nuniform mat4 uProjectionMatrix;\nuniform int uAmbientLightCount;\n\nuniform bool uUseVertexColor;\nuniform vec4 uMaterialColor;\n\nOUT vec3 vNormal;\nOUT vec2 vTexCoord;\nOUT vec3 vViewPosition;\nOUT vec3 vAmbientColor;\nOUT vec4 vColor;\n\nstruct Vertex {\n  vec3 position;\n  vec3 normal;\n  vec2 texCoord;\n  vec4 color;\n};\n\nvoid main(void) {\n  HOOK_beforeVertex();\n\n  Vertex inputs;\n  inputs.position = aPosition;\n  inputs.normal = aNormal;\n  inputs.texCoord = aTexCoord;\n  inputs.color = (uUseVertexColor && aVertexColor.x >= 0.0) ? aVertexColor : uMaterialColor;\n#ifdef AUGMENTED_HOOK_getObjectInputs\n  inputs = HOOK_getObjectInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  inputs.position = (uModelMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uModelNormalMatrix * inputs.normal;\n  inputs = HOOK_getWorldInputs(inputs);\n#endif\n\n#ifdef AUGMENTED_HOOK_getWorldInputs\n  // Already multiplied by the model matrix, just apply view\n  inputs.position = (uViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uCameraNormalMatrix * inputs.normal;\n#else\n  // Apply both at once\n  inputs.position = (uModelViewMatrix * vec4(inputs.position, 1.)).xyz;\n  inputs.normal = uNormalMatrix * inputs.normal;\n#endif\n#ifdef AUGMENTED_HOOK_getCameraInputs\n  inputs = HOOK_getCameraInputs(inputs);\n#endif\n\n  // Pass varyings to fragment shader\n  vViewPosition = inputs.position;\n  vTexCoord = inputs.texCoord;\n  vNormal = inputs.normal;\n  vColor = inputs.color;\n\n  // TODO: this should be a uniform\n  vAmbientColor = vec3(0.0);\n  for (int i = 0; i < 5; i++) {\n    if (i < uAmbientLightCount) {\n      vAmbientColor += uAmbientColor[i];\n    }\n  }\n\n  gl_Position = uProjectionMatrix * vec4(inputs.position, 1.);\n  HOOK_afterVertex();\n}\n";
 
-var phongFrag = "// include lighting.glsl\nprecision highp int;\n\nuniform bool uHasSetAmbient;\nuniform vec4 uSpecularMatColor;\nuniform vec4 uAmbientMatColor;\nuniform vec4 uEmissiveMatColor;\n\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\n\nIN vec3 vNormal;\nIN vec2 vTexCoord;\nIN vec3 vViewPosition;\nIN vec3 vAmbientColor;\nIN vec4 vColor;\n\nstruct ColorComponents {\n  vec3 baseColor;\n  float opacity;\n  vec3 ambientColor;\n  vec3 specularColor;\n  vec3 diffuse;\n  vec3 ambient;\n  vec3 specular;\n  vec3 emissive;\n};\n\nstruct Inputs {\n  vec3 normal;\n  vec2 texCoord;\n  vec3 ambientLight;\n  vec3 ambientMaterial;\n  vec3 specularMaterial;\n  vec3 emissiveMaterial;\n  vec4 color;\n  float shininess;\n  float metalness;\n};\n\nvoid main(void) {\n  HOOK_beforeFragment();\n\n  Inputs inputs;\n  inputs.normal = normalize(vNormal);\n  inputs.texCoord = vTexCoord;\n  inputs.ambientLight = vAmbientColor;\n  inputs.color = isTexture\n      ? TEXTURE(uSampler, vTexCoord) * uTint/255.\n      : vColor;\n  if (isTexture && inputs.color.a > 0.0) {\n    // Textures come in with premultiplied alpha. Temporarily unpremultiply it\n    // so hooks users don't have to think about premultiplied alpha.\n    inputs.color.rgb /= inputs.color.a;\n  }\n  inputs.shininess = uShininess;\n  inputs.metalness = uMetallic;\n  inputs.ambientMaterial = uHasSetAmbient ? uAmbientMatColor.rgb : inputs.color.rgb;\n  inputs.specularMaterial = uSpecularMatColor.rgb;\n  inputs.emissiveMaterial = uEmissiveMatColor.rgb;\n  inputs = HOOK_getPixelInputs(inputs);\n\n  vec3 diffuse;\n  vec3 specular;\n  totalLight(vViewPosition, inputs.normal, inputs.shininess, inputs.metalness, diffuse, specular);\n\n  // Calculating final color as result of all lights (plus emissive term).\n\n  vec2 texCoord = inputs.texCoord;\n  vec4 baseColor = inputs.color;\n  ColorComponents c;\n  c.opacity = baseColor.a;\n  c.baseColor = baseColor.rgb;\n  c.ambientColor = inputs.ambientMaterial;\n  c.specularColor = inputs.specularMaterial;\n  c.diffuse = diffuse;\n  c.ambient = inputs.ambientLight;\n  c.specular = specular;\n  c.emissive = inputs.emissiveMaterial;\n  OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c));\n  OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering\n  HOOK_afterFragment();\n}\n";
+var phongFrag = "// include lighting.glsl\nprecision highp int;\n\nuniform bool uHasSetAmbient;\nuniform vec4 uSpecularMatColor;\nuniform vec4 uAmbientMatColor;\nuniform vec4 uEmissiveMatColor;\n\nuniform vec4 uTint;\nuniform sampler2D uSampler;\nuniform bool isTexture;\n\nIN vec3 vNormal;\nIN vec2 vTexCoord;\nIN vec3 vViewPosition;\nIN vec3 vAmbientColor;\nIN vec4 vColor;\n\nstruct ColorComponents {\n  vec3 baseColor;\n  float opacity;\n  vec3 ambientColor;\n  vec3 specularColor;\n  vec3 diffuse;\n  vec3 ambient;\n  vec3 specular;\n  vec3 emissive;\n};\n\nstruct Inputs {\n  vec3 normal;\n  vec2 texCoord;\n  vec3 ambientLight;\n  vec3 ambientMaterial;\n  vec3 specularMaterial;\n  vec3 emissiveMaterial;\n  vec4 color;\n  float shininess;\n  float metalness;\n};\n\nvoid main(void) {\n  HOOK_beforeFragment();\n\n  Inputs inputs;\n  inputs.normal = normalize(vNormal);\n  inputs.texCoord = vTexCoord;\n  inputs.ambientLight = vAmbientColor;\n  inputs.color = isTexture\n      ? TEXTURE(uSampler, vTexCoord) * (vec4(uTint.rgb/255., 1.) * uTint.a/255.)\n      : vColor;\n  if (isTexture && inputs.color.a > 0.0) {\n    // Textures come in with premultiplied alpha. Temporarily unpremultiply it\n    // so hooks users don't have to think about premultiplied alpha.\n    inputs.color.rgb /= inputs.color.a;\n  }\n  inputs.shininess = uShininess;\n  inputs.metalness = uMetallic;\n  inputs.ambientMaterial = uHasSetAmbient ? uAmbientMatColor.rgb : inputs.color.rgb;\n  inputs.specularMaterial = uSpecularMatColor.rgb;\n  inputs.emissiveMaterial = uEmissiveMatColor.rgb;\n  inputs = HOOK_getPixelInputs(inputs);\n\n  vec3 diffuse;\n  vec3 specular;\n  totalLight(vViewPosition, inputs.normal, inputs.shininess, inputs.metalness, diffuse, specular);\n\n  // Calculating final color as result of all lights (plus emissive term).\n\n  vec2 texCoord = inputs.texCoord;\n  vec4 baseColor = inputs.color;\n  ColorComponents c;\n  c.opacity = baseColor.a;\n  c.baseColor = baseColor.rgb;\n  c.ambientColor = inputs.ambientMaterial;\n  c.specularColor = inputs.specularMaterial;\n  c.diffuse = diffuse;\n  c.ambient = inputs.ambientLight;\n  c.specular = specular;\n  c.emissive = inputs.emissiveMaterial;\n  OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c));\n  OUT_COLOR.rgb *= OUT_COLOR.a; // Premultiply alpha before rendering\n  HOOK_afterFragment();\n}\n";
 
 var fontVert = "IN vec3 aPosition;\nIN vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nuniform vec4 uGlyphRect;\nuniform float uGlyphOffset;\n\nOUT vec2 vTexCoord;\nOUT float w;\n\nvoid main() {\n  vec4 positionVec4 = vec4(aPosition, 1.0);\n\n  // scale by the size of the glyph's rectangle\n  positionVec4.xy *= uGlyphRect.zw - uGlyphRect.xy;\n\n  // Expand glyph bounding boxes by 1px on each side to give a bit of room\n  // for antialiasing\n  vec3 newOrigin = (uModelViewMatrix * vec4(0., 0., 0., 1.)).xyz;\n  vec3 newDX = (uModelViewMatrix * vec4(1., 0., 0., 1.)).xyz;\n  vec3 newDY = (uModelViewMatrix * vec4(0., 1., 0., 1.)).xyz;\n  vec2 pixelScale = vec2(\n    1. / length(newOrigin - newDX),\n    1. / length(newOrigin - newDY)\n  );\n  vec2 offset = pixelScale * normalize(aTexCoord - vec2(0.5, 0.5));\n  vec2 textureOffset = offset * (1. / vec2(\n    uGlyphRect.z - uGlyphRect.x,\n    uGlyphRect.w - uGlyphRect.y\n  ));\n\n  // move to the corner of the glyph\n  positionVec4.xy += uGlyphRect.xy;\n\n  // move to the letter's line offset\n  positionVec4.x += uGlyphOffset;\n\n  positionVec4.xy += offset;\n  \n  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n  vTexCoord = aTexCoord + textureOffset;\n  w = gl_Position.w;\n}\n";
 
@@ -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`.
    *
@@ -65646,6 +65666,7 @@ function graphics(p5, fn){
   attributes(p5, p5.Graphics.prototype);
   curves(p5, p5.Graphics.prototype);
   vertex(p5, p5.Graphics.prototype);
+  customShapes(p5, p5.Graphics.prototype);
 
   setting(p5, p5.Graphics.prototype);
   loadingDisplaying(p5, p5.Graphics.prototype);
@@ -65841,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;
     }
 
@@ -66232,6 +66254,10 @@ class FramebufferTexture {
     return this.framebuffer.height * this.framebuffer.density;
   }
 
+  update() {
+    this.framebuffer._update(this.property);
+  }
+
   rawTexture() {
     return this.framebuffer[this.property];
   }
@@ -66244,6 +66270,8 @@ class Framebuffer {
 
     this._isClipApplied = false;
 
+    this.dirty = { colorTexture: false, depthTexture: false };
+
     this.pixels = [];
 
     this.format = settings.format || UNSIGNED_BYTE;
@@ -67283,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
    *
@@ -67304,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 };
     }
   }
 
@@ -67504,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);
@@ -67562,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) {
@@ -67728,6 +67781,7 @@ class Framebuffer {
       this.pixels
     );
     this.colorP5Texture.unbindTexture();
+    this.dirty.colorTexture = false;
 
     const prevFramebuffer = this.renderer.activeFramebuffer();
     if (this.antialias) {
@@ -70086,9 +70140,10 @@ function renderer2D(p5, fn){
  * 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 <a href="#/p5/preload">preload()</a>,
- * <a href="#/p5/setup">setup()</a>, and/or
- * <a href="#/p5/draw">draw()</a> properties on it for running a sketch.
+ * 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
@@ -70209,10 +70264,11 @@ let p5$2 = class p5 {
         bindGlobal(p);
       }
 
+      const protectedProperties = ['constructor', 'length'];
       // Attach its properties to the window
       for (const p in this) {
         if (this.hasOwnProperty(p)) {
-          if(p[0] === '_') continue;
+          if(p[0] === '_' || protectedProperties.includes(p)) continue;
           bindGlobal(p);
         }
       }
@@ -70534,9 +70590,15 @@ 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.
  *
  * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
@@ -70607,7 +70669,6 @@ for (const k in constants) {
  * </code>
  * </div>
  */
-
 /**
  * A function that's called repeatedly while the sketch runs.
  *
@@ -70835,6 +70896,11 @@ function describe(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * };
+   * 
    * function draw() {
    *   background(200);
    *
@@ -70856,6 +70922,11 @@ function describe(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   * createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   background(200);
    *
@@ -71628,6 +71699,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup(){
+   *  createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the text description.
    *   textOutput();
@@ -71648,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.
@@ -71762,6 +71843,11 @@ function outputs(p5, fn){
    *
    * <div>
    * <code>
+   * 
+   * function setup() {
+   *   createCanvas(100, 100);
+   * }
+   * 
    * function draw() {
    *   // Add the grid description.
    *   gridOutput();
@@ -71782,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.
@@ -71802,6 +71893,7 @@ function outputs(p5, fn){
    * </div>
    */
 
+
   fn.gridOutput = function(display) {
     // p5._validateParameters('gridOutput', arguments);
     //if gridOutput is already true
@@ -76716,7 +76808,7 @@ function fesCore(p5, fn){
         // actual name with correct capitalization doesnt exist in context,
         // and if the user-defined symbol is of the type function
         if (
-          fxns[lowercase] &&
+          fxns.hasOwnProperty(lowercase) &&
           !context[fxns[lowercase]] &&
           typeof context[prop] === 'function'
         ) {
@@ -82759,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?",
@@ -83257,7 +83349,7 @@ var p5$1 = {
 	createVector: {
 		overloads: [
 			[
-				null
+				"...Number[]"
 			]
 		]
 	},
@@ -86865,9 +86957,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
@@ -86901,14 +86998,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
@@ -87143,7 +87248,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 {
@@ -94766,7 +94871,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.
@@ -95007,10 +95112,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.');
    * }
@@ -95359,7 +95464,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.');
    * }
@@ -95385,7 +95490,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.');
    * }
@@ -95411,7 +95516,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.');
    * }
@@ -96290,7 +96395,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.
@@ -96544,18 +96649,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>
@@ -96577,18 +96682,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>
@@ -96611,18 +96716,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>
@@ -97784,6 +97889,15 @@ function keyboard(p5, fn){
    * </div>
    */
   fn._onkeyup = function(e) {
+
+    const context = this._isGlobal ? window : this;
+    if (typeof context.keyReleased === 'function') {
+      const executeDefault = context.keyReleased(e);
+      if (executeDefault === false) {
+        e.preventDefault();
+      }
+    }
+    
     delete this._downKeyCodes[e.code];
     delete this._downKeys[e.key];
 
@@ -97800,13 +97914,6 @@ function keyboard(p5, fn){
       this.key = lastPressedKey;
     }
 
-    const context = this._isGlobal ? window : this;
-    if (typeof context.keyReleased === 'function') {
-      const executeDefault = context.keyReleased(e);
-      if (executeDefault === false) {
-        e.preventDefault();
-      }
-    }
   };
 
   /**
@@ -97940,7 +98047,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;
     }
@@ -99020,25 +99127,25 @@ function pointer(p5, fn){
 
   fn._updatePointerCoords = function (e) {
     if (this._curElement !== null) {
-       const canvas = this._curElement.elt;
-       const sx = canvas.scrollWidth / this.width || 1;
-       const sy = canvas.scrollHeight / this.height || 1;
+      const canvas = this._curElement.elt;
+      const sx = canvas.scrollWidth / this.width || 1;
+      const sy = canvas.scrollHeight / this.height || 1;
 
-       if (e.pointerType == 'touch') {
+      if (e.pointerType == 'touch') {
           const touches = [];
           for (const touch of this._activePointers.values()) {
-             touches.push(getTouchInfo(canvas, sx, sy, touch));
+            touches.push(getTouchInfo(canvas, sx, sy, touch));
           }
           this.touches = touches;
-       } else {
-          const mousePos = getMouseInfo(canvas, sx, sy, e);
-          this.movedX = e.movementX || 0;
-          this.movedY = e.movementY || 0;
-          this.mouseX = mousePos.x;
-          this.mouseY = mousePos.y;
-          this.winMouseX = mousePos.winX;
-          this.winMouseY = mousePos.winY;
-       }
+      } 
+
+      const mousePos = getMouseInfo(canvas, sx, sy, e);
+      this.movedX = e.movementX || 0;
+      this.movedY = e.movementY || 0;
+      this.mouseX = mousePos.x;
+      this.mouseY = mousePos.y;
+      this.winMouseX = mousePos.winX;
+      this.winMouseY = mousePos.winY;
 
        if (!this._hasMouseInteracted) {
           this._updateMouseCoords();
@@ -101850,8 +101957,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
@@ -103993,7 +104100,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
@@ -106059,11 +106166,10 @@ function timeDate(p5, fn){
    *
    * If a sketch has a
    * <a href="#/p5/setup">setup()</a> function, then `millis()` begins tracking
-   * time before the code in <a href="#/p5/setup">setup()</a> runs. If a
-   * sketch includes a <a href="#/p5/preload">preload()</a> function, then
-   * `millis()` begins tracking time as soon as the code in
-   * <a href="#/p5/preload">preload()</a> starts running.
-   *
+   * time before the code in <a href="#/p5/setup">setup()</a> runs.  If a
+   * sketch includes asynchronous loading using `async`/`await`, then
+   * `millis()` begins tracking time as soon as the asynchronous code
+   * starts running.
    * @method millis
    * @return {Number} number of milliseconds since starting the sketch.
    *
@@ -109692,7 +109798,7 @@ function textCore(p5, fn) {
    *   createCanvas(300, 300);
    *   background(220);
    *
-   *   textSize(48);
+   *   textSize(35);
    *   textAlign(LEFT, BASELINE);
    *   textFont('Georgia');
    *
@@ -118657,7 +118763,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)) {
@@ -118668,7 +118773,6 @@ class Font {
     this.path = path;
     this.data = data;
     this.face = fontFace;
-    this.id = nextId++;
   }
 
   /**
@@ -120102,24 +120206,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) {
@@ -120887,7 +120974,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
@@ -120896,20 +120983,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;
+
+          // 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);
+          }
 
-          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);
+          // 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);