p5 2.0.0 → 2.0.2

package/lib/p5.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.0.0 April 17, 2025 */
+/*! p5.js v2.0.2 May 14, 2025 */
 var p5 = (function () {
   'use strict';
 
@@ -15,17 +15,33 @@ var p5 = (function () {
    * @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';
 
   /**
@@ -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>
@@ -52870,7 +52891,7 @@ var p5 = (function () {
 
   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";
 
@@ -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`.
      *
@@ -65649,6 +65669,7 @@ var p5 = (function () {
     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);
@@ -65844,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;
       }
 
@@ -66235,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];
     }
@@ -66247,6 +66273,8 @@ var p5 = (function () {
 
       this._isClipApplied = false;
 
+      this.dirty = { colorTexture: false, depthTexture: false };
+
       this.pixels = [];
 
       this.format = settings.format || UNSIGNED_BYTE;
@@ -67286,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
      *
@@ -67307,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 };
       }
     }
 
@@ -67507,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);
@@ -67565,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) {
@@ -67731,6 +67784,7 @@ var p5 = (function () {
         this.pixels
       );
       this.colorP5Texture.unbindTexture();
+      this.dirty.colorTexture = false;
 
       const prevFramebuffer = this.renderer.activeFramebuffer();
       if (this.antialias) {
@@ -70089,9 +70143,10 @@ var p5 = (function () {
    * 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
@@ -70212,10 +70267,11 @@ var p5 = (function () {
           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);
           }
         }
@@ -70537,9 +70593,15 @@ 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.
    *
    * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
@@ -70610,7 +70672,6 @@ var p5 = (function () {
    * </code>
    * </div>
    */
-
   /**
    * A function that's called repeatedly while the sketch runs.
    *
@@ -70838,6 +70899,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     *  createCanvas(100, 100);
+     * };
+     * 
      * function draw() {
      *   background(200);
      *
@@ -70859,6 +70925,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     * createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   background(200);
      *
@@ -71631,6 +71702,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     *  createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   // Add the text description.
      *   textOutput();
@@ -71651,6 +71727,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     *  createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   // Add the text description and
      *   // display it for debugging.
@@ -71765,6 +71846,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup() {
+     *   createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   // Add the grid description.
      *   gridOutput();
@@ -71785,6 +71871,11 @@ var p5 = (function () {
      *
      * <div>
      * <code>
+     * 
+     * function setup(){
+     *  createCanvas(100, 100);
+     * }
+     * 
      * function draw() {
      *   // Add the grid description and
      *   // display it for debugging.
@@ -71805,6 +71896,7 @@ var p5 = (function () {
      * </div>
      */
 
+
     fn.gridOutput = function(display) {
       // p5._validateParameters('gridOutput', arguments);
       //if gridOutput is already true
@@ -76719,7 +76811,7 @@ var p5 = (function () {
           // 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'
           ) {
@@ -82762,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?",
@@ -83260,7 +83352,7 @@ var p5 = (function () {
   	createVector: {
   		overloads: [
   			[
-  				null
+  				"...Number[]"
   			]
   		]
   	},
@@ -86868,9 +86960,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
@@ -86904,14 +87001,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
@@ -87146,7 +87251,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 {
@@ -94769,7 +94874,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.
@@ -95010,10 +95115,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.');
      * }
@@ -95362,7 +95467,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.');
      * }
@@ -95388,7 +95493,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.');
      * }
@@ -95414,7 +95519,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.');
      * }
@@ -96293,7 +96398,7 @@ var p5 = (function () {
      * let img;
      *
      * function setup() {
-     *   createCanvas(100, 100);
+     *   createCanvas(200, 200);
      *
      *   // Create a file input and place it beneath
      *   // the canvas.
@@ -96547,18 +96652,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>
@@ -96580,18 +96685,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>
@@ -96614,18 +96719,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>
@@ -97787,6 +97892,15 @@ var p5 = (function () {
      * </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];
 
@@ -97803,13 +97917,6 @@ var p5 = (function () {
         this.key = lastPressedKey;
       }
 
-      const context = this._isGlobal ? window : this;
-      if (typeof context.keyReleased === 'function') {
-        const executeDefault = context.keyReleased(e);
-        if (executeDefault === false) {
-          e.preventDefault();
-        }
-      }
     };
 
     /**
@@ -97943,7 +98050,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;
       }
@@ -99023,25 +99130,25 @@ var p5 = (function () {
 
     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();
@@ -101853,8 +101960,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
@@ -103996,7 +104103,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
@@ -106062,11 +106169,10 @@ var p5 = (function () {
      *
      * 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.
      *
@@ -109695,7 +109801,7 @@ var p5 = (function () {
      *   createCanvas(300, 300);
      *   background(220);
      *
-     *   textSize(48);
+     *   textSize(35);
      *   textAlign(LEFT, BASELINE);
      *   textFont('Georgia');
      *
@@ -118660,7 +118766,6 @@ var p5 = (function () {
   const fontFaceVariations = ['weight', 'stretch', 'style'];
 
 
-  let nextId = 0;
   class Font {
     constructor(p, fontFace, name, path, data) {
       if (!(fontFace instanceof FontFace)) {
@@ -118671,7 +118776,6 @@ var p5 = (function () {
       this.path = path;
       this.data = data;
       this.face = fontFace;
-      this.id = nextId++;
     }
 
     /**
@@ -120105,24 +120209,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) {
@@ -120890,7 +120977,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
@@ -120899,20 +120986,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;
+
+            // 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);