Blur is no longer frame dependant, but time dependant

index_canvas.html

@@ -5,7 +5,6 @@
         Clean up the damn code
             if you're not mon, don't read any further, it's pretty bad JS
 
-        Fine tune blur timing
         Volume controls
         Prettier ui
         Song shuffle
@@ -26,7 +25,7 @@
         <script type="text/javascript" src="audioUtils.js"></script>
         <script type="text/javascript">
             //debug
-            var skipPreloader = true;
+            var skipPreloader = false;
             
             var filesLoaded = 0;
             var initialLoad = 0;
@@ -47,7 +46,7 @@
                 var song = audio.songs[audio.current_index];
                 
                 document.getElementById("songname").innerHTML = song.name
-                document.getElementById("blackout").style.display = "none";
+                waifuCanvas.clearBlackout();
                 
                 // stop() destroys the old, must recreate
                 var newSong = audio.context.createBufferSource()
@@ -160,6 +159,7 @@
             function animationLoop() {
                 requestAnimationFrame(animationLoop);
                 timerUpdate();
+                waifuCanvas.animationLoop();
                 var cur = audio.current_song;
                 if(!cur || !cur._playing) {
                     return;
@@ -172,7 +172,6 @@
                     var beat = getBeat(audio.beat_pointer);
                     handleBeat(beat, audio.beat_pointer, RequestNextColor(), nCurrentColor, cur);
                 }
-                waifuCanvas.animationLoop();
             }
             
             function handleBeat(beat, bp, c, cc, current) {
@@ -186,14 +185,14 @@
                 if(beat != '.') {
                     if(beat == '|') {
                         shortBlackout = true;
-                        document.getElementById("blackout").style.display = "block";
+                        waifuCanvas.blackout();
                         return;
                     }
                     if(beat == '+') {
-                        document.getElementById("blackout").style.display = "block";
+                        waifuCanvas.blackout();
                         return;
                     } else {
-                        document.getElementById("blackout").style.display = "none";
+                        waifuCanvas.clearBlackout();
                     }
                     if(beat != ':' && beat != 'O' && beat != 'X') {
                         waifuCanvas.newWaifu();
@@ -201,7 +200,6 @@
                     }
                     if(beat != '*' && beat != 'X' && beat != 'O') {
                         waifuCanvas.setColour(c);
-                        //document.getElementById("waifuColour").style.backgroundColor = c;
                         document.getElementById("colourName").innerHTML = colors[cc];
                     }
                     if(beat.toLowerCase() == 'o') {
@@ -212,7 +210,7 @@
                     }
                 }
                 if(shortBlackout) {
-                    document.getElementById("blackout").style.display = "none";
+                    waifuCanvas.clearBlackout();
                     shortBlackout = false;
                 }
             }
@@ -344,10 +342,5 @@
             <div id="waifuName"></div>
             <div id="colourName">white</div>
         </div>
-        
-        <div id="colours">
-            <div id="blackout"></div>
-            <!--<div id="waifuColour"></div>-->
-        </div>
     </body>
 </html>

waifuCanvas.js

@@ -4,13 +4,20 @@ var needsRedraw = false;
 var waifuImgs = new Array();
 var waifuColour = "#FFF";
 
-var blurTime = 8;
+// constant
-var blurIterations = 20;
+var blurIterations = 20; // quality
 var blurMin = -blurIterations/2;
 var blurMax = blurIterations/2;
-var blurDistance = 4;
+var blurAlpha = 1/(blurIterations/2);
-var xBlur = 0;
+var blurDecay = 25;
-var yBlur = 0;
+var blurAmount = 15;
+// dynamic
+var blurStart = 0;
+var blurDistance = 0;
+var xBlur = false;
+var yBlur = false;
+
+var blackout = false;
 var shortBlackout = false;
 
 waifuCanvas = {};
@@ -45,8 +52,15 @@ waifuCanvas.redraw = function() {
     // white BG for the hard light filter
     canvas.globalAlpha = 1;
     canvas.globalCompositeOperation = "source-over";
-    canvas.fillStyle = "#FFF";
+    if(blackout) {
-    canvas.fillRect(0,0,width,720);
+        canvas.fillStyle = "#000";
+        canvas.fillRect(0,0,width,720);
+        needsRedraw = false;
+        return;
+    } else {
+        canvas.fillStyle = "#FFF";
+        canvas.fillRect(0,0,width,720);
+    }
     
     switch(waifus[nCurrentWaifu].align) {
         case "left":
@@ -59,16 +73,18 @@ waifuCanvas.redraw = function() {
             offset = width/2 - image.width/2;
             break;
     }
-    
+    if(xBlur || yBlur) {
+        canvas.globalAlpha = blurAlpha;
+        var delta = audio.context.currentTime - blurStart;
+        blurDistance = blurAmount * Math.exp(-blurDecay * delta);
+    }
     if(xBlur) {
-        canvas.globalAlpha = 1/blurIterations;
+        for(var i=blurMin; i<=blurMax; i++) {
-        for(var i=blurMin; i<blurMax; i++) {
+            canvas.drawImage(image, Math.floor(blurDistance * i) + offset, 0);
-            canvas.drawImage(image, blurDistance * i * xBlur + offset, 0);
         }
     } else if(yBlur) {
-        canvas.globalAlpha = 1/blurIterations;
+        for(var i=blurMin; i<=blurMax; i++) {
-        for(var i=blurMin; i<blurMax; i++) {
+            canvas.drawImage(image, offset, Math.floor(blurDistance * i));
-            canvas.drawImage(image, offset, blurDistance * i * yBlur);
         }
     } else {
         canvas.globalAlpha = 1;
@@ -83,12 +99,12 @@ waifuCanvas.redraw = function() {
 }
 
 waifuCanvas.animationLoop = function() {
-    if(xBlur) {
+    if(blurStart && blurDistance < 0.3) {
-        xBlur--;
+        blurDistance = 0;
+        blurStart = 0;
+        xBlur = yBlur = false;
         waifuCanvas.redraw();
-    }
+    } else if(blurStart) {
-    else if(yBlur) {
-        yBlur--;
         waifuCanvas.redraw();
     } else if(needsRedraw){
         waifuCanvas.redraw();
@@ -105,15 +121,29 @@ waifuCanvas.setColour = function(colour) {
     needsRedraw = true;
 }
 
-waifuCanvas.xBlur = function() {
+waifuCanvas.blackout = function() {
-    xBlur = blurTime;
+    blackout = true;
-    yBlur = 0;
     needsRedraw = true;
 }
 
-waifuCanvas.yBlur = function() {
+// for song changes
-    yBlur = blurTime;
+waifuCanvas.clearBlackout = function() {
-    xBlur = 0;
+    blackout = false;
+    needsRedraw = true;
+}
+
+waifuCanvas.xBlur = function() {
+    blurStart = audio.context.currentTime;
+    blurDistance = blurAmount;
+    xBlur = true;
+    yBlur = false;
     needsRedraw = true;
 }
 
+waifuCanvas.yBlur = function() {
+    blurStart = audio.context.currentTime;
+    blurDistance = blurAmount;
+    xBlur = false;
+    yBlur = true;
+    needsRedraw = true;
+}