p5 2.0.0-beta.6 → 2.0.0-beta.7

package/lib/p5.esm.js

@@ -1,4 +1,4 @@
-/*! p5.js v2.0.0-beta.6 April 8, 2025 */
+/*! p5.js v2.0.0-beta.7 April 10, 2025 */
 /**
  * @module Constants
  * @submodule Constants
@@ -12,7 +12,7 @@ const _PI = Math.PI;
  * @property {String} VERSION
  * @final
  */
-const VERSION = '2.0.0-beta.6';
+const VERSION = '2.0.0-beta.7';
 
 // GRAPHICS RENDERER
 /**
@@ -13396,7 +13396,7 @@ var HSBSpace = new ColorSpace({
   toBase,
 
   formats: {
-    default :{
+    default: {
       type: 'custom',
       serialize: (coords, alpha) => {
         const rgb = toBase(coords);
@@ -13489,8 +13489,14 @@ function toBase(hsb){
  */
 
 
-const map = (n, start1, stop1, start2, stop2) =>
-  ((n - start1) / (stop1 - start1) * (stop2 - start2) + start2);
+const map = (n, start1, stop1, start2, stop2, clamp) => {
+  let result = ((n - start1) / (stop1 - start1) * (stop2 - start2) + start2);
+  if (clamp) {
+    result = Math.max(result, Math.min(start2, stop2));
+    result = Math.min(result, Math.max(start2, stop2));
+  }
+  return result;
+};
 
 const serializationMap = {};
 
@@ -13522,7 +13528,7 @@ class Color {
     Color.#grayscaleMap[mode] = definition.fromGray;
   }
 
-  constructor(vals, colorMode, colorMaxes) {
+  constructor(vals, colorMode, colorMaxes, { clamp = false } = {}) {
     // This changes with the color object
     this.mode = colorMode || RGB;
 
@@ -13565,16 +13571,16 @@ class Color {
       if(colorMaxes){
         // NOTE: need to consider different number of arguments (eg. CMYK)
         if(vals.length === 4){
-          mappedVals = Color.mapColorRange(vals, this.mode, colorMaxes);
+          mappedVals = Color.mapColorRange(vals, this.mode, colorMaxes, clamp);
         }else if(vals.length === 3){
-          mappedVals = Color.mapColorRange([vals[0], vals[1], vals[2]], this.mode, colorMaxes);
+          mappedVals = Color.mapColorRange([vals[0], vals[1], vals[2]], this.mode, colorMaxes, clamp);
           mappedVals.push(1);
         }else if(vals.length === 2){
           // Grayscale with alpha
           if(Color.#grayscaleMap[this.mode]){
-            mappedVals = Color.#grayscaleMap[this.mode](vals[0], colorMaxes);
+            mappedVals = Color.#grayscaleMap[this.mode](vals[0], colorMaxes, clamp);
           }else {
-            mappedVals = Color.mapColorRange([vals[0], vals[0], vals[0]], this.mode, colorMaxes);
+            mappedVals = Color.mapColorRange([vals[0], vals[0], vals[0]], this.mode, colorMaxes, clamp);
           }
           const alphaMaxes = Array.isArray(colorMaxes[colorMaxes.length-1]) ?
             colorMaxes[colorMaxes.length-1] :
@@ -13585,15 +13591,16 @@ class Color {
               alphaMaxes[0],
               alphaMaxes[1],
               0,
-              1
+              1,
+              clamp
             )
           );
         }else if(vals.length === 1){
           // Grayscale only
           if(Color.#grayscaleMap[this.mode]){
-            mappedVals = Color.#grayscaleMap[this.mode](vals[0], colorMaxes);
+            mappedVals = Color.#grayscaleMap[this.mode](vals[0], colorMaxes, clamp);
           }else {
-            mappedVals = Color.mapColorRange([vals[0], vals[0], vals[0]], this.mode, colorMaxes);
+            mappedVals = Color.mapColorRange([vals[0], vals[0], vals[0]], this.mode, colorMaxes, clamp);
           }
           mappedVals.push(1);
         }else {
@@ -13616,7 +13623,7 @@ class Color {
   }
 
   // Convert from p5 color range to color.js color range
-  static mapColorRange(origin, mode, maxes){
+  static mapColorRange(origin, mode, maxes, clamp){
     const p5Maxes = maxes.map((max) => {
       if(!Array.isArray(max)){
         return [0, max];
@@ -13627,7 +13634,7 @@ class Color {
     const colorjsMaxes = Color.#colorjsMaxes[mode];
 
     return origin.map((channel, i) => {
-      const newval = map(channel, p5Maxes[i][0], p5Maxes[i][1], colorjsMaxes[i][0], colorjsMaxes[i][1]);
+      const newval = map(channel, p5Maxes[i][0], p5Maxes[i][1], colorjsMaxes[i][0], colorjsMaxes[i][1], clamp);
       return newval;
     });
   }
@@ -14139,7 +14146,7 @@ function color$1(p5, fn, lifecycles){
    */
   p5.Color = Color;
 
-  sRGB.fromGray = P3.fromGray = function(val, maxes){
+  sRGB.fromGray = P3.fromGray = function(val, maxes, clamp){
     // Use blue max
     const p5Maxes = maxes.map((max) => {
       if(!Array.isArray(max)){
@@ -14149,11 +14156,11 @@ function color$1(p5, fn, lifecycles){
       }
     });
 
-    const v = map(val, p5Maxes[2][0], p5Maxes[2][1], 0, 1);
+    const v = map(val, p5Maxes[2][0], p5Maxes[2][1], 0, 1, clamp);
     return [v, v, v];
   };
 
-  HSBSpace.fromGray = HSLSpace.fromGray = function(val, maxes){
+  HSBSpace.fromGray = HSLSpace.fromGray = function(val, maxes, clamp){
     // Use brightness max
     const p5Maxes = maxes.map((max) => {
       if(!Array.isArray(max)){
@@ -14163,11 +14170,11 @@ function color$1(p5, fn, lifecycles){
       }
     });
 
-    const v = map(val, p5Maxes[2][0], p5Maxes[2][1], 0, 100);
+    const v = map(val, p5Maxes[2][0], p5Maxes[2][1], 0, 100, clamp);
     return [0, 0, v];
   };
 
-  HWBSpace.fromGray = function(val, maxes){
+  HWBSpace.fromGray = function(val, maxes, clamp){
     // Use Whiteness and Blackness to create number line
     const p5Maxes = maxes.map((max) => {
       if(!Array.isArray(max)){
@@ -14197,7 +14204,7 @@ function color$1(p5, fn, lifecycles){
   LCHSpace.fromGray =
   OKLab.fromGray =
   OKLCHSpace.fromGray =
-  function(val, maxes){
+  function(val, maxes, clamp){
     // Use lightness max
     const p5Maxes = maxes.map((max) => {
       if(!Array.isArray(max)){
@@ -14207,7 +14214,7 @@ function color$1(p5, fn, lifecycles){
       }
     });
 
-    const v = map(val, p5Maxes[0][0], p5Maxes[0][1], 0, 100);
+    const v = map(val, p5Maxes[0][0], p5Maxes[0][1], 0, 100, clamp);
     return [v, 0, 0];
   };
 
@@ -14708,7 +14715,8 @@ function creatingReading(p5, fn){
     return new Color(
       arg,
       this._renderer.states.colorMode,
-      this._renderer.states.colorMaxes[this._renderer.states.colorMode]
+      this._renderer.states.colorMaxes[this._renderer.states.colorMode],
+      { clamp: true }
     );
   };
 
@@ -19116,9 +19124,9 @@ class Element {
     // For details, see https://github.com/processing/p5.js/issues/3087.
     const eventPrependedFxn = function (event) {
       this._pInst.mouseIsPressed = true;
-      this._pInst._activePointers.set(e.pointerId, e);
+      this._pInst._activePointers.set(event.pointerId, event);
       this._pInst._setMouseButton(event);
-      this._pInst._updatePointerCoords(e);
+      this._pInst._updatePointerCoords(event);
       // Pass along the return-value of the callback:
       return fxn.call(this, event);
     };
@@ -20802,6 +20810,8 @@ function blurARGB(canvas, radius) {
  */
 
 
+let fnRef;
+
 class Image {
   constructor(width, height) {
     this.width = width;
@@ -21723,7 +21733,7 @@ class Image {
    * @param  {Integer} dh
    */
   copy(...args) {
-    fn.copy.apply(this, args);
+    fnRef.copy.apply(this, args);
   }
 
   /**
@@ -22157,7 +22167,7 @@ class Image {
    */
   blend(...args) {
     // p5._validateParameters('p5.Image.blend', arguments);
-    fn.blend.apply(this, args);
+    fnRef.blend.apply(this, args);
     this.setModified(true);
   }
 
@@ -22243,9 +22253,9 @@ class Image {
    */
   save(filename, extension) {
     if (this.gifProperties) {
-      fn.encodeAndDownloadGif(this, filename);
+      fnRef.encodeAndDownloadGif(this, filename);
     } else {
-      fn.saveCanvas(this.canvas, filename, extension);
+      fnRef.saveCanvas(this.canvas, filename, extension);
     }
   }
 
@@ -22603,6 +22613,8 @@ class Image {
   }
 }
 function image$2(p5, fn){
+  fnRef = fn;
+
   /**
    * A class to describe an image.
    *
@@ -22865,7 +22877,7 @@ function image$2(p5, fn){
 }
 
 if(typeof p5 !== 'undefined'){
-  image$2(p5);
+  image$2(p5, p5.prototype);
 }
 
 /**
@@ -25326,6 +25338,7 @@ function renderer(p5, fn){
    * @param {HTMLElement} elt DOM node that is wrapped
    * @param {p5} [pInst] pointer to p5 instance
    * @param {Boolean} [isMainCanvas] whether we're using it as main canvas
+   * @private
    */
   p5.Renderer = Renderer;
 }
@@ -48277,31 +48290,29 @@ class Camera {
    *
    *   // Move the camera along its "local" axes
    *   // when the user presses certain keys.
-   *   if (keyIsPressed === true) {
    *
-   *     // Move horizontally.
-   *     if (keyCode === LEFT_ARROW) {
-   *       cam.move(-1, 0, 0);
-   *     }
-   *     if (keyCode === RIGHT_ARROW) {
-   *       cam.move(1, 0, 0);
-   *     }
+   *   // Move horizontally.
+   *   if (keyIsDown(LEFT_ARROW)) {
+   *     cam.move(-1, 0, 0);
+   *   }
+   *   if (keyIsDown(RIGHT_ARROW)) {
+   *     cam.move(1, 0, 0);
+   *   }
    *
-   *     // Move vertically.
-   *     if (keyCode === UP_ARROW) {
-   *       cam.move(0, -1, 0);
-   *     }
-   *     if (keyCode === DOWN_ARROW) {
-   *       cam.move(0, 1, 0);
-   *     }
+   *   // Move vertically.
+   *   if (keyIsDown(UP_ARROW)) {
+   *     cam.move(0, -1, 0);
+   *   }
+   *   if (keyIsDown(DOWN_ARROW)) {
+   *     cam.move(0, 1, 0);
+   *   }
    *
-   *     // Move in/out of the screen.
-   *     if (key === 'i') {
-   *       cam.move(0, 0, -1);
-   *     }
-   *     if (key === 'o') {
-   *       cam.move(0, 0, 1);
-   *     }
+   *   // Move in/out of the screen.
+   *   if (keyIsDown('i')) {
+   *     cam.move(0, 0, -1);
+   *   }
+   *   if (keyIsDown('o')) {
+   *     cam.move(0, 0, 1);
    *   }
    *
    *   // Draw the box.
@@ -50665,7 +50676,7 @@ class Shader {
    * <a href="#/p5.Graphics">p5.Graphics</a>, as in
    * `myShader.copyToContext(pg)`. The shader can also be copied from a
    * <a href="#/p5.Graphics">p5.Graphics</a> object to the main canvas using
-   * the `window` variable, as in `myShader.copyToContext(window)`.
+   * the `p5.instance` variable, as in `myShader.copyToContext(p5.instance)`.
    *
    * Note: A <a href="#/p5.Shader">p5.Shader</a> object created with
    * <a href="#/p5/createShader">createShader()</a>,
@@ -50806,7 +50817,7 @@ class Shader {
    *   pg.shader(original);
    *
    *   // Copy the original shader to the main canvas.
-   *   copied = original.copyToContext(window);
+   *   copied = original.copyToContext(p5.instance);
    *
    *   // Apply the copied shader to the main canvas.
    *   shader(copied);
@@ -50982,7 +50993,12 @@ class Shader {
 
     for (const uniform of this.samplers) {
       let tex = uniform.texture;
-      if (tex === undefined) {
+      if (
+        tex === undefined ||
+        (
+          false
+        )
+      ) {
         // user hasn't yet supplied a texture for this slot.
         // (or there may not be one--maybe just lighting),
         // so we supply a default texture instead.
@@ -58892,7 +58908,7 @@ function light(p5, fn){
    *   // Load an image and create a p5.Image object.
    *   img = await loadImage('assets/outdoor_spheremap.jpg');
    *
-   *   createCanvas(100 ,100 ,WEBGL);
+   *   createCanvas(100, 100, WEBGL);
    *
    *   describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
    * }
@@ -65241,8 +65257,6 @@ class Texture {
    * Initializes common texture parameters, creates a gl texture,
    * tries to upload the texture for the first time if data is
    * already available.
-   * @private
-   * @method init
    */
   init (data) {
     const gl = this._renderer.GL;
@@ -65297,7 +65311,6 @@ class Texture {
    * easy to do so) and reuploads the texture if necessary. If it's not
    * possible or to expensive to do a calculation to determine wheter or
    * not the data has occurred, this method simply re-uploads the texture.
-   * @method update
    */
   update () {
     const data = this.src;
@@ -65396,7 +65409,6 @@ class Texture {
 
   /**
    * Binds the texture to the appropriate GL target.
-   * @method bindTexture
    */
   bindTexture () {
     // bind texture using gl context + glTarget and
@@ -65409,7 +65421,6 @@ class Texture {
 
   /**
    * Unbinds the texture from the appropriate GL target.
-   * @method unbindTexture
    */
   unbindTexture () {
     // unbind per above, disable texturing on glTarget
@@ -65429,7 +65440,6 @@ class Texture {
    * Sets how a texture is be interpolated when upscaled or downscaled.
    * Nearest filtering uses nearest neighbor scaling when interpolating
    * Linear filtering uses WebGL's linear scaling when interpolating
-   * @method setInterpolation
    * @param {String} downScale Specifies the texture filtering when
    *                           textures are shrunk. Options are LINEAR or NEAREST
    * @param {String} upScale Specifies the texture filtering when
@@ -65462,7 +65472,6 @@ class Texture {
    * when their uv's go outside of the 0 - 1 range. There are three options:
    * CLAMP, REPEAT, and MIRROR. REPEAT & MIRROR are only available if the texture
    * is a power of two size (128, 256, 512, 1024, etc.).
-   * @method setWrapMode
    * @param {String} wrapX Controls the horizontal texture wrapping behavior
    * @param {String} wrapY Controls the vertical texture wrapping behavior
    */
@@ -71558,7 +71567,7 @@ function outputs(p5, fn){
 
   //gets position of shape in the canvas
   fn._getPos = function (x, y) {
-    const { x: transformedX, y: transformedY } = this.worldToScreen(new this.Vector(x, y));
+    const { x: transformedX, y: transformedY } = this.worldToScreen(new p5.Vector(x, y));
     const canvasWidth = this.width;
     const canvasHeight = this.height;
     if (transformedX < 0.4 * canvasWidth) {
@@ -71675,7 +71684,7 @@ function outputs(p5, fn){
     ];
     //  Apply the inverse of the current transformations to the canvas corners
     const currentTransform = this._renderer.isP3D ?
-      new DOMMatrix(this._renderer.states.uMVMatrix.mat4) :
+      new DOMMatrix(this._renderer.uMVMatrix.mat4) :
       this.drawingContext.getTransform();
     const invertedTransform = currentTransform.inverse();
     const tc = canvasCorners.map(
@@ -81672,12 +81681,6 @@ var p5$1 = {
 			]
 		]
 	},
-	calculateOffset: {
-		overloads: [
-			[
-			]
-		]
-	},
 	createCanvas: {
 		overloads: [
 			[
@@ -84436,40 +84439,6 @@ var p5$1 = {
 			]
 		]
 	},
-	update: {
-		overloads: [
-			[
-			]
-		]
-	},
-	bindTexture: {
-		overloads: [
-			[
-			]
-		]
-	},
-	unbindTexture: {
-		overloads: [
-			[
-			]
-		]
-	},
-	setInterpolation: {
-		overloads: [
-			[
-				"String",
-				"String"
-			]
-		]
-	},
-	setWrapMode: {
-		overloads: [
-			[
-				"String",
-				"String"
-			]
-		]
-	},
 	remove: {
 		overloads: [
 			[
@@ -84624,14 +84593,6 @@ var dataDoc = {
 			]
 		]
 	}
-},
-	"p5.Renderer": {
-	resize: {
-		overloads: [
-			[
-			]
-		]
-	}
 },
 	"p5.Element": {
 	remove: {
@@ -95956,7 +95917,7 @@ function dom$1(p5, fn){
       inst.push();
       if (value) {
         if (value.mode) {
-          inst.colorMode(value.mode, ...value?.maxes[value.mode]);
+          inst.colorMode(value.mode, ...(value?.maxes ? value.maxes[value.mode] || [] : []));
         }
       }
       const c = inst.color(this.elt.value);