cynic
/
0x40-web
mirror of https://github.com/kurisufriend/0x40-web
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
serial
William Toohey 10 years ago
parent d7844fa08b
commit db16a57656
4 changed files with 183 additions and 53 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      PetMe64.woff
  2. 76
      index.html
  3. 76
      style.css
  4. 84
      waifuCanvas.js

BIN
PetMe64.woff
View File

Binary file not shown.

76
index.html
Unescape View File

@ -12,7 +12,6 @@
Image pause / manual advance Image pause / manual advance
Different colour palettes Different colour palettes
External respacks External respacks
Change short blackout to beat length / 1.7 + change image
Blur into blackout? iunno Blur into blackout? iunno
--> -->
<head> <head>
@ -25,7 +24,7 @@
<script type="text/javascript" src="audioUtils.js"></script> <script type="text/javascript" src="audioUtils.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//debug //debug
var skipPreloader = true; var skipPreloader = false;
var filesLoaded = 0; var filesLoaded = 0;
var initialLoad = 0; var initialLoad = 0;
@ -90,6 +89,7 @@
audio.stop = function() { audio.stop = function() {
if (audio.current_song && audio.current_song._playing) { if (audio.current_song && audio.current_song._playing) {
updateBeatView(0);
audio.current_song.stop(); audio.current_song.stop();
audio.current_song = null; audio.current_song = null;
} }
@ -171,7 +171,8 @@
for(var beatTime = audio.beat_pointer * cur._beatWidth; beatTime < now; for(var beatTime = audio.beat_pointer * cur._beatWidth; beatTime < now;
beatTime = ++audio.beat_pointer * cur._beatWidth) { beatTime = ++audio.beat_pointer * cur._beatWidth) {
var beat = getBeat(audio.beat_pointer); 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(""); 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 // we have changed song since we were scheduled
if(current != audio.current_song) if(current != audio.current_song)
return; return;
@ -197,35 +198,55 @@
accent.offsetWidth = accent.offsetWidth; accent.offsetWidth = accent.offsetWidth;
accent.className = "beetView fade"; accent.className = "beetView fade";
if(beat == '|') { switch(beat) {
shortBlackout = true; case 'X':
case 'x':
waifuCanvas.yBlur();
break;
case 'O':
case 'o':
waifuCanvas.xBlur();
break;
case '+':
waifuCanvas.xBlur();
waifuCanvas.blackout(); 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 == '+') { if ([".", "+", "|", "¤"].indexOf(beat) == -1) {
waifuCanvas.blackout();
return;
} else {
waifuCanvas.clearBlackout(); 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(); waifuCanvas.newWaifu();
document.getElementById("waifuName").innerHTML = waifus[nCurrentWaifu].name; 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 // get around issues on mobile where pointer-events don't work
document.getElementById("preloader").style.display = "none"; document.getElementById("preloader").style.display = "none";
document.getElementById("waifu").className = "loaded" document.getElementById("waifu").className = "loaded"
updateBeatView(-1);
// free dat memory // free dat memory
preloaderSong = null; preloaderSong = null;
} }
@ -344,7 +366,7 @@
</div> </div>
<div class="ui" id="beets"> <div class="ui" id="beets">
<div class="beetView" id="beetLeft"></div> <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 class="beetView" id="beetRight"></div>
</div> </div>
<canvas id="waifu" width="1280" height="720"></canvas> <canvas id="waifu" width="1280" height="720"></canvas>

76
style.css
Unescape View File

@ -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 { html, body {
height: 100%; height: 100%;
margin: 0; padding: 0; margin: 0; padding: 0;
@ -9,12 +19,14 @@ body {
} }
.ui { .ui {
background-color:#ffffff; border: 3px solid #000;
font-family: monospace; background-color: rgba(200,200,200,0.5);
font-family: 'PetMe64Web';
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
z-index: 3; z-index: 3;
padding: 5px;
} }
#controls { #controls {
@ -23,21 +35,65 @@ body {
#beets { #beets {
top: 0px; top: 0px;
height: 20px;
overflow:hidden;
#display:table-cell;
#vertical-align:middle;
#padding: 5px;
} }
.beetView { .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 { #beetAccent {
font-size: 50px; #font-size: 40px;
opacity: 1; margin-left: -10px;
font-size: 2em;
color: rgba(255,255,255,1);
z-index: 2;
padding: 7px;
border-radius: 50%;
} }
#beetAccent.fade { #beetAccent.fade {
animation-name: fadeout; animation-name: textfadeout;
animation-duration: 0.2s; animation-duration: 0.2s;
opacity: 0; color: rgba(255,255,255,0);
} }
#waifu { #waifu {
@ -66,7 +122,7 @@ body {
display:flex; display:flex;
justify-content:center; justify-content:center;
align-items:center; align-items:center;
font-family: monospace; font-family: 'PetMe64Web';
font-size: 30pt; font-size: 30pt;
position: absolute; position: absolute;
@ -91,3 +147,7 @@ body {
from {opacity: 1;} from {opacity: 1;}
to {opacity: 0;} to {opacity: 0;}
} }
@keyframes textfadeout {
from {color: rgba(255,255,255,1);}
to {color: rgba(255,255,255,0);}
}

84
waifuCanvas.js
Unescape View File

@ -4,13 +4,7 @@ var needsRedraw = false;
var waifuImgs = new Array(); var waifuImgs = new Array();
var waifuColour = "#FFF"; var waifuColour = "#FFF";
// constant var blurDecay, blurAmount, blurIterations, blurMin, blurMax, blurDelta; // set later
var blurIterations = 20; // quality
var blurMin = -blurIterations/2;
var blurMax = blurIterations/2;
var blurAlpha = 1/(blurIterations/2);
var blurDecay = 25;
var blurAmount = 15;
// dynamic // dynamic
var blurStart = 0; var blurStart = 0;
var blurDistance = 0; var blurDistance = 0;
@ -19,10 +13,16 @@ var yBlur = false;
var blackout = false; var blackout = false;
var shortBlackout = false; var shortBlackout = false;
var blackoutColour = "#000"; // for the whiteout character
var blackoutTimeout;
waifuCanvas = {}; waifuCanvas = {};
waifuCanvas.init = function() { waifuCanvas.init = function() {
waifuCanvas.blendMode = "hard-light";
waifuCanvas.setBlurAmount(15);
waifuCanvas.setBlurIterations(31);
waifuCanvas.setBlurDecay(25);
canvas = document.getElementById("waifu").getContext("2d"); canvas = document.getElementById("waifu").getContext("2d");
window.addEventListener('resize', waifuCanvas.resize); window.addEventListener('resize', waifuCanvas.resize);
waifuCanvas.resize(); waifuCanvas.resize();
@ -47,16 +47,22 @@ waifuCanvas.preload = function() {
waifuCanvas.redraw = function() { waifuCanvas.redraw = function() {
var offset; // for centering/right/left align var offset; // for centering/right/left align
var bOpacity;
var width = canvas.canvas.width; var width = canvas.canvas.width;
var image = waifuImgs[nCurrentWaifu]; var image = waifuImgs[nCurrentWaifu];
var cTime = audio.context.currentTime;
// white BG for the hard light filter // white BG for the hard light filter
canvas.globalAlpha = 1; canvas.globalAlpha = 1;
canvas.globalCompositeOperation = "source-over"; canvas.globalCompositeOperation = "source-over";
if(blackout) { if(blackout) {
canvas.fillStyle = "#000"; bOpacity = (cTime - blackoutStart)*10; // original is 3 frames, this is close
canvas.fillRect(0,0,width,720); if(bOpacity > 1) { // optimise the draw
needsRedraw = false; canvas.fillStyle = blackoutColour;
return; canvas.fillRect(0,0,width,720);
needsRedraw = false;
return;
}
} else { } else {
canvas.fillStyle = "#FFF"; canvas.fillStyle = "#FFF";
canvas.fillRect(0,0,width,720); canvas.fillRect(0,0,width,720);
@ -75,15 +81,15 @@ waifuCanvas.redraw = function() {
} }
if(xBlur || yBlur) { if(xBlur || yBlur) {
canvas.globalAlpha = blurAlpha; canvas.globalAlpha = blurAlpha;
var delta = audio.context.currentTime - blurStart; var delta = cTime - blurStart;
blurDistance = blurAmount * Math.exp(-blurDecay * delta); blurDistance = blurAmount * Math.exp(-blurDecay * delta);
} }
if(xBlur) { 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); canvas.drawImage(image, Math.floor(blurDistance * i) + offset, 0);
} }
} else if(yBlur) { } 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)); canvas.drawImage(image, offset, Math.floor(blurDistance * i));
} }
} else { } else {
@ -92,13 +98,22 @@ waifuCanvas.redraw = function() {
} }
canvas.globalAlpha = 0.7; canvas.globalAlpha = 0.7;
canvas.fillStyle = waifuColour; canvas.fillStyle = waifuColour;
canvas.globalCompositeOperation = "hard-light"; canvas.globalCompositeOperation = waifuCanvas.blendMode;
canvas.fillRect(0,0,width,720); canvas.fillRect(0,0,width,720);
if(blackout) {
needsRedraw = false; canvas.globalAlpha = bOpacity;
canvas.fillStyle = blackoutColour;
canvas.fillRect(0,0,width,720);
needsRedraw = true;
} else {
needsRedraw = false;
}
} }
waifuCanvas.animationLoop = function() { waifuCanvas.animationLoop = function() {
if(blackoutTimeout && audio.context.currentTime > blackoutTimeout) {
waifuCanvas.clearBlackout();
}
if(blurStart && blurDistance < 0.3) { if(blurStart && blurDistance < 0.3) {
blurDistance = 0; blurDistance = 0;
blurStart = 0; blurStart = 0;
@ -121,7 +136,15 @@ waifuCanvas.setColour = function(colour) {
needsRedraw = true; 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; blackout = true;
needsRedraw = true; needsRedraw = true;
} }
@ -129,9 +152,18 @@ waifuCanvas.blackout = function() {
// for song changes // for song changes
waifuCanvas.clearBlackout = function() { waifuCanvas.clearBlackout = function() {
blackout = false; blackout = false;
blackoutTimeout = 0;
needsRedraw = true; 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() { waifuCanvas.xBlur = function() {
blurStart = audio.context.currentTime; blurStart = audio.context.currentTime;
blurDistance = blurAmount; blurDistance = blurAmount;
@ -147,3 +179,19 @@ waifuCanvas.yBlur = function() {
yBlur = true; yBlur = true;
needsRedraw = 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;
}
Write Preview
Loading…
Cancel
Save