hidpi canvas stuff

1 files changed, 205 insertions, 33 deletions

diff --git a/bundle.js b/bundle.js
index d996316..cb667bb 100644
--- a/bundle.js
+++ b/bundle.js
@@ -24768,6 +24768,8 @@ Object.defineProperty(exports, "__esModule", {
 
 var _util = __webpack_require__(1);
 
+__webpack_require__(16);
+
 var _mouse = __webpack_require__(2);
 
 var _mouse2 = _interopRequireDefault(_mouse);
@@ -24786,37 +24788,47 @@ var rx = void 0,
 var pixels_per_second = 512; // 1024
 
 var canvas = document.createElement('canvas');
-var ctx = canvas.getContext('2d');
-
-var scratch = document.createElement('canvas');
-var scratchCtx = scratch.getContext('2d');
-
 document.body.appendChild(canvas);
 document.body.addEventListener('resize', resize);
 resize();
 recenter();
 requestAnimationFrame(animate);
 
+// must request context after resizing
+var ctx = canvas.getContext('2d');
+
+var scratch = document.createElement('canvas');
+var scratchCtx = scratch.getContext('2d-lodpi');
+
 function resize() {
   w = canvas.width = window.innerWidth;
   h = canvas.height = window.innerHeight;
-  clear();
+  canvas.style.width = window.innerWidth + 'px';
+  canvas.style.height = window.innerHeight + 'px';
 }
 function recenter() {
   rx = (0, _util.randint)(w), ry = (0, _util.randint)(h);
 }
+var frame = null;
+function onFrame(fn) {
+  frame = fn;
+}
 function animate(t) {
   requestAnimationFrame(animate);
-  ctx.save();
-  ctx.globalAlpha = 0.0001;
-  ctx.translate(w / 2, h / 2);
-  ctx.rotate(0.1);
-  ctx.translate(-rx, -ry);
-  ctx.drawImage(canvas, 0, 0);
-  ctx.restore();
+  if (frame) {
+    frame(t);
+    frame = null;
+  }
+  // ctx.save()
+  // ctx.globalAlpha = 0.0001
+  // ctx.translate(w/2, h/2)
+  // ctx.rotate(0.1)
+  // ctx.translate(-rx, -ry)
+  // ctx.drawImage(canvas, 0, 0)
+  // ctx.restore()
 }
 function clear(n, x, y, ww, hh) {
-  ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.5) + ')';
+  ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.9) + ')';
   ctx.fillRect(x || 0, y || 0, ww || w, hh || h);
   recenter();
 }
@@ -24946,10 +24958,10 @@ function spectrum(spec, x0, y0, ww, hh) {
 
   var pcm_length = spec.fft_overlap * spec_len;
 
-  x0 = x0 || 0;
-  y0 = y0 || Math.floor(h / 4);
-  ww = ww || window.innerWidth;
-  hh = hh || h / 4;
+  x0 = x0 * devicePixelRatio || 0;
+  y0 = y0 * devicePixelRatio || Math.floor(h / 4);
+  ww = ww * devicePixelRatio || w;
+  hh = hh * devicePixelRatio || h / 4;
 
   var width = Math.round(pcm_length / spec.sr * pixels_per_second);
   var height = Math.floor(hh);
@@ -24961,7 +24973,7 @@ function spectrum(spec, x0, y0, ww, hh) {
 }
 
 exports.default = {
-  canvas: canvas, ctx: ctx,
+  canvas: canvas, ctx: ctx, onFrame: onFrame,
   triangle: triangle, clear: clear, line: line, dot: dot,
   waveform: waveform, spectrum: spectrum
 };
@@ -25325,12 +25337,13 @@ var samplers = {};
 var sampler = void 0;
 
 (0, _util.requestAudioContext)(function () {
-  sampler = samplers.misc = new _sampler2.default('samples/misc/glass.mp3', 2);
+  // sampler = samplers.misc = new Sampler('samples/misc/glass.mp3', 2)
   // sampler = samplers.smash = new Sampler('samples/smash/g{}.mp3', 12)
-  // sampler = samplers.earth = new Sampler('samples/earth/earth{}.mp3', 20)
+  sampler = samplers.earth = new _sampler2.default('samples/earth/earth{}.mp3', 20);
   // sampler = samplers.glass = new Sampler('samples/glass/0{}Particle.mp3', 20)
-  // sampler = samplers.bong = new Sampler('samples/bong/bong{}.mp3', 10)
+  // sampler = samplers.bubbles = new Sampler('samples/bubbles/bubbles{}.mp3', 10)
   // sampler = samplers.kalimba = new Sampler('samples/kalimba/380731__cabled-mess__sansula-08-c-raw.wav', 10)
+
   samplers.choice = function (m, n) {
     var r = Math.random();
     if (r < m) return samplers.smash;
@@ -25384,7 +25397,7 @@ function manipulate(x, y, pcm, spec) {
   // let new_spec = spectrum.cloneSpectrum(spec)
   // new_spec = spectrum.rotatePhase(new_spec, x * Math.PI)
 
-  var new_spec = _spectrum2.default.rotateSpectrum(spec, x);
+  var new_spec = _spectrum2.default.rotateSpectrum(spec, (y + 0.5) % 1);
 
   return new_spec;
 }
@@ -25425,7 +25438,7 @@ function trigger(x, y, t, source) {
   // const freq = notes[Math.floor(x * notes.length)]
   // const { speaker, player } = hall.play(source, y, freq, x, t)
 
-  var _source$getWaveAndSpe = source.getWaveAndSpectrum(y),
+  var _source$getWaveAndSpe = source.getWaveAndSpectrum(x),
       pcm = _source$getWaveAndSpe.pcm,
       spec = _source$getWaveAndSpe.spec;
 
@@ -25434,21 +25447,29 @@ function trigger(x, y, t, source) {
   var new_spec = manipulate(x, y, pcm, spec);
   if (!new_spec) return;
 
-  _draw2.default.clear();
-  // draw.waveform(pcm)
-  _draw2.default.spectrum(spec, 0, window.innerHeight / 4 + 20);
-
   var audioBuffer = _spectrum2.default.fromSpectrum(new_spec);
-  _draw2.default.waveform(audioBuffer.getChannelData(0));
-
   var player = new _tone2.default.Player(audioBuffer);
   player.connect(_output2.default);
   player.start(_tone2.default.now());
 
-  // const new_spec = spectrum.toSpectrum(audioBuffer.getChannelData(0), sr)
-  _draw2.default.spectrum(new_spec, 0, window.innerHeight * 1 / 2 + 40);
+  _draw2.default.onFrame(function () {
+    // INIT DRAWING PHASE
+    _draw2.default.clear();
+
+    // DRAW INDIVIDUAL UI ELEMENTS
+    // draw.waveform(pcm)
+    // draw.spectrum(spec, 0, window.innerHeight/4 + 20)
 
-  _draw2.default.triangle((0, _util.lerp)(x, 0, 1) * window.innerWidth, (0, _util.lerp)(y, 0, 1) * window.innerHeight - 20, 40);
+    _draw2.default.waveform(audioBuffer.getChannelData(0));
+
+    // DRAW SPECTRUM
+    // const new_spec = spectrum.toSpectrum(audioBuffer.getChannelData(0), sr)
+    // draw.spectrum(new_spec, 0, window.innerHeight * 1/2 + 40)
+    _draw2.default.spectrum(new_spec, 0, window.innerHeight * 1 / 4 + 20, 0, window.innerHeight * 1 / 2);
+
+    // DRAW FLAIR
+    _draw2.default.triangle((0, _util.lerp)(x, 0, 1) * window.innerWidth, (0, _util.lerp)(y, 0, 1) * window.innerHeight - 20, 40);
+  });
 }
 
 /***/ }),
@@ -26344,6 +26365,157 @@ module.exports = {
 };
 
 
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+/**
+ * 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 forEach(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);
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=bundle.js.map
\ No newline at end of file