From c1516c3e3bfa8b74ad14d5735cff6c9a3cfdf21c Mon Sep 17 00:00:00 2001 From: Will Toohey Date: Tue, 3 May 2016 16:49:13 +1000 Subject: [PATCH] Add trippy beat chars --- src/js/HuesCanvas.js | 27 +++++++++++++++++++++++---- src/js/HuesCore.js | 10 +++++++++- src/js/HuesInfo.js | 2 ++ src/js/HuesUI.js | 2 +- 4 files changed, 35 insertions(+), 6 deletions(-) diff --git a/src/js/HuesCanvas.js b/src/js/HuesCanvas.js index 1b433b6..c98977e 100644 --- a/src/js/HuesCanvas.js +++ b/src/js/HuesCanvas.js @@ -58,6 +58,7 @@ function HuesCanvas(root, audioContext, core) { // trippy mode this.trippyStart = [0, 0]; // x, y this.trippyRadii = [0, 0]; // x, y + // force trippy mode this.trippyOn = false; this.trippyRadius = 0; @@ -195,7 +196,7 @@ HuesCanvas.prototype.redraw = function() { } } - if(this.trippyOn && (this.trippyStart[0] || this.trippyStart[1])) { + if(this.trippyStart[0] || this.trippyStart[1]) { // x blur moves inwards from the corners, y comes out // So the base colour is inverted for y, normal for x // Thus if the y start is more recent, we invert @@ -301,7 +302,7 @@ HuesCanvas.prototype.animationLoop = function() { else this.core.blurUpdated(0, dist); } - if(this.trippyOn && (this.trippyStart[0] || this.trippyStart[1])) { + if(this.trippyStart[0] || this.trippyStart[1]) { for(let i = 0; i < 2; i++) { this.trippyRadii[i] = Math.floor((this.audio.currentTime - this.trippyStart[i]) * this.trippyRadius) * 2; if(this.trippyRadii[i] > this.trippyRadius) { @@ -458,7 +459,8 @@ HuesCanvas.prototype.mixColours = function(percent) { HuesCanvas.prototype.doXBlur = function() { this.blurStart = this.audio.currentTime; - this.trippyStart[0] = this.blurStart; + if(this.trippyOn) + this.trippyStart[0] = this.blurStart; this.blurDistance = this.blurAmount; this.xBlur = true; this.yBlur = false; @@ -467,13 +469,30 @@ HuesCanvas.prototype.doXBlur = function() { HuesCanvas.prototype.doYBlur = function() { this.blurStart = this.audio.currentTime; - this.trippyStart[1] = this.blurStart; + if(this.trippyOn) + this.trippyStart[1] = this.blurStart; this.blurDistance = this.blurAmount; this.xBlur = false; this.yBlur = true; this.needsRedraw = true; }; +HuesCanvas.prototype.doTrippyX = function() { + let saveTrippy = this.trippyOn; + // force trippy + this.trippyOn = true; + this.doXBlur(); + this.trippyOn = saveTrippy; +} + +HuesCanvas.prototype.doTrippyY = function() { + let saveTrippy = this.trippyOn; + // force trippy + this.trippyOn = true; + this.doYBlur(); + this.trippyOn = saveTrippy; +} + HuesCanvas.prototype.setBlurDecay = function(decay) { this.blurDecay = {"slow" : 7.8, "medium" : 14.1, "fast" : 20.8, "faster!" : 28.7}[decay]; }; diff --git a/src/js/HuesCore.js b/src/js/HuesCore.js index 8c2ddc2..7679152 100644 --- a/src/js/HuesCore.js +++ b/src/js/HuesCore.js @@ -123,7 +123,7 @@ function HuesCore(defaults) { this.uiArray = []; // What's our root element? - this.root = null;; + this.root = null; if(!defaults.root) { this.root = document.body; } else if(typeof defaults.root === "string") { @@ -729,6 +729,14 @@ HuesCore.prototype.beater = function(beat) { case 'o': this.renderer.doXBlur(); break; + case '<': + case '>': + this.renderer.doTrippyX(); + break; + case '(': + case ')': + this.renderer.doTrippyY(); + break; case '+': this.renderer.doXBlur(); this.renderer.doBlackout(); diff --git a/src/js/HuesInfo.js b/src/js/HuesInfo.js index de3f5a5..877b9ea 100644 --- a/src/js/HuesInfo.js +++ b/src/js/HuesInfo.js @@ -36,6 +36,8 @@ let beatGlossary = [ "* Image only", "X Vertical blur only", "O Horizontal blur only", + ">/< Trippy vertical blur", + "(/) Trippy horizontal blur", "~ Fade color", "= Fade and change image", "i Invert all colours", diff --git a/src/js/HuesUI.js b/src/js/HuesUI.js index 25ce809..7a8fc3e 100644 --- a/src/js/HuesUI.js +++ b/src/js/HuesUI.js @@ -444,7 +444,7 @@ MinimalUI.prototype.initUI = function() { this.container.removeChild(this.beatBar); this.container.innerHTML = ""; this.container.appendChild(this.beatBar); -} +}; function WeedUI(parent, name) { RetroUI.call(this, parent, name ? name : "WeedUI");