From db16a576564aa6b3d19b8b8b60fe3693ce6337c3 Mon Sep 17 00:00:00 2001
From: William Toohey <will@mon.im>
Date: Fri, 19 Jun 2015 18:02:42 +1000
Subject: [PATCH] New font, new styles, better beat handling, better blackouts

---
 PetMe64.woff   | Bin 0 -> 6528 bytes
 index.html     |  76 ++++++++++++++++++++++++++++----------------
 style.css      |  76 +++++++++++++++++++++++++++++++++++++++-----
 waifuCanvas.js |  84 ++++++++++++++++++++++++++++++++++++++-----------
 4 files changed, 183 insertions(+), 53 deletions(-)
 create mode 100644 PetMe64.woff

diff --git a/PetMe64.woff b/PetMe64.woff
new file mode 100644
index 0000000000000000000000000000000000000000..de805c83412da5764ecccb36fa3eec7fc08ac19d
GIT binary patch
literal 6528
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 069730f..ee1aa9f 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,6 @@
         Image pause / manual advance
         Different colour palettes
         External respacks
-        Change short blackout to beat length / 1.7 + change image
         Blur into blackout? iunno
     -->
     <head>
@@ -25,7 +24,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;
@@ -90,6 +89,7 @@
          
             audio.stop = function() {
                 if (audio.current_song && audio.current_song._playing) {
+                    updateBeatView(0);
                     audio.current_song.stop();
                     audio.current_song = null;
                 }
@@ -171,7 +171,8 @@
                 for(var beatTime = audio.beat_pointer * cur._beatWidth; beatTime < now;
                         beatTime = ++audio.beat_pointer * cur._beatWidth) {
                     var beat = getBeat(audio.beat_pointer);
-                    handleBeat(beat, audio.beat_pointer, RequestNextColor(), nCurrentColor, cur);
+                    var c = RequestNextColor();
+                    handleBeat(beat, audio.beat_pointer, cur);
                 }
             }
             
@@ -182,7 +183,7 @@
                 document.getElementById("beetLeft").innerHTML = beatLine.split("").reverse().join("");
             }
             
-            function handleBeat(beat, bp, c, cc, current) {
+            function handleBeat(beat, bp, current) {
                 // we have changed song since we were scheduled
                 if(current != audio.current_song)
                     return;
@@ -197,35 +198,55 @@
                     accent.offsetWidth = accent.offsetWidth;
                     accent.className = "beetView fade";
                     
-                    if(beat == '|') {
-                        shortBlackout = true;
+                    switch(beat) {
+                    case 'X':
+                    case 'x':
+                        waifuCanvas.yBlur();
+                        break;
+                    case 'O':
+                    case 'o':
+                        waifuCanvas.xBlur();
+                        break;
+                    case '+':
+                        waifuCanvas.xBlur();
                         waifuCanvas.blackout();
-                        return;
+                        break;
+                    case '¤':
+                        waifuCanvas.xBlur();
+                        waifuCanvas.blackout(true);
+                        break;
+                    case '|':
+                        waifuCanvas.shortBlackout(current._beatWidth);
+                        waifuCanvas.setColour(RequestNextColor());
+                        document.getElementById("colourName").innerHTML = colors[nCurrentColor];
+                        break;
+                    case ':':
+                        waifuCanvas.setColour(RequestNextColor());
+                        document.getElementById("colourName").innerHTML = colors[nCurrentColor];
+                        break;
+                    case '*':
+                        // if isFullAuto
+                        waifuCanvas.newWaifu();
+                        document.getElementById("waifuName").innerHTML = waifus[nCurrentWaifu].name;
+                        break;
+                    case '=':
+                        // if isFullAuto
+                        waifuCanvas.newWaifu();
+                        document.getElementById("waifuName").innerHTML = waifus[nCurrentWaifu].name;
+                    case '~':
+                        // TODO colour fade
+                        break;
                     }
-                    if(beat == '+') {
-                        waifuCanvas.blackout();
-                        return;
-                    } else {
+                    if ([".", "+", "|", "¤"].indexOf(beat) == -1) {
                         waifuCanvas.clearBlackout();
                     }
-                    if(beat != ':' && beat != 'O' && beat != 'X') {
+                    if([".", "+", ":", "*", "X", "O", "~", "="].indexOf(beat) == -1) {
+                        waifuCanvas.setColour(RequestNextColor());
+                        document.getElementById("colourName").innerHTML = colors[nCurrentColor];
+                        // if isFullAuto
                         waifuCanvas.newWaifu();
                         document.getElementById("waifuName").innerHTML = waifus[nCurrentWaifu].name;
                     }
-                    if(beat != '*' && beat != 'X' && beat != 'O') {
-                        waifuCanvas.setColour(c);
-                        document.getElementById("colourName").innerHTML = colors[cc];
-                    }
-                    if(beat.toLowerCase() == 'o') {
-                        waifuCanvas.xBlur();
-                    }
-                    if(beat.toLowerCase() == 'x') {
-                        waifuCanvas.yBlur();
-                    }
-                }
-                if(shortBlackout) {
-                    waifuCanvas.clearBlackout();
-                    shortBlackout = false;
                 }
             }
             
@@ -265,6 +286,7 @@
                     // get around issues on mobile where pointer-events don't work
                     document.getElementById("preloader").style.display = "none";
                     document.getElementById("waifu").className = "loaded"
+                    updateBeatView(-1);
                     // free dat memory
                     preloaderSong = null;
                 }
@@ -344,7 +366,7 @@
         </div>
         <div class="ui" id="beets">
             <div class="beetView" id="beetLeft"></div>
-            <div class="beetView" id="beetAccent"></div>
+            <div class="beetView fade" id="beetAccent">X</div>
             <div class="beetView" id="beetRight"></div>
         </div>
         <canvas id="waifu" width="1280" height="720"></canvas>
diff --git a/style.css b/style.css
index 8bef540..d8ce6f5 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,13 @@
+@font-face {
+  font-family: 'PetMe64Web';
+  font-style: normal;
+  font-weight: normal;
+  -webkit-font-smoothing: none;
+  font-smooth: never;
+  src: local("PetMe64Web");
+  src: local('Pet Me 64'), local('Pet Me 64'), url("PetMe64.woff") format('woff');
+}
+
 html, body {
     height: 100%;
     margin: 0; padding: 0;
@@ -9,12 +19,14 @@ body {
 }
 
 .ui {
-    background-color:#ffffff;
-    font-family: monospace;
+    border: 3px solid #000;
+    background-color: rgba(200,200,200,0.5);
+    font-family: 'PetMe64Web';
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
     z-index: 3;
+    padding: 5px;
 }
 
 #controls {
@@ -23,21 +35,65 @@ body {
 
 #beets {
     top: 0px;
+    height: 20px;
+    overflow:hidden;
+    #display:table-cell;
+    #vertical-align:middle;
+    #padding: 5px;
 }
 
 .beetView {
-    float: left;
+    position: relative;
+    top: -50%;
+    display: inline-block;
+    padding: 0px;
+    background: #333;
+    color: #FFF;
+    #display: table-cell;
+    #vertical-align: middle;
+    #background-color: rgba(0,0,0,0.7);
+    #color: #FFF;
+    #border-radius: 13px 13px 13px 13px;
+    #-moz-border-radius: 13px 13px 13px 13px;
+    #-webkit-border-radius: 13px 13px 13px 13px;
+    #border: 0px none #000000;
+}
+
+#beetLeft {
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-bottomleft: 5px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    padding-right: 10px;
+}
+
+#beetRight {
+    margin-left: -10px;
+    -webkit-border-top-right-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    -moz-border-radius-bottomright: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    padding-left: 10px;
 }
 
 #beetAccent {
-    font-size: 50px;
-    opacity: 1;
+    #font-size: 40px;
+    margin-left: -10px;
+    font-size: 2em;
+    color: rgba(255,255,255,1);
+    z-index: 2;
+    padding: 7px;
+    border-radius: 50%;
 }
 
 #beetAccent.fade {
-    animation-name: fadeout;
+    animation-name: textfadeout;
     animation-duration: 0.2s;
-    opacity: 0;
+    color: rgba(255,255,255,0);
 }
 
 #waifu {
@@ -66,7 +122,7 @@ body {
     display:flex;
     justify-content:center;
     align-items:center;
-    font-family: monospace;
+    font-family: 'PetMe64Web';
     font-size: 30pt;
     
     position: absolute;
@@ -90,4 +146,8 @@ body {
 @keyframes fadeout {
     from {opacity: 1;}
     to {opacity: 0;}
+}
+@keyframes textfadeout {
+    from {color: rgba(255,255,255,1);}
+    to {color: rgba(255,255,255,0);}
 }
\ No newline at end of file
diff --git a/waifuCanvas.js b/waifuCanvas.js
index 697ac92..060e21d 100644
--- a/waifuCanvas.js
+++ b/waifuCanvas.js
@@ -4,13 +4,7 @@ var needsRedraw = false;
 var waifuImgs = new Array();
 var waifuColour = "#FFF";
 
-// constant
-var blurIterations = 20; // quality
-var blurMin = -blurIterations/2;
-var blurMax = blurIterations/2;
-var blurAlpha = 1/(blurIterations/2);
-var blurDecay = 25;
-var blurAmount = 15;
+var blurDecay, blurAmount, blurIterations, blurMin, blurMax, blurDelta; // set later
 // dynamic
 var blurStart = 0;
 var blurDistance = 0;
@@ -19,10 +13,16 @@ var yBlur = false;
 
 var blackout = false;
 var shortBlackout = false;
+var blackoutColour = "#000"; // for the whiteout character
+var blackoutTimeout;
 
 waifuCanvas = {};
 
 waifuCanvas.init = function() {
+    waifuCanvas.blendMode = "hard-light";
+    waifuCanvas.setBlurAmount(15);
+    waifuCanvas.setBlurIterations(31);
+    waifuCanvas.setBlurDecay(25);
     canvas = document.getElementById("waifu").getContext("2d");
     window.addEventListener('resize', waifuCanvas.resize);
     waifuCanvas.resize();
@@ -47,16 +47,22 @@ waifuCanvas.preload = function() {
 
 waifuCanvas.redraw = function() {
     var offset; // for centering/right/left align
+    var bOpacity;
     var width = canvas.canvas.width;
     var image = waifuImgs[nCurrentWaifu];
+    
+    var cTime = audio.context.currentTime;
     // white BG for the hard light filter
     canvas.globalAlpha = 1;
     canvas.globalCompositeOperation = "source-over";
     if(blackout) {
-        canvas.fillStyle = "#000";
-        canvas.fillRect(0,0,width,720);
-        needsRedraw = false;
-        return;
+        bOpacity = (cTime - blackoutStart)*10; // original is 3 frames, this is close
+        if(bOpacity > 1) { // optimise the draw
+            canvas.fillStyle = blackoutColour;
+            canvas.fillRect(0,0,width,720);
+            needsRedraw = false;
+            return;
+        }
     } else {
         canvas.fillStyle = "#FFF";
         canvas.fillRect(0,0,width,720);
@@ -75,15 +81,15 @@ waifuCanvas.redraw = function() {
     }
     if(xBlur || yBlur) {
         canvas.globalAlpha = blurAlpha;
-        var delta = audio.context.currentTime - blurStart;
+        var delta = cTime - blurStart;
         blurDistance = blurAmount * Math.exp(-blurDecay * delta);
     }
     if(xBlur) {
-        for(var i=blurMin; i<=blurMax; i++) {
+        for(var i=blurMin; i<=blurMax; i+= blurDelta) {
             canvas.drawImage(image, Math.floor(blurDistance * i) + offset, 0);
         }
     } else if(yBlur) {
-        for(var i=blurMin; i<=blurMax; i++) {
+        for(var i=blurMin; i<=blurMax; i+= blurDelta) {
             canvas.drawImage(image, offset, Math.floor(blurDistance * i));
         }
     } else {
@@ -92,13 +98,22 @@ waifuCanvas.redraw = function() {
     }
     canvas.globalAlpha = 0.7;
     canvas.fillStyle = waifuColour;
-    canvas.globalCompositeOperation = "hard-light";
+    canvas.globalCompositeOperation = waifuCanvas.blendMode;
     canvas.fillRect(0,0,width,720);
-    
-    needsRedraw = false;
+    if(blackout) {
+        canvas.globalAlpha = bOpacity;
+        canvas.fillStyle = blackoutColour;
+        canvas.fillRect(0,0,width,720);
+        needsRedraw = true;
+    } else {
+        needsRedraw = false;
+    }
 }
 
 waifuCanvas.animationLoop = function() {
+    if(blackoutTimeout && audio.context.currentTime > blackoutTimeout) {
+        waifuCanvas.clearBlackout();
+    }
     if(blurStart && blurDistance < 0.3) {
         blurDistance = 0;
         blurStart = 0;
@@ -121,7 +136,15 @@ waifuCanvas.setColour = function(colour) {
     needsRedraw = true;
 }
 
-waifuCanvas.blackout = function() {
+waifuCanvas.blackout = function(whiteout) {
+    if (typeof(whiteout)==='undefined') whiteout = false;
+    if(whiteout) {
+        blackoutColour = "#FFF";
+    } else {
+        blackoutColour = "#000";
+    }
+    blackoutTimeout = 0; // indefinite
+    blackoutStart = audio.context.currentTime;
     blackout = true;
     needsRedraw = true;
 }
@@ -129,9 +152,18 @@ waifuCanvas.blackout = function() {
 // for song changes
 waifuCanvas.clearBlackout = function() {
     blackout = false;
+    blackoutTimeout = 0;
     needsRedraw = true;
 }
 
+waifuCanvas.shortBlackout = function(beatTime) {
+    waifuCanvas.blackout();
+    GetRandomWaifu();
+    blackoutTimeout = audio.context.currentTime + beatTime / 1.7;
+    // looks better if we go right to black
+    blackoutStart = 0;
+}
+
 waifuCanvas.xBlur = function() {
     blurStart = audio.context.currentTime;
     blurDistance = blurAmount;
@@ -146,4 +178,20 @@ waifuCanvas.yBlur = function() {
     xBlur = false;
     yBlur = true;
     needsRedraw = true;
+}
+
+waifuCanvas.setBlurDecay = function(decay) {
+    blurDecay = decay;
+}
+
+waifuCanvas.setBlurIterations = function(iterations) {
+    blurIterations = iterations;
+    blurDelta = blurAmount / blurIterations;
+    blurAlpha = 1/(blurIterations/2);
+}
+
+waifuCanvas.setBlurAmount = function(amount) {
+    blurAmount = amount;
+    blurMin = -blurAmount/2;
+    blurMax = blurAmount/2;
 }
\ No newline at end of file