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

alternate-visualiser
William Toohey 10 years ago
parent 6f453f3d44
commit 5dac681142
  1. 1
      css/hues-m.css
  2. 1
      css/hues-r.css
  3. 1
      css/hues-x.css
  4. 62
      js/HuesCanvas.js
  5. 62
      js/HuesCore.js
  6. 27
      js/HuesUI.js
  7. 4
      js/SoundManager.js

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

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

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

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

@ -63,11 +63,6 @@ function HuesCore(defaults) {
}
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);
// Update with merged
@ -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;

@ -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,7 +139,6 @@ 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);

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

Loading…
Cancel
Save