p5 2.2.1-rc.0 → 2.2.1

package/dist/strands/p5.strands.js

@@ -31,7 +31,11 @@ function strands(p5, fn) {
   //////////////////////////////////////////////
   // Global Runtime
   //////////////////////////////////////////////
-  function initStrandsContext(ctx, backend, { active = false, renderer = null, baseShader = null } = {}) {
+  function initStrandsContext(
+    ctx,
+    backend,
+    { active = false, renderer = null, baseShader = null } = {},
+  ) {
     ctx.dag = createDirectedAcyclicGraph();
     ctx.cfg = createControlFlowGraph();
     ctx.uniforms = [];
@@ -79,11 +83,8 @@ function strands(p5, fn) {
 
     const prev = {};
     for (const key of Object.getOwnPropertyNames(fn)) {
-      const descriptor = Object.getOwnPropertyDescriptor(
-        fn,
-        key
-      );
-      if (descriptor && !descriptor.get && typeof fn[key] === 'function') {
+      const descriptor = Object.getOwnPropertyDescriptor(fn, key);
+      if (descriptor && !descriptor.get && typeof fn[key] === "function") {
         prev[key] = window[key];
         window[key] = fn[key].bind(pInst);
       }
@@ -105,7 +106,10 @@ function strands(p5, fn) {
 
   p5.Shader.prototype.modify = function (shaderModifier, scope = {}) {
     try {
-      if (shaderModifier instanceof Function || typeof shaderModifier === 'string') {
+      if (
+        shaderModifier instanceof Function ||
+        typeof shaderModifier === "string"
+      ) {
         // Reset the context object every time modify is called;
         // const backend = glslBackend;
         initStrandsContext(strandsContext, this._renderer.strandsBackend, {
@@ -122,9 +126,10 @@ function strands(p5, fn) {
         if (options.parser) {
           // #7955 Wrap function declaration code in brackets so anonymous functions are not top level statements, which causes an error in acorn when parsing
           // https://github.com/acornjs/acorn/issues/1385
-          const sourceString = typeof shaderModifier === 'string'
-            ? `(${shaderModifier})`
-            : `(${shaderModifier.toString()})`;
+          const sourceString =
+            typeof shaderModifier === "string"
+              ? `(${shaderModifier})`
+              : `(${shaderModifier.toString()})`;
           strandsCallback = transpileStrandsToJS(
             p5,
             sourceString,
@@ -185,8 +190,6 @@ if (typeof p5 !== "undefined") {
  * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -212,8 +215,6 @@ if (typeof p5 !== "undefined") {
  *   fill('red');
  *   sphere(50);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -238,8 +239,6 @@ if (typeof p5 !== "undefined") {
  * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -268,6 +267,98 @@ if (typeof p5 !== "undefined") {
  *   fill('white');
  *   sphere(50);
  * }
+ */
+
+/**
+ * @method smoothstep
+ * @description
+ * A shader function that performs smooth Hermite interpolation between `0.0`
+ * and `1.0`.
+ *
+ * This function is equivalent to the GLSL built-in
+ * `smoothstep(edge0, edge1, x)` and is available inside p5.strands shader
+ * callbacks. It is commonly used to create soft transitions, smooth edges,
+ * fades, and anti-aliased effects.
+ *
+ * Smoothstep is useful when a threshold or cutoff is needed, but with a
+ * gradual transition instead of a hard edge.
+ *
+ * - Returns `0.0` when `x` is less than or equal to `edge0`
+ * - Returns `1.0` when `x` is greater than or equal to `edge1`
+ * - Smoothly interpolates between `0.0` and `1.0` when `x` is between them
+ *
+ * @param {Number} edge0
+ *        Lower edge of the transition
+ * @param {Number} edge1
+ *        Upper edge of the transition
+ * @param {Number} x
+ *        Input value to interpolate
+ *
+ * @returns {Number}
+ *          A value between `0.0` and `1.0`
+ *
+ * @example
+ * <div modernizr="webgl">
+ * <code>
+ * // Example 1: A soft vertical fade using smoothstep (no uniforms)
+ *
+ * let fadeShader;
+ *
+ * function fadeCallback() {
+ *   getColor((inputs) => {
+ *     // x goes from 0 → 1 across the canvas
+ *     let x = inputs.texCoord.x;
+ *
+ *     // smoothstep creates a soft transition instead of a hard edge
+ *     let t = smoothstep(0.25, 0.35, x);
+ *
+ *     // Use t directly as brightness
+ *     return [t, t, t, 1];
+ *   });
+ * }
+ *
+ * function setup() {
+ *   createCanvas(300, 200, WEBGL);
+ *   fadeShader = baseFilterShader().modify(fadeCallback);
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   filter(fadeShader);
+ * }
+ * </code>
+ * </div>
+ *
+ * @example
+ * <div modernizr="webgl">
+ * <code>
+ * // Example 2: Animate the smooth transition using a uniform
+ *
+ * let animatedShader;
+ *
+ * function animatedFadeCallback() {
+ *   const time = uniformFloat(() => millis() * 0.001);
+ *
+ *   getColor((inputs) => {
+ *     let x = inputs.texCoord.x;
+ *
+ *     // Move the smoothstep band back and forth over time
+ *     let center = 0.5 + 0.25 * sin(time);
+ *     let t = smoothstep(center - 0.05, center + 0.05, x);
+ *
+ *     return [t, t, t, 1];
+ *   });
+ * }
+ *
+ * function setup() {
+ *   createCanvas(300, 200, WEBGL);
+ *   animatedShader = baseFilterShader().modify(animatedFadeCallback);
+ * }
+ *
+ * function draw() {
+ *   background(0);
+ *   filter(animatedShader);
+ * }
  * </code>
  * </div>
  */
@@ -324,8 +415,6 @@ if (typeof p5 !== "undefined") {
  *        A callback function which is called before each fragment is processed.
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -341,6 +430,7 @@ if (typeof p5 !== "undefined") {
  *     });
  *   });
  * }
+ *
  * function draw() {
  *   background(220);
  *   shader(myShader);
@@ -348,8 +438,6 @@ if (typeof p5 !== "undefined") {
  *   fill('teal');
  *   box(100);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -382,8 +470,6 @@ if (typeof p5 !== "undefined") {
  * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -408,8 +494,6 @@ if (typeof p5 !== "undefined") {
  *   fill('purple');
  *   circle(0, 0, 100);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -428,8 +512,6 @@ if (typeof p5 !== "undefined") {
  *        A callback function which receives a boolean and should return a boolean.
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -437,14 +519,13 @@ if (typeof p5 !== "undefined") {
  *      'bool shouldDiscard': '(bool outside) { return outside; }'
  *   });
  * }
+ *
  * function draw() {
  *   background(255);
  *   strokeShader(myShader);
  *   strokeWeight(30);
  *   line(-width/3, 0, width/3, 0);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -464,8 +545,6 @@ if (typeof p5 !== "undefined") {
  * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -488,8 +567,6 @@ if (typeof p5 !== "undefined") {
  *   fill('green');
  *   circle(0, 0, 100);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -508,8 +585,6 @@ if (typeof p5 !== "undefined") {
  *        A callback function which is called after each fragment is processed.
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -525,6 +600,7 @@ if (typeof p5 !== "undefined") {
  *     });
  *   });
  * }
+ *
  * function draw() {
  *   background(240);
  *   shader(myShader);
@@ -532,8 +608,6 @@ if (typeof p5 !== "undefined") {
  *   fill('purple');
  *   sphere(60);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -553,8 +627,6 @@ if (typeof p5 !== "undefined") {
  * - <a href="#/p5/buildFilterShader">`buildFilterShader()`</a>
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -579,8 +651,6 @@ if (typeof p5 !== "undefined") {
  *   circle(0, 0, 150);
  *   filter(myShader);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -601,8 +671,6 @@ if (typeof p5 !== "undefined") {
  * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -625,8 +693,6 @@ if (typeof p5 !== "undefined") {
  *   fill('orange');
  *   sphere(50);
  * }
- * </code>
- * </div>
  */
 
 /**
@@ -647,8 +713,6 @@ if (typeof p5 !== "undefined") {
  * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
  *
  * @example
- * <div modernizr='webgl'>
- * <code>
  * let myShader;
  * function setup() {
  *   createCanvas(200, 200, WEBGL);
@@ -673,6 +737,144 @@ if (typeof p5 !== "undefined") {
  *   fill('red');
  *   sphere(50);
  * }
+ */
+
+/**
+ * Retrieves the current color of a given texture at given coordinates.
+ *
+ * The given coordinates should be between [0, 0] representing the top-left of
+ * the texture, and [1, 1] representing the bottom-right of the texture.
+ *
+ * The given texture could be, for example:
+ * * <a href="#/p5.Image">p5.Image</a>,
+ * * a <a href="#/p5.Graphics">p5.Graphics</a>, or
+ * * a <a href="#/p5.Framebuffer">p5.Framebuffer</a>.
+ *
+ * The retrieved color that is returned will behave like a vec4, with components
+ * for red, green, blue, and alpha, each between 0.0 and 1.0.
+ *
+ * Linear interpolation is used by default. For Framebuffer sources, you can
+ * prevent this by creating the buffer with:
+ * ```js
+ * createFramebuffer({
+ *     textureFiltering: NEAREST
+ *  })
+ * ```
+ * This can be useful if you are using your texture to store data other than color.
+ * See <a href="#/p5/createFramebuffer/">createFramebuffer</a>.
+ *
+ * Note: The `getTexture` function is only available when using p5.strands.
+ *
+ * @method getTexture
+ * @beta
+ *
+ * @param texture The texture to sample from.
+ * (e.g. a p5.Image, p5.Graphics, or p5.Framebuffer).
+ *
+ * @param coords The 2D coordinates to sample from.
+ * This should be between [0,0] (the top-left) and [1,1] (the bottom-right)
+ * of the texture.  It should be compatible with a vec2.
+ *
+ * @returns {*} The color of the given texture at the given coordinates.  This
+ * will behave as a vec4 holding components r, g, b, and a (alpha), with each component being in the range 0.0 to 1.0.
+ *
+ * @example
+ * <div modernizr='webgl'>
+ * <code>
+ * // A filter shader (using p5.strands) which will
+ * // sample and invert the color of each pixel
+ * // from the canvas.
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   let myShader = buildFilterShader(buildIt);
+ *
+ *   background("white");
+ *   fill("red");
+ *   circle(0, 0, 50);
+ *
+ *   filter(myShader); //Try commenting this out!
+ *
+ *   describe("A cyan circle on black background");
+ * }
+ *
+ * function buildIt() {
+ *   filterColor.begin();
+ *
+ *   //Sample the color of the pixel from the
+ *   //canvas at the same coordinate.
+ *   let c = getTexture(filterColor.canvasContent,
+ *                      filterColor.texCoord);
+ *
+ *   //Make a new color by inverting r, g, and b
+ *   let newColor = [1 - c.r, 1 - c.g, 1 - c.b, c.a];
+ *
+ *   //Finally, use it for this pixel!
+ *   filterColor.set(newColor);
+ *
+ *   filterColor.end();
+ * }
+ * </code>
+ *
+ *
+ * @example
+ * <div modernizr='webgl'>
+ * <code>
+ * // This primitive edge-detection filter samples
+ * // and compares the colors of the current pixel
+ * // on the canvas, and a little to the right.
+ * // It marks if they differ much.
+ * let myShader;
+ *
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   myShader = buildFilterShader(myShaderBuilder);
+ *   describe("A rough partial outline of a square rotating around a circle");
+ * }
+ *
+ * function draw() {
+ *   drawADesign();
+ *
+ *   filter(myShader); // try commenting this out
+ * }
+ *
+ * function myShaderBuilder() {
+ *   filterColor.begin();
+ *
+ *   //The position of the current pixel...
+ *   let coordHere = filterColor.texCoord;
+ *   //and some small amount to the right.
+ *   let coordRight = coordHere + [0.01, 0];
+ *
+ *   //The canvas content is a texture.
+ *   let cnvTex = filterColor.canvasContent;
+ *
+ *   //Sample the colors from it at our two positions
+ *   let colorHere = getTexture(cnvTex, coordHere);
+ *   let colorRight = getTexture(cnvTex, coordRight);
+ *
+ *   // Calculate a (very rough) color difference.
+ *   let difference = length(colorHere - colorRight);
+ *
+ *   //We'll use a black color by default...
+ *   let resultColor = [0, 0, 0, 1];
+ *   //or white if the samples were different.
+ *   if (difference > 0.3) {
+ *     resultColor = [1, 1, 1, 1];
+ *   }
+ *   filterColor.set(resultColor);
+ *
+ *   filterColor.end();
+ * }
+ *
+ * //Draw a few shapes, just to test the filter with
+ * function drawADesign() {
+ *   background(50);
+ *   noStroke();
+ *   lights();
+ *   sphere(20);
+ *   rotate(frameCount / 300);
+ *   square(0, 0, 30);
+ * }
  * </code>
  * </div>
  */

package/dist/type/index.js

@@ -1,16 +1,15 @@
 import textCore from './textCore.js';
 import font from './p5.Font.js';
-import '../p5.Renderer-QoFcvj3f.js';
-import '../creating_reading-CgHCHxqN.js';
+import '../p5.Renderer-D-5LdCRz.js';
+import '../creating_reading-ZXzcZEsb.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
-import '../constants-DEJVKr9Z.js';
+import '../constants-DQyACdzq.js';
 import '../image/filters.js';
 import '../math/p5.Vector.js';
 import '../shape/custom_shapes.js';
 import '../core/States.js';
 import '../io/utilities.js';
-import 'file-saver';
 import '@japont/unicode-range';
 import './unicodeRanges.js';
 import './lib/Typr.js';

package/dist/type/p5.Font.js

@@ -1,19 +1,18 @@
 import { textCoreConstants } from './textCore.js';
-import { v as CENTER, a9 as RIGHT, u as RADIUS } from '../constants-DEJVKr9Z.js';
+import { v as CENTER, a9 as RIGHT, u as RADIUS } from '../constants-DQyACdzq.js';
 import { UnicodeRange } from '@japont/unicode-range';
 import { unicodeRanges } from './unicodeRanges.js';
 import { Vector } from '../math/p5.Vector.js';
 import Typr from './lib/Typr.js';
 import { createFromCommands } from '@davepagurek/bezier-path';
-import '../p5.Renderer-QoFcvj3f.js';
-import '../creating_reading-CgHCHxqN.js';
+import '../p5.Renderer-D-5LdCRz.js';
+import '../creating_reading-ZXzcZEsb.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
 import '../image/filters.js';
 import '../shape/custom_shapes.js';
 import '../core/States.js';
 import '../io/utilities.js';
-import 'file-saver';
 import 'pako';
 
 /**
@@ -90,8 +89,6 @@ class Font {
    * @return {Array<Array>}          A flat array of path commands.
    *
    * @example
-   * <div>
-   * <code>
    * let font;
    *
    * async function setup() {
@@ -168,10 +165,7 @@ class Font {
    *   endContour();
    *   endShape();
    * }
-   * </code>
-   * </div>
    */
-
   textToPaths(str, x, y, width, height, options) {
 
     ({ width, height, options } = this._parseArgs(width, height, options));
@@ -224,8 +218,6 @@ class Font {
    * @return {Array<Object>} array of point objects, each with `x`, `y`, and `alpha` (path angle) properties.
    *
    * @example
-   * <div>
-   * <code>
    * let font;
    *
    * async function setup() {
@@ -245,8 +237,6 @@ class Font {
    *
    *   describe('A set of black dots outlining the text "p5*js" on a gray background.');
    * }
-   * </code>
-   * </div>
    */
   textToPoints(str, x, y, width, height, options) {
     // By segmenting per contour, pointAtLength becomes much faster
@@ -296,8 +286,6 @@ class Font {
    * @return {Array<Array<Object>>} array of point objects, each with `x`, `y`, and `alpha` (path angle) properties.
    *
    * @example
-   * <div>
-   * <code>
    * let font;
    *
    * async function setup() {
@@ -325,8 +313,6 @@ class Font {
    *
    *   describe('The text p5*js wobbling over time');
    * }
-   * </code>
-   * </div>
    */
   textToContours(str, x = 0, y = 0, width, height, options) {
     ({ width, height, options } = this._parseArgs(width, height, options));
@@ -377,8 +363,6 @@ class Font {
    * @return {p5.Geometry} A geometry object representing the 3D model of the text.
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * let font;
    * let geom;
    *
@@ -400,12 +384,8 @@ class Font {
    *   model(geom);
    *   describe('A red non-extruded "Hello" in Anton on white canvas, rotatable via mouse.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * let font;
    * let geom;
    *
@@ -434,12 +414,8 @@ class Font {
    *   model(geom);
    *   describe('3D red extruded "Hello" in Source Serif on white, rotatable via mouse.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * let geom;
    * let activeFont;
    * let artShader;
@@ -514,8 +490,6 @@ class Font {
    *   model(geom);
    *   describe('3D wavy with different color sets "Hello" in Anton on white canvas, rotatable via mouse.');
    * }
-   * </code>
-   * </div>
    */
   textToModel(str, x, y, width, height, options) {
     ({ width, height, options } = this._parseArgs(width, height, options));
@@ -1340,8 +1314,6 @@ function font(p5, fn) {
    *                                           object if the font fails to load.
    * @return {Promise<p5.Font>}                         <a href="#/p5.Font">p5.Font</a> object.
    * @example
-   * <div>
-   * <code>
    * let font;
    *
    * async function setup() {
@@ -1354,12 +1326,8 @@ function font(p5, fn) {
    *
    *   describe('The text "p5*js" written in pink on a white background.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *   loadFont('assets/inconsolata.otf', font => {
@@ -1371,12 +1339,8 @@ function font(p5, fn) {
    *     describe('The text "p5*js" written in pink on a white background.');
    *   });
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *   loadFont('assets/inconsolata.otf', success, failure);
@@ -1394,12 +1358,8 @@ function font(p5, fn) {
    * function failure(event) {
    *   console.error('Oops!', event);
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * async function setup() {
    *   createCanvas(100, 100);
    *   await loadFont('assets/inconsolata.otf');
@@ -1411,18 +1371,13 @@ function font(p5, fn) {
    *
    *   describe('The text "p5*js" written in pink on a white background.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * // Some other forms of loading fonts:
    * loadFont("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
    *
    * loadFont('@font-face { font-family: "Bricolage Grotesque", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; }');
-   * </code>
-   * </div>
    */
   /**
    * @method loadFont