implemented array api

+ fix code hashing for special chars
+ add bpm

README.md

@@ -123,8 +123,8 @@ Here's a feature list anyway (based on [Hydra Functions](https://hydra.ojack.xyz
 
 ### Array
 
-- [ ] fast
-- [ ] smooth
-- [ ] ease
-- [ ] offset
-- [ ] fit
+- [x] fast
+- [x] smooth
+- [x] ease
+- [x] offset
+- [x] fit

index.html

@@ -335,7 +335,14 @@
           return `vec4 ${name} = src(${glslArgs(vars[0])},${tex});`;
         },
       });
-      let src = register("src", (tex = o0) => _src(st, tex));
+      let src = register("src", (tex = o0) => {
+        if (typeof tex !== "number") {
+          // this is to avoid error when doing src(s0) atm
+          console.warn("src expects a number.. falling back to 0");
+          tex = 0;
+        }
+        return _src(st, tex);
+      });
       // this allows using o0..o3 (=number) as texture inputs
       let vec4 = (input) => (typeof input === "number" ? src(input) : input);
 
@@ -782,6 +789,7 @@
       // read base64 code from url
       let urlCode = window.location.hash.slice(1);
       let parseCode = (hash) => decodeURIComponent(atob(hash));
+      let hashCode = (code) => btoa(encodeURIComponent(code));
       if (urlCode) {
         urlCode = parseCode(urlCode);
         console.log("loaded code from url!");
@@ -810,6 +818,7 @@
       let speed = 1;
       let width = canvas.width;
       let height = canvas.height;
+      let bpm = 30;
       // stub definition for audio object
       let a = {
         fft: [0, 0, 0, 0],
@@ -823,34 +832,84 @@
       // Array functions
       function enhanceArray(method, fn) {
         Object.defineProperty(Array.prototype, method, {
-          value: function () {
-            return fn(this);
+          value: function (...args) {
+            return fn(this, ...args);
           },
           enumerable: false,
           writable: false,
           configurable: false,
         });
       }
-      enhanceArray("fast", (arr) => {
-        console.warn("TODO: implement Array.prototype.fast");
+      enhanceArray("fast", (arr, speed = 1) => {
+        arr._speed = speed;
         return arr;
       });
-      enhanceArray("smooth", (arr) => {
-        console.warn("TODO: implement Array.prototype.smooth");
+      enhanceArray("offset", (arr, offset = 0.5) => {
+        arr._offset = offset % 1;
         return arr;
       });
-      enhanceArray("ease", (arr) => {
-        console.warn("TODO: implement Array.prototype.ease");
-        return arr;
+      let remap = (num, in_min, in_max, out_min, out_max) => {
+        return (
+          ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+        );
+      };
+      enhanceArray("fit", (arr, low = 0, high = 1) => {
+        let lowest = Math.min(...arr);
+        let highest = Math.max(...arr);
+        var newArr = arr.map((num) => remap(num, lowest, highest, low, high));
+        newArr._speed = arr._speed;
+        newArr._smooth = arr._smooth;
+        newArr._ease = arr._ease;
+        return newArr;
       });
-      enhanceArray("offset", (arr) => {
-        console.warn("TODO: implement Array.prototype.offset");
+      enhanceArray("smooth", (arr, smooth = 1) => {
+        arr._smooth = smooth;
         return arr;
       });
-      enhanceArray("fit", (arr) => {
-        console.warn("TODO: implement Array.prototype.fit");
+      // from https://gist.github.com/gre/1650294
+      let easing = {
+        // no easing, no acceleration
+        linear: (t) => t,
+        // accelerating from zero velocity
+        easeInQuad: (t) => t * t,
+        // decelerating to zero velocity
+        easeOutQuad: (t) => t * (2 - t),
+        // acceleration until halfway, then deceleration
+        easeInOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+        // accelerating from zero velocity
+        easeInCubic: (t) => t * t * t,
+        // decelerating to zero velocity
+        easeOutCubic: (t) => --t * t * t + 1,
+        // acceleration until halfway, then deceleration
+        easeInOutCubic: (t) =>
+          t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+        // accelerating from zero velocity
+        easeInQuart: (t) => t * t * t * t,
+        // decelerating to zero velocity
+        easeOutQuart: (t) => 1 - --t * t * t * t,
+        // acceleration until halfway, then deceleration
+        easeInOutQuart: (t) =>
+          t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+        // accelerating from zero velocity
+        easeInQuint: (t) => t * t * t * t * t,
+        // decelerating to zero velocity
+        easeOutQuint: (t) => 1 + --t * t * t * t * t,
+        // acceleration until halfway, then deceleration
+        easeInOutQuint: (t) =>
+          t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,
+        // sin shape
+        sin: (t) => 1 + Math.sin(Math.PI * t - Math.PI / 2),
+      };
+      enhanceArray("ease", (arr, ease = "linear") => {
+        arr._smooth = 1;
+        if (typeof ease == "function") {
+          arr._ease = ease;
+        } else if (easing[ease]) {
+          arr._ease = easing[ease];
+        }
         return arr;
       });
+
       // synth settings (stub definitions)
       let update = () => console.warn("update function not implemented");
       let setResolution = () =>
@@ -885,7 +944,7 @@
           console.log("shuffle:", example.sketch_id);
           const code = parseCode(example.code);
           input.value = code;
-          window.location.hash = "#" + btoa(code);
+          window.location.hash = "#" + hashCode(code);
           evaluate(code);
         };
 
@@ -1464,7 +1523,7 @@
         input.addEventListener("keydown", (e) => {
           if ((e.ctrlKey || e.altKey) && e.key === "Enter") {
             evaluate(input.value);
-            window.location.hash = "#" + btoa(input.value);
+            window.location.hash = "#" + hashCode(input.value);
           }
         });
       }
@@ -1512,9 +1571,23 @@
             if (uniform.type === "tex") {
               gl.uniform1i(loc, uniform.id);
             } else if (uniform.type === "sequence") {
-              const speed = 2;
-              const index = Math.floor((time * speed) % uniform.value.length);
-              gl.uniform1f(loc, uniform.value[index]);
+              const arr = uniform.value;
+              const speed = arr._speed ?? 1;
+              const smooth = arr._smooth ?? 0;
+              const offset = arr._offset || 0;
+              let value;
+              let index = time * speed * (bpm / 60) + offset;
+              if (smooth !== 0) {
+                let ease = arr._ease ? arr._ease : easing["linear"];
+                let _index = index - smooth / 2;
+                let currValue = arr[Math.floor(_index % arr.length)];
+                let nextValue = arr[Math.floor((_index + 1) % arr.length)];
+                let t = Math.min((_index % 1) / smooth, 1);
+                value = ease(t) * (nextValue - currValue) + currValue;
+              } else {
+                value = arr[Math.floor(index % arr.length)];
+              }
+              gl.uniform1f(loc, value);
             } else if (uniform.type === "fn") {
               gl.uniform1f(loc, uniform.value({ time }));
             }