Alternate visualiser implementation - draws behind waifus. Not sure if I like it.

css/hues-m.css

@@ -32,7 +32,6 @@
 .hues-m-visualisercontainer {
     position: absolute;
     width: 100%;
-    height: 64px;
     bottom:108px;
     left:-8px;
     right:0px;

css/hues-r.css

@@ -119,7 +119,6 @@
     -webkit-transform: scaleY(-1);
     position: absolute;
     width: 100%;
-    height: 64px;
     top: 0;
     left: 0;
 }

css/hues-x.css

@@ -104,7 +104,6 @@
     -webkit-transform: scaleY(-1);
     position: absolute;
     width: 100%;
-    height: 64px;
     top: 25px;
     left: 0;
 }

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;

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;

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);

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],