From 5dac681142ce4ef11be555b56399d615a63c101d Mon Sep 17 00:00:00 2001 From: William Toohey Date: Sun, 8 Nov 2015 17:09:08 +1000 Subject: [PATCH] Alternate visualiser implementation - draws behind waifus. Not sure if I like it. --- css/hues-m.css | 1 - css/hues-r.css | 1 - css/hues-x.css | 1 - js/HuesCanvas.js | 64 +++++++++++++++++++++++++++++++++++++++++----- js/HuesCore.js | 62 -------------------------------------------- js/HuesUI.js | 29 ++------------------- js/SoundManager.js | 4 +-- 7 files changed, 62 insertions(+), 100 deletions(-) diff --git a/css/hues-m.css b/css/hues-m.css index c5229c6..a9f213d 100644 --- a/css/hues-m.css +++ b/css/hues-m.css @@ -32,7 +32,6 @@ .hues-m-visualisercontainer { position: absolute; width: 100%; - height: 64px; bottom:108px; left:-8px; right:0px; diff --git a/css/hues-r.css b/css/hues-r.css index b31de30..191b57d 100644 --- a/css/hues-r.css +++ b/css/hues-r.css @@ -119,7 +119,6 @@ -webkit-transform: scaleY(-1); position: absolute; width: 100%; - height: 64px; top: 0; left: 0; } \ No newline at end of file diff --git a/css/hues-x.css b/css/hues-x.css index 2d4c553..d4fde19 100644 --- a/css/hues-x.css +++ b/css/hues-x.css @@ -104,7 +104,6 @@ -webkit-transform: scaleY(-1); position: absolute; width: 100%; - height: 64px; top: 25px; left: 0; } \ No newline at end of file diff --git a/js/HuesCanvas.js b/js/HuesCanvas.js index 2c3fb04..d607f2c 100644 --- a/js/HuesCanvas.js +++ b/js/HuesCanvas.js @@ -73,6 +73,8 @@ function HuesCanvas(element, aContext, core) { this.lastSnow = 0; this.snowflakes = []; + this.vBarWidth = 10; + this.animating = true; requestAnimationFrame(this.getAnimLoop()); } @@ -87,6 +89,7 @@ HuesCanvas.prototype.resize = function() { this.canvas.canvas.width = Math.ceil(720 * ratio); var snow = document.getElementById("snow").getContext("2d"); snow.canvas.width = Math.ceil(720 * ratio); + this.core.soundManager.initVisualiser(this.canvas.canvas.width/this.vBarWidth); this.needsRedraw = true; }; @@ -108,11 +111,10 @@ HuesCanvas.prototype.redraw = function() { this.needsRedraw = false; return; } - } else { - this.canvas.fillStyle = "#FFF"; - this.canvas.fillRect(0,0,width,720); } - + + this.canvas.clearRect(0,0,width,720); + if(this.image && (this.image.bitmap || this.image.bitmaps)) { var bitmap = this.image.animated ? this.image.bitmaps[this.animFrame] : this.image.bitmap; @@ -159,9 +161,17 @@ HuesCanvas.prototype.redraw = function() { this.canvas.drawImage(bitmap, offset, 0); } } + this.canvas.globalCompositeOperation = "source-atop"; + this.canvas.globalAlpha = 1; + this.updateVisualiser(); + + this.canvas.globalCompositeOperation = "source-out"; + this.canvas.fillStyle = "#FFF"; + //this.canvas.fillRect(0,0,width,720); + + this.canvas.globalCompositeOperation = this.blendMode; this.canvas.globalAlpha = 0.7; this.canvas.fillStyle = this.intToHex(this.colour); - this.canvas.globalCompositeOperation = this.blendMode; this.canvas.fillRect(0,0,width,720); if(this.blackout) { this.canvas.globalAlpha = bOpacity; @@ -237,7 +247,7 @@ HuesCanvas.prototype.animationLoop = function() { this.redraw(); } else if(this.blurStart) { this.redraw(); - } else if(this.needsRedraw){ + } else if(localStorage["visualiser"]){ this.redraw(); } if(this.snowing) { @@ -292,6 +302,48 @@ HuesCanvas.prototype.syncAnim = function() { this.animFrame = ((this.animFrame % aLen) + aLen) % aLen; }; +HuesCanvas.prototype.updateVisualiser = function() { + if(localStorage["visualiser"] != "on") { + return; + } + + var width = this.canvas.canvas.width; + var height = this.canvas.canvas.height; + + if(!this.core.soundManager.vReady) { + this.core.soundManager.initVisualiser(width/this.vBarWidth); + } + + var logArrays = this.core.soundManager.getVisualiserData(); + if(!logArrays) { + return; + } + + var gradient=this.canvas.createLinearGradient(0,height/2.5,0,0); + gradient.addColorStop(1,"rgb(255,255,255)"); + gradient.addColorStop(0,"rgb(20,20,20)"); + this.canvas.fillStyle = "#444";//gradient; + + var barHeight; + var x = 0; + for(var a = 0; a < logArrays.length; a++) { + var vals = logArrays[a]; + for(var i = 0; i < vals.length; i++) { + var index = 0; + if(logArrays.length == 2 && a == 0) { + index = vals.length - i - 1; + } else { + index = i; + } + barHeight = vals[index]/255*height; + + this.canvas.fillRect(x,height-barHeight,this.vBarWidth,barHeight); + + x += this.vBarWidth; + } + } +} + HuesCanvas.prototype.setColour = function(colour, isFade) { if(isFade) { this.newColour = colour; diff --git a/js/HuesCore.js b/js/HuesCore.js index 804a162..69feeb8 100644 --- a/js/HuesCore.js +++ b/js/HuesCore.js @@ -62,11 +62,6 @@ function HuesCore(defaults) { return; } this.renderer = new HuesCanvas("waifu", this.soundManager.context, this); - - this.visualiser = document.createElement("canvas"); - this.visualiser.id = "visualiser"; - this.visualiser.height = "64"; - this.vCtx = this.visualiser.getContext("2d"); this.uiArray.push(new RetroUI(), new WeedUI(), new ModernUI(), new XmasUI(), new HalloweenUI()); this.settings.connectCore(this); @@ -113,55 +108,12 @@ function HuesCore(defaults) { this.animationLoop(); } -HuesCore.prototype.resizeVisualiser = function() { - this.soundManager.initVisualiser(this.visualiser.width/2); -} - -HuesCore.prototype.updateVisualiser = function() { - if(localStorage["visualiser"] != "on") { - return; - } - - var logArrays = this.soundManager.getVisualiserData(); - if(!logArrays) { - return; - } - - this.vCtx.clearRect(0, 0, this.vCtx.canvas.width, this.vCtx.canvas.height); - - var gradient=this.vCtx.createLinearGradient(0,64,0,0); - gradient.addColorStop(1,"rgba(255,255,255,0.6)"); - gradient.addColorStop(0,"rgba(20,20,20,0.6)"); - this.vCtx.fillStyle = gradient; - - var barWidth = 2; - var barHeight; - var x = 0; - for(var a = 0; a < logArrays.length; a++) { - var vals = logArrays[a]; - for(var i = 0; i < vals.length; i++) { - var index = 0; - if(logArrays.length == 2 && a == 0) { - index = vals.length - i - 1; - } else { - index = i; - } - barHeight = vals[index]/4; - - this.vCtx.fillRect(x,this.vCtx.canvas.height-barHeight,barWidth,barHeight); - - x += barWidth; - } - } -} - HuesCore.prototype.animationLoop = function() { var that = this; if(!this.soundManager.playing) { requestAnimationFrame(function() {that.animationLoop();}); return; } - this.updateVisualiser(); var now = this.soundManager.currentTime(); if(now < 0) { this.userInterface.updateTime(0); @@ -323,9 +275,6 @@ HuesCore.prototype.songDataUpdated = function() { HuesCore.prototype.resetAudio = function() { this.beatIndex = 0; this.songDataUpdated(); - if(localStorage["visualiser"] == "on") { - this.soundManager.initVisualiser(this.visualiser.width/2); - } }; HuesCore.prototype.randomImage = function() { @@ -631,17 +580,6 @@ HuesCore.prototype.settingsUpdated = function() { } break; } - switch (localStorage["visualiser"]) { - case "off": - document.getElementById("visualiser").className = "hidden"; - break; - case "on": - document.getElementById("visualiser").className = ""; - if(!this.soundManager.vReady) { - this.soundManager.initVisualiser(this.visualiser.width/2); - } - break; - } /*if (this.autoSong == "off" && !(this.settings.autosong == "off")) { console.log("Resetting loopCount since AutoSong was enabled"); this.loopCount = 0; diff --git a/js/HuesUI.js b/js/HuesUI.js index 1c66b2a..5079a1f 100644 --- a/js/HuesUI.js +++ b/js/HuesUI.js @@ -58,8 +58,6 @@ function HuesUI(parent) { // Put this near the links to song/image lists/ Bottom right alignment this.listContainer = null; - // Must be dynamic width, 64 pixels high. Will be filled with visualiser - this.visualiserContainer = null; this.hidden = false; @@ -141,8 +139,7 @@ HuesUI.prototype.initUI = function() { }; this.listContainer = document.createElement("div"); - this.visualiserContainer = document.createElement("div"); - + this.resizeHandler = function() { that.resize(); }; @@ -152,7 +149,6 @@ HuesUI.prototype.connectCore = function(core) { this.core = core; this.root.style.display = "block"; this.listContainer.appendChild(core.resourceManager.listView); - this.visualiserContainer.appendChild(this.core.visualiser); window.addEventListener('resize', this.resizeHandler); this.resizeHandler(); @@ -164,9 +160,6 @@ HuesUI.prototype.disconnect = function() { while (this.listContainer.firstElementChild) { this.listContainer.removeChild(this.listContainer.firstElementChild); } - while (this.visualiserContainer.firstElementChild) { - this.visualiserContainer.removeChild(this.visualiserContainer.firstElementChild); - } window.removeEventListener('resize', this.resizeHandler); }; @@ -352,9 +345,6 @@ RetroUI.prototype.initUI = function() { this.listContainer.className = "hues-r-listcontainer"; this.root.appendChild(this.listContainer); - - this.visualiserContainer.className = "hues-r-visualisercontainer"; - this.root.appendChild(this.visualiserContainer); }; RetroUI.prototype.toggleHide = function(stylename) { @@ -410,11 +400,6 @@ RetroUI.prototype.beat = function() { this.beatCount.textContent = "B=" + this.intToHex3(this.core.getSafeBeatIndex()); }; -RetroUI.prototype.resize = function() { - this.core.visualiser.width = this.visualiserContainer.offsetWidth; - this.core.resizeVisualiser(); -}; - function WeedUI() { RetroUI.call(this); @@ -450,8 +435,6 @@ WeedUI.prototype.initUI = function() { this.imageModeManual.textContent = "ONE"; this.imageModeAuto.textContent = "MANY"; - - this.visualiserContainer.className += " hues-w-visualisercontainer"; }; WeedUI.prototype.toggleHide = function() { @@ -650,9 +633,6 @@ ModernUI.prototype.initUI = function() { controls.appendChild(leftInfo); controls.appendChild(rightInfo); - this.visualiserContainer.className = "hues-m-visualisercontainer"; - controls.appendChild(this.visualiserContainer); - var beatBar = document.createElement("div"); beatBar.className = "hues-m-beatbar"; this.root.appendChild(beatBar); @@ -741,10 +721,9 @@ ModernUI.prototype.beat = function() { }; ModernUI.prototype.resize = function() { + HuesUI.prototype.resize.call(this); this.resizeSong(); this.resizeImage(); - this.core.visualiser.width = this.controls.offsetWidth; - this.core.resizeVisualiser(); }; ModernUI.prototype.resizeElement = function(el, parent) { @@ -845,10 +824,6 @@ function XmasUI() { bottomHelper.appendChild(bottom); wires.appendChild(bottomHelper); this.root.appendChild(wires); - - this.visualiserContainer.className = "hues-x-visualisercontainer"; - this.controls.removeChild(this.visualiserContainer); - this.beatBar.appendChild(this.visualiserContainer); } XmasUI.prototype = Object.create(ModernUI.prototype); diff --git a/js/SoundManager.js b/js/SoundManager.js index f42016a..7d84877 100644 --- a/js/SoundManager.js +++ b/js/SoundManager.js @@ -415,9 +415,9 @@ SoundManager.prototype.getVisualiserData = function() { for(var i = 0; i < this.linBins; i++) { var scaled = Math.round(i * this.maxBinLin / this.linBins); - result[i] = data[scaled]; + result[i] = data[scaled+2]; } - result[this.linBins] = data[this.binCutoffs[0]]; + result[this.linBins] = data[this.binCutoffs[0]+2]; for(var i = this.linBins+1; i < this.vBars; i++) { var cutoff = i - this.linBins; result[i] = this.sumArray(data, this.binCutoffs[cutoff-1],