Merge pull request #3 from livejs/canvas

Canvas
livejs · Oct 23, 2017 · 34e2578 · 34e2578
2 parents 7d4a8f7 + 06927c3
commit 34e2578
Show file tree

Hide file tree

Showing 22 changed files with 4,455 additions and 1,230 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/.DS_Store b/public/.DS_Store
diff --git a/public/library/.DS_Store b/public/library/.DS_Store
diff --git a/public/library/code/concentCirc01.js b/public/library/code/concentCirc01.js
diff --git a/public/library/code/spectrum01.js b/public/library/code/spectrum01.js
diff --git a/public/library/libraryItems.js b/public/library/libraryItems.js
diff --git a/public/scripts/VizFX.js b/public/scripts/VizFX.js
@@ -0,0 +1,88 @@
+var VizFX = (function() {
+
+  let vizFXMethods = {};
+
+
+  // filter is string, default resets - flips between different filter types
+  // amount set by control when called (0-127)
+  vizFXMethods.filter = function(filter, amount) {
+    switch (filter) {
+      case 'invert':
+        console.log('inverting');
+        document.documentElement.style.setProperty("--invert", amount+'%');
+        break;
+      case 'grayscale':
+        document.documentElement.style.setProperty("--grayscale", amount+'%');
+        break;
+      case 'hue':
+        document.documentElement.style.setProperty("--hue", amount*3+'deg');
+        break;
+      case 'blur':
+        document.documentElement.style.setProperty("--blur", amount/6+'px');
+        break;
+      default:
+        document.documentElement.style.setProperty("--invert", '0%');
+        document.documentElement.style.setProperty("--grayscale", '0%');
+        document.documentElement.style.setProperty("--hue", '0deg');
+        document.documentElement.style.setProperty("--blur", '0px');
+        break;
+    }
+
+  }
+
+  // transform flips between different transforms
+  vizFXMethods.transform = function(transform, amount) {
+    switch (transform) {
+      case 'zoom':
+        document.documentElement.style.setProperty("--zoom", amount/50);
+        break;
+      case 'transX':
+        document.documentElement.style.setProperty("--transX", amount*0.8+'vw');
+        break;
+      case 'transY':
+        document.documentElement.style.setProperty("--transY", amount*0.8+'vh');
+        break;
+      case 'rotate':
+        document.documentElement.style.setProperty("--rotate", amount/127+'turn');
+        break;
+      default:
+        document.documentElement.style.setProperty("--zoom", 1);
+        document.documentElement.style.setProperty("--transX", '0vw');
+        document.documentElement.style.setProperty("--transY", '0vh');
+        document.documentElement.style.setProperty("--rotate", '0turn');
+        break;
+    }
+  };
+
+
+
+  // glitch
+
+
+  // fade to black/white
+  vizFXMethods.fade = function(type, amount) {
+    if (type === 'white') {
+      document.documentElement.style.setProperty("--whiteFade", amount);
+    } else {
+      document.documentElement.style.setProperty("--blackFade", amount);
+    }
+  }
+
+  return vizFXMethods;
+
+})();
+
+
+
+
+// tile
+
+// symmetrysize
+
+
+
+// chroma
+
+// old film
+
+// pixelation