Merge branch 'dev-2.0' into docs-smoothstep-strands

Author: perminder-17

package-lock.json

@@ -19,7 +19,7 @@
     "test/**/*.js": "eslint",
     "utils/**/*.{js,mjs}": "eslint"
   },
-  "version": "2.2.0",
+  "version": "2.2.1-rc.0",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.2",
     "@japont/unicode-range": "^1.0.0",

package.json

@@ -364,26 +364,45 @@ class Color {
    * </code>
    * </div>
    */
-  toString(format) {
-    if (format === undefined && this._defaultStringValue !== undefined) {
+ toString(format) {
+   if (format === undefined && this._defaultStringValue !== undefined) {
       return this._defaultStringValue;
+   }
+   
+    let outputFormat = format;
+    if (format === '#rrggbb') {
+      outputFormat = 'hex';
     }
 
     const key = `${this._color.space.id}-${this._color.coords.join(',')}-${this._color.alpha}-${format}`;
     let colorString = serializationMap.get(key);
 
-    if(!colorString){
+    if (!colorString) {
       colorString = serialize(this._color, {
-        format
+        format: outputFormat
       });
+      
+      if (format === '#rrggbb') {
+        colorString = String(colorString);
+        if (colorString.length === 4) { 
+            const r = colorString[1];
+            const g = colorString[2];
+            const b = colorString[3];
+            colorString = `#${r}${r}${g}${g}${b}${b}`;
+        }
+        if (colorString.length > 7) {
+            colorString = colorString.slice(0, 7);
+        }
+        colorString = colorString.toLowerCase();
+      }
+
       if (serializationMap.size > 1000) {
         serializationMap.delete(serializationMap.keys().next().value)
       }
       serializationMap.set(key, colorString);
     }
     return colorString;
   }
-
   /**
    * Checks the contrast between two colors. This method returns a boolean
    * value to indicate if the two color has enough contrast. `true` means that

src/color/p5.Color.js

@@ -66,7 +66,7 @@ class MediaElement extends Element {
         source.src = newValue;
         elt.appendChild(source);
         self.elt.src = newValue;
-        self.modified = true;
+        self._modified = true;
       }
     });
 

src/dom/p5.MediaElement.js

@@ -21,6 +21,86 @@ import * as FES from './strands_FES'
 import { getNodeDataFromID } from './ir_dag'
 import { StrandsNode, createStrandsNode } from './strands_node'
 
+const BUILTIN_GLOBAL_SPECS = {
+  width: { typeInfo: DataType.float1, get: (p) => p.width },
+  height: { typeInfo: DataType.float1, get: (p) => p.height },
+  mouseX: { typeInfo: DataType.float1, get: (p) => p.mouseX },
+  mouseY: { typeInfo: DataType.float1, get: (p) => p.mouseY },
+  pmouseX: { typeInfo: DataType.float1, get: (p) => p.pmouseX },
+  pmouseY: { typeInfo: DataType.float1, get: (p) => p.pmouseY },
+  winMouseX: { typeInfo: DataType.float1, get: (p) => p.winMouseX },
+  winMouseY: { typeInfo: DataType.float1, get: (p) => p.winMouseY },
+  pwinMouseX: { typeInfo: DataType.float1, get: (p) => p.pwinMouseX },
+  pwinMouseY: { typeInfo: DataType.float1, get: (p) => p.pwinMouseY },
+  frameCount: { typeInfo: DataType.float1, get: (p) => p.frameCount },
+  deltaTime: { typeInfo: DataType.float1, get: (p) => p.deltaTime },
+  displayWidth: { typeInfo: DataType.float1, get: (p) => p.displayWidth },
+  displayHeight: { typeInfo: DataType.float1, get: (p) => p.displayHeight },
+  windowWidth: { typeInfo: DataType.float1, get: (p) => p.windowWidth },
+  windowHeight: { typeInfo: DataType.float1, get: (p) => p.windowHeight },
+  mouseIsPressed: { typeInfo: DataType.bool1, get: (p) => p.mouseIsPressed },
+}
+
+function _getBuiltinGlobalsCache(strandsContext) {
+  if (!strandsContext._builtinGlobals || strandsContext._builtinGlobals.dag !== strandsContext.dag) {
+    strandsContext._builtinGlobals = {
+      dag: strandsContext.dag,
+      nodes: new Map(),
+      uniformsAdded: new Set(),
+    }
+  }
+  // return the cache
+  return strandsContext._builtinGlobals
+}
+
+function getBuiltinGlobalNode(strandsContext, name) {
+  const spec = BUILTIN_GLOBAL_SPECS[name]
+  if (!spec) return null
+  
+  const cache = _getBuiltinGlobalsCache(strandsContext)
+  const uniformName = `_p5_global_${name}`
+  const cached = cache.nodes.get(uniformName)
+  if (cached) return cached
+
+  if (!cache.uniformsAdded.has(uniformName)) {
+    cache.uniformsAdded.add(uniformName)
+    strandsContext.uniforms.push({
+      name: uniformName,
+      typeInfo: spec.typeInfo,
+      defaultValue: () => {
+        const p5Instance = strandsContext.renderer?._pInst || strandsContext.p5?.instance
+        return p5Instance ? spec.get(p5Instance) : undefined
+      },
+    })
+  }
+
+  const { id, dimension } = build.variableNode(strandsContext, spec.typeInfo, uniformName)
+  const node = createStrandsNode(id, dimension, strandsContext)
+  node._originalBuiltinName = name
+  cache.nodes.set(uniformName, node)
+  return node
+}
+
+function installBuiltinGlobalAccessors(strandsContext) {
+  if (strandsContext._builtinGlobalsAccessorsInstalled) return
+
+  const getRuntimeP5Instance = () => strandsContext.renderer?._pInst || strandsContext.p5?.instance
+
+  for (const name of Object.keys(BUILTIN_GLOBAL_SPECS)) {
+    const spec = BUILTIN_GLOBAL_SPECS[name]
+    Object.defineProperty(window, name, {
+      get: () => {
+        if (strandsContext.active) {
+          return getBuiltinGlobalNode(strandsContext, name);
+        }
+        const inst = getRuntimeP5Instance()
+          return spec.get(inst);
+      },
+    })
+  }
+  strandsContext._builtinGlobalsAccessorsInstalled = true
+}
+
 //////////////////////////////////////////////
 // User nodes
 //////////////////////////////////////////////
@@ -419,6 +499,8 @@ function enforceReturnTypeMatch(strandsContext, expectedType, returned, hookName
   return returnedNodeID;
 }
 export function createShaderHooksFunctions(strandsContext, fn, shader) {
+  installBuiltinGlobalAccessors(strandsContext)
+
   // Add shader context to hooks before spreading
   const vertexHooksWithContext = Object.fromEntries(
     Object.entries(shader.hooks.vertex).map(([name, hook]) => [name, { ...hook, shaderContext: 'vertex' }])

src/strands/strands_api.js

@@ -62,6 +62,7 @@ class Framebuffer {
     this.renderer.framebuffers.add(this);
 
     this._isClipApplied = false;
+    this._useCanvasFormat = settings._useCanvasFormat || false;
 
     this.dirty = { colorTexture: false, depthTexture: false };
 

src/webgl/p5.Framebuffer.js

@@ -225,6 +225,9 @@ class Texture {
         data.setModified && data.setModified(true);
       }
     } else if (this.isSrcP5Image) {
+      if (data.gifProperties) {
+        data._animateGif(this._renderer._pInst);
+      }
       // for an image, we only update if the modified field has been set,
       // for example, by a call to p5.Image.set
       if (data.isModified()) {

src/webgl/p5.Texture.js

@@ -281,17 +281,14 @@ export function setWebGLUniformValue(shader, uniform, data, getTexture, gl) {
               "You're trying to use a number as the data for a texture." +
               "Please use a texture.",
           );
-          return this;
+          return;
         }
         gl.activeTexture(data);
         gl.uniform1i(location, data);
       } else {
         gl.activeTexture(gl.TEXTURE0 + uniform.samplerIndex);
         uniform.texture = data instanceof Texture ? data : getTexture(data);
         gl.uniform1i(location, uniform.samplerIndex);
-        if (uniform.texture.src.gifProperties) {
-          uniform.texture.src._animateGif(this._pInst);
-        }
       }
       break;
     case gl.SAMPLER_CUBE: