pix2wav paths

3 files changed, 193 insertions, 20 deletions

diff --git a/app/client/util/hidpi-canvas.js b/app/client/util/hidpi-canvas.js
new file mode 100644
index 0000000..f0a7a0d
--- /dev/null
+++ b/app/client/util/hidpi-canvas.js
@@ -0,0 +1,170 @@
+/**
+ * HiDPI Canvas Polyfill (1.0.10)
+ *
+ * Author: Jonathan D. Johnson (http://jondavidjohn.com)
+ * Homepage: https://github.com/jondavidjohn/hidpi-canvas-polyfill
+ * Issue Tracker: https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues
+ * License: Apache-2.0
+*/
+(function(prototype) {
+
+  var pixelRatio = (function() {
+      var canvas = window.document.createElement('canvas'),
+          context = canvas.getContext('2d'),
+          backingStore = context.backingStorePixelRatio ||
+            context.webkitBackingStorePixelRatio ||
+            context.mozBackingStorePixelRatio ||
+            context.msBackingStorePixelRatio ||
+            context.oBackingStorePixelRatio ||
+            context.backingStorePixelRatio || 1;
+
+      return (window.devicePixelRatio || 1) / backingStore;
+    })(),
+
+    forEach = function(obj, func) {
+      for (var p in obj) {
+        if (obj.hasOwnProperty(p)) {
+          func(obj[p], p);
+        }
+      }
+    },
+
+    ratioArgs = {
+      'fillRect': 'all',
+      'clearRect': 'all',
+      'strokeRect': 'all',
+      'moveTo': 'all',
+      'lineTo': 'all',
+      'arc': [0,1,2],
+      'arcTo': 'all',
+      'bezierCurveTo': 'all',
+      'isPointinPath': 'all',
+      'isPointinStroke': 'all',
+      'quadraticCurveTo': 'all',
+      'rect': 'all',
+      'translate': 'all',
+      'createRadialGradient': 'all',
+      'createLinearGradient': 'all'
+    };
+
+  if (pixelRatio === 1) return;
+
+  forEach(ratioArgs, function(value, key) {
+    prototype[key] = (function(_super) {
+      return function() {
+        var i, len,
+          args = Array.prototype.slice.call(arguments);
+
+        if (value === 'all') {
+          args = args.map(function(a) {
+            return a * pixelRatio;
+          });
+        }
+        else if (Array.isArray(value)) {
+          for (i = 0, len = value.length; i < len; i++) {
+            args[value[i]] *= pixelRatio;
+          }
+        }
+
+        return _super.apply(this, args);
+      };
+    })(prototype[key]);
+  });
+
+   // Stroke lineWidth adjustment
+  prototype.stroke = (function(_super) {
+    return function() {
+      this.lineWidth *= pixelRatio;
+      _super.apply(this, arguments);
+      this.lineWidth /= pixelRatio;
+    };
+  })(prototype.stroke);
+
+  // Text
+  //
+  prototype.fillText = (function(_super) {
+    return function() {
+      var args = Array.prototype.slice.call(arguments);
+
+      args[1] *= pixelRatio; // x
+      args[2] *= pixelRatio; // y
+
+      this.font = this.font.replace(
+        /(\d+)(px|em|rem|pt)/g,
+        function(w, m, u) {
+          return (m * pixelRatio) + u;
+        }
+      );
+
+      _super.apply(this, args);
+
+      this.font = this.font.replace(
+        /(\d+)(px|em|rem|pt)/g,
+        function(w, m, u) {
+          return (m / pixelRatio) + u;
+        }
+      );
+    };
+  })(prototype.fillText);
+
+  prototype.strokeText = (function(_super) {
+    return function() {
+      var args = Array.prototype.slice.call(arguments);
+
+      args[1] *= pixelRatio; // x
+      args[2] *= pixelRatio; // y
+
+      this.font = this.font.replace(
+        /(\d+)(px|em|rem|pt)/g,
+        function(w, m, u) {
+          return (m * pixelRatio) + u;
+        }
+      );
+
+      _super.apply(this, args);
+
+      this.font = this.font.replace(
+        /(\d+)(px|em|rem|pt)/g,
+        function(w, m, u) {
+          return (m / pixelRatio) + u;
+        }
+      );
+    };
+  })(prototype.strokeText);
+})(window.CanvasRenderingContext2D.prototype);
+;(function(prototype) {
+  prototype.getContext = (function(_super) {
+    return function(type) {
+      var backingStore, ratio, context;
+
+
+      if (type == '2d-lodpi') {
+        context = _super.call(this, '2d');
+      }
+      else if (type === '2d') {
+        context = _super.call(this, '2d');
+
+        backingStore = context.backingStorePixelRatio ||
+              context.webkitBackingStorePixelRatio ||
+              context.mozBackingStorePixelRatio ||
+              context.msBackingStorePixelRatio ||
+              context.oBackingStorePixelRatio ||
+              context.backingStorePixelRatio || 1;
+
+        ratio = (window.devicePixelRatio || 1) / backingStore;
+
+        if (ratio > 1) {
+          this.style.height = this.height + 'px';
+          this.style.width = this.width + 'px';
+          this.width *= ratio;
+          this.height *= ratio;
+        }
+      }
+      else {
+        context = _super.call(this, type);
+      }
+      
+      return context;
+    };
+  })(prototype.getContext);
+})(window.HTMLCanvasElement.prototype);
diff --git a/app/client/util/index.js b/app/client/util/index.js
index a811dcf..4ce1245 100644
--- a/app/client/util/index.js
+++ b/app/client/util/index.js
@@ -2,17 +2,13 @@ import * as sort from './sort'
 import * as format from './format'
 import * as maths from './math'
 
-export {
-  sort,
-  ...maths,
-  ...format,
-}
+import './hidpi-canvas'
 
-export const is_iphone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
-export const is_ipad = !!(navigator.userAgent.match(/iPad/i))
-export const is_android = !!(navigator.userAgent.match(/Android/i))
-export const is_mobile = is_iphone || is_ipad || is_android
-export const is_desktop = ! is_mobile;
+const is_iphone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
+const is_ipad = !!(navigator.userAgent.match(/iPad/i))
+const is_android = !!(navigator.userAgent.match(/Android/i))
+const is_mobile = is_iphone || is_ipad || is_android
+const is_desktop = ! is_mobile;
 
 const htmlClassList = document.body.parentNode.classList
 htmlClassList.add(is_desktop ? 'desktop' : 'mobile')
@@ -20,9 +16,7 @@ htmlClassList.remove('loading')
 
 // window.debug = false
 
-document.body.style.backgroundImage = 'linear-gradient(' + (randint(40)+40) + 'deg, #fde, #ffe)'
-
-export const allProgress = (promises, progress_cb) => {
+const allProgress = (promises, progress_cb) => {
   let d = 0
   progress_cb(0, 0, promises.length)
   promises.forEach((p) => {
@@ -34,3 +28,13 @@ export const allProgress = (promises, progress_cb) => {
   })
   return Promise.all(promises)
 }
+
+document.body.style.backgroundImage = 'linear-gradient(' + (maths.randint(40)+40) + 'deg, #fde, #ffe)'
+
+export default {
+  ...maths,
+  ...format,
+  sort,
+  allProgress,
+  is_iphone, is_ipad, is_android, is_mobile, is_desktop,
+}
diff --git a/app/client/util/math.js b/app/client/util/math.js
index 253bacd..c301ffd 100644
--- a/app/client/util/math.js
+++ b/app/client/util/math.js
@@ -1,13 +1,12 @@
-export function mod(n,m){ return n-(m * Math.floor(n/m)) }
-export function clamp(n,a,b) { return n<a?a:n<b?n:b }
-export function norm(n,a,b) { return (n-a) / (b-a) }
-export function lerp(n,a,b) { return (b-a)*n+a }
-export function mix(n,a,b) { return a*(1-n)+b*n }
-export function randint(n) { return Math.floor(Math.random()*n) }
+export const mod = (n,m) => n-(m * Math.floor(n/m))
+export const clamp = (n,a,b) => n<a?a:n<b?n:b
+export const norm = (n,a,b) => (n-a) / (b-a)
+export const lerp = (n,a,b) => (b-a)*n+a
+export const mix = (n,a,b) => a*(1-n)+b*n
+export const randint = (n) => Math.floor(Math.random()*n)
 export function randrange(a,b){ return Math.random() * (b-a) + a }
 export function randsign(){ return Math.random() >= 0.5 ? -1 : 1 }
 export function choice (a){ return a[ Math.floor(Math.random() * a.length) ] }
-export function lerp(n,a,b){ return (b-a)*n+a }
 export function angle(x0,y0,x1,y1){ return Math.atan2(y1-y0,x1-x0) }
 export function dist(x0,y0,x1,y1){ return Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2)) }
 export function xor(a,b){ a=!!a; b=!!b; return (a||b) && !(a&&b) }