New font, new styles, better beat handling, better blackouts

10 years ago · db16a57656
parent d7844fa08b
commit db16a57656
4 changed files with 183 additions and 53 deletions
--- a/PetMe64.woff
+++ b/PetMe64.woff
--- 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>
--- 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;
@ -91,3 +147,7 @@ body {
    from {opacity: 1;}
    to {opacity: 0;}
 }
+@keyframes textfadeout {
+    from {color: rgba(255,255,255,1);}
+    to {color: rgba(255,255,255,0);}
+}
--- 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";
+        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);
-    
+    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;
@ -147,3 +179,19 @@ waifuCanvas.yBlur = function() {
    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;
+}