Move colours to the canvas

index_canvas.html

@@ -10,6 +10,7 @@
         Prettier ui
         Song shuffle
         Image pause / manual advance
+        Keep arraybuffer in mem, load AudioBuffer as needed?
         Different colour palettes
         External respacks
         Change short blackout to beat length / 1.7
@@ -25,7 +26,7 @@
         <script type="text/javascript" src="audioUtils.js"></script>
         <script type="text/javascript">
             //debug
-            var skipPreloader = false;
+            var skipPreloader = true;
             
             var filesLoaded = 0;
             var initialLoad = 0;
@@ -33,6 +34,7 @@
             var preloaderSong = null;
 
             var audio = {
+                buffer: null,
                 proceed: true,
                 songs: rgSongs,
                 current_song: null,
@@ -71,8 +73,11 @@
             }
          
             audio.play = function(delay) {
+                if(!audio.current_song) {
+                    audio.prep();
+                }
                 var cur = audio.current_song;
-                if(cur && cur._playing) {
+                if(cur._playing) {
                     return;
                 }
                 
@@ -86,8 +91,7 @@
             audio.stop = function() {
                 if (audio.current_song && audio.current_song._playing) {
                     audio.current_song.stop();
-                    audio.current_song._playing = false;
-                    audio.current_song._startTime = 0;
+                    audio.current_song = null;
                 }
             }
             
@@ -108,7 +112,6 @@
                 audio.current_index = index;
                 loadSong(audio.songs[index], function() {
                     audio.stop();
-                    audio.prep();
                     audio.play();
                 });
             }
@@ -197,7 +200,8 @@
                         document.getElementById("waifuName").innerHTML = waifus[nCurrentWaifu].name;
                     }
                     if(beat != '*' && beat != 'X' && beat != 'O') {
-                        document.getElementById("waifuColour").style.backgroundColor = c;
+                        waifuCanvas.setColour(c);
+                        //document.getElementById("waifuColour").style.backgroundColor = c;
                         document.getElementById("colourName").innerHTML = colors[cc];
                     }
                     if(beat.toLowerCase() == 'o') {
@@ -343,7 +347,7 @@
         
         <div id="colours">
             <div id="blackout"></div>
-            <div id="waifuColour"></div>
+            <!--<div id="waifuColour"></div>-->
         </div>
     </body>
 </html>

style_canvas.css

@@ -13,6 +13,7 @@ body {
     position: absolute;
     bottom: 0px;
     left: 50%;
+    transform: translate(-50%, 0);
     z-index: 3;
 }
 
@@ -22,14 +23,15 @@ body {
     position: absolute;
     top: 0px;
     left: 50%;
+    transform: translate(-50%, 0);
     z-index: 3;
 }
 
 #waifu {
     display: block;
     height: 100%;
-    margin-left: auto;
-    margin-right: auto;
+    #margin-left: auto;
+    #margin-right: auto;
     padding: 0;
 
     z-index: -10;

waifuCanvas.js

@@ -2,6 +2,7 @@ var canvas;
 var needsRedraw = false;
 
 var waifuImgs = new Array();
+var waifuColour = "#FFF";
 
 var blurTime = 8;
 var blurIterations = 20;
@@ -16,9 +17,18 @@ waifuCanvas = {};
 
 waifuCanvas.init = function() {
     canvas = document.getElementById("waifu").getContext("2d");
+    window.addEventListener('resize', waifuCanvas.resize);
+    waifuCanvas.resize();
     canvas.drawImage(waifuImgs[0], 0, 0);
 }
 
+waifuCanvas.resize = function() {
+    // height is constant 720px, we expand width to suit
+    var ratio = window.innerWidth / window.innerHeight;
+    canvas.canvas.width = 720 * ratio + 1;
+    needsRedraw = true;
+}
+
 waifuCanvas.preload = function() {
     for(var waifu in waifus) {
         newImg = new Image();
@@ -29,22 +39,45 @@ waifuCanvas.preload = function() {
 }
 
 waifuCanvas.redraw = function() {
-    canvas.clearRect(0,0,1280,720);
+    var offset; // for centering/right/left align
+    var width = canvas.canvas.width;
+    var image = waifuImgs[nCurrentWaifu];
+    // white BG for the hard light filter
+    canvas.globalAlpha = 1;
+    canvas.globalCompositeOperation = "source-over";
+    canvas.fillStyle = "#FFF";
+    canvas.fillRect(0,0,width,720);
+    
+    switch(waifus[nCurrentWaifu].align) {
+        case "left":
+            offset = 0;
+            break;
+        case "right":
+            offset = width - image.width;
+            break;
+        default:
+            offset = width/2 - image.width/2;
+            break;
+    }
     
     if(xBlur) {
         canvas.globalAlpha = 1/blurIterations;
         for(var i=blurMin; i<blurMax; i++) {
-            canvas.drawImage(waifuImgs[nCurrentWaifu], blurDistance * i * xBlur, 0);
+            canvas.drawImage(image, blurDistance * i * xBlur + offset, 0);
         }
     } else if(yBlur) {
         canvas.globalAlpha = 1/blurIterations;
         for(var i=blurMin; i<blurMax; i++) {
-            canvas.drawImage(waifuImgs[nCurrentWaifu], 0, blurDistance * i * yBlur);
+            canvas.drawImage(image, offset, blurDistance * i * yBlur);
         }
     } else {
         canvas.globalAlpha = 1;
-        canvas.drawImage(waifuImgs[nCurrentWaifu], 0, 0);
+        canvas.drawImage(image, offset, 0);
     }
+    canvas.globalAlpha = 0.7;
+    canvas.fillStyle = waifuColour;
+    canvas.globalCompositeOperation = "hard-light";
+    canvas.fillRect(0,0,width,720);
     
     needsRedraw = false;
 }
@@ -64,19 +97,11 @@ waifuCanvas.animationLoop = function() {
 
 waifuCanvas.newWaifu = function() {
     GetRandomWaifu(); // increments the waifu counter
-    var style = document.getElementById("waifu").style;
-    style["margin-right"] = "auto";
-    style["margin-left"] = "auto";
-    switch(waifus[nCurrentWaifu].align) {
-        case "left":
-            style["margin-left"] = "0";
-            break;
-        case "right":
-            style["margin-right"] = "0";
-            break;
-        default:
-            break;
-    }
+    needsRedraw = true;
+}
+
+waifuCanvas.setColour = function(colour) {
+    waifuColour = colour;
     needsRedraw = true;
 }