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

Waifus won't repeat as often, keyboard shortcuts, preloader works better

Browse Source
serial
William Toohey 10 years ago
parent bf556b1996
commit eaaaa5b299
4 changed files with 106 additions and 46 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. 8
      0x40.js
  2. 74
      index_canvas.html
  3. 51
      style_canvas.css
  4. 13
      waifuCanvas.js

8
0x40.js
Unescape View File

@ -1400,6 +1400,8 @@ var rgSongs = [
var nCurrentColor = 63; // start white var nCurrentColor = 63; // start white
var nCurrentWaifu = 0; var nCurrentWaifu = 0;
// initially hold megumi
var lastWaifus = [0];
var nColorX, nColorY, nColorZ; var nColorX, nColorY, nColorZ;
@ -1407,9 +1409,13 @@ var nColorX, nColorY, nColorZ;
function GetRandomWaifu() function GetRandomWaifu()
{ {
var tmp = Math.round((Math.random() * (waifus.length - 1))); var tmp = Math.round((Math.random() * (waifus.length - 1)));
if(tmp == nCurrentWaifu) { if(lastWaifus.indexOf(tmp) != -1) {
return GetRandomWaifu(); return GetRandomWaifu();
} }
lastWaifus.push(tmp);
while(lastWaifus.length > waifus.length / 2) {
lastWaifus.shift();
}
nCurrentWaifu = tmp; nCurrentWaifu = tmp;
return waifus[tmp]; return waifus[tmp];
} }

74
index_canvas.html
Unescape View File

@ -9,8 +9,7 @@
Volume controls Volume controls
Prettier ui Prettier ui
Song shuffle Song shuffle
Image pause Image pause / manual advance
Keyboard shortcuts
Different colour palettes Different colour palettes
External respacks External respacks
Change short blackout to beat length / 1.7 Change short blackout to beat length / 1.7
@ -24,10 +23,9 @@
<script type="text/javascript" src="0x40.js"></script> <script type="text/javascript" src="0x40.js"></script>
<script type="text/javascript" src="waifuCanvas.js"></script> <script type="text/javascript" src="waifuCanvas.js"></script>
<script type="text/javascript" src="audioUtils.js"></script> <script type="text/javascript" src="audioUtils.js"></script>
<script type="text/javascript" src="sizeof.compressed.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;
@ -42,14 +40,13 @@
beat_pointer: 0, beat_pointer: 0,
} }
audio.play = function() { // Why does this exist? For smooth preloader transition on FF
if(audio.current_song && audio.current_song._playing) { audio.prep = function() {
return;
}
var song = audio.songs[audio.current_index]; var song = audio.songs[audio.current_index];
document.getElementById("songname").innerHTML = song.name document.getElementById("songname").innerHTML = song.name
document.getElementById("blackout").style.display = "none"; document.getElementById("blackout").style.display = "none";
// stop() destroys the old, must recreate // stop() destroys the old, must recreate
var newSong = audio.context.createBufferSource() var newSong = audio.context.createBufferSource()
audio.current_song = newSong; audio.current_song = newSong;
@ -63,19 +60,27 @@
newSong._build = song.buildUpRhythm || ""; newSong._build = song.buildUpRhythm || "";
newSong._beats = newSong._build + song.rhythm; newSong._beats = newSong._build + song.rhythm;
audio.beat_pointer = -newSong._build.length;
newSong._loopWidth = newSong.loopLength / song.rhythm.length; newSong._loopWidth = newSong.loopLength / song.rhythm.length;
newSong._buildWidth = newSong._build ? newSong.loopStart / newSong._build.length : 0; newSong._buildWidth = newSong._build ? newSong.loopStart / newSong._build.length : 0;
newSong._beatWidth = newSong._buildWidth; newSong._beatWidth = newSong._buildWidth;
audio.beat_pointer = -newSong._build.length;
document.getElementById("beets").innerHTML = wrapBeats(0, 100); document.getElementById("beets").innerHTML = wrapBeats(0, 100);
document.getElementById("timer").innerHTML = "T=0x0000" document.getElementById("timer").innerHTML = "T=0x0000"
}
audio.play = function(delay) {
var cur = audio.current_song;
if(cur && cur._playing) {
return;
}
newSong.start(0); delay = delay ? delay: 0;
cur.start(audio.context.currentTime + delay);
// offset to after the build // offset to after the build
newSong._startTime = audio.context.currentTime + newSong.loopStart; cur._startTime = audio.context.currentTime + cur.loopStart + delay;
newSong._playing = true; cur._playing = true;
} }
audio.stop = function() { audio.stop = function() {
@ -103,6 +108,7 @@
audio.current_index = index; audio.current_index = index;
loadSong(audio.songs[index], function() { loadSong(audio.songs[index], function() {
audio.stop(); audio.stop();
audio.prep();
audio.play(); audio.play();
}); });
} }
@ -153,8 +159,6 @@
timerUpdate(); timerUpdate();
var cur = audio.current_song; var cur = audio.current_song;
if(!cur || !cur._playing) { if(!cur || !cur._playing) {
// DEBUG
waifuCanvas.animationLoop();
return; return;
} }
var now = currentTime(); var now = currentTime();
@ -209,10 +213,14 @@
} }
} }
function onFileLoad() { function onFileLoad(file) {
filesLoaded++; filesLoaded++;
var percent = Math.floor(filesLoaded / initialLoad * 0x40); var percent = Math.floor(filesLoaded / initialLoad * 0x40);
document.getElementById("preloader").innerHTML = '0x' + pad(percent.toString(16), 2); document.getElementById("preloader").innerHTML = '0x' + pad(percent.toString(16), 2);
// Destroy FF lag
if(!skipPreloader && file && file.name == "Madeon - Finale") {
audio.prep();
}
if(filesLoaded >= initialLoad) if(filesLoaded >= initialLoad)
onAllLoaded(); onAllLoaded();
} }
@ -224,20 +232,26 @@
document.getElementById("preloader").style.color = "#0F0"; document.getElementById("preloader").style.color = "#0F0";
if(skipPreloader) if(skipPreloader)
return; return;
var timeToFade = madeonPreload.loopStart -((audio.context.currentTime - preloaderSong.started) % madeonPreload.loopStart); var fileProgress = (audio.context.currentTime - preloaderSong.started) % madeonPreload.loopStart;
var timeToFade = madeonPreload.loopStart - fileProgress;
audio.play(preloaderSong.buffer.duration - fileProgress);
setTimeout( function() { setTimeout( function() {
document.getElementById("preloader").className = "loaded" document.getElementById("preloader").className = "loaded"
}, timeToFade * 1000); }, timeToFade * 1000);
// hacky disgusting chrome workaround // hacky disgusting chrome workaround
if (/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)){ if (/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)){
preloaderSong.stop(); preloaderSong.stop();
preloaderSong = chromeHacks(madeonPreload, madeonPreload.loopStart - timeToFade); preloaderSong = chromeHacks(madeonPreload, fileProgress);
} else { } else {
preloaderSong.loop = false; preloaderSong.loop = false;
} }
preloaderSong.onended = function() { preloaderSong.onended = function() {
// get around issues on mobile where pointer-events
// doesn't work
document.getElementById("preloader").style.display = "none";
document.getElementById("waifu").className = "loaded" document.getElementById("waifu").className = "loaded"
audio.playIndex(0); // free dat memory
preloaderSong = null;
} }
} }
@ -272,12 +286,15 @@
preloaderSong.loop = true; preloaderSong.loop = true;
preloaderSong.loopStart = 0; preloaderSong.loopStart = 0;
preloaderSong.loopEnd = song.loopStart; preloaderSong.loopEnd = song.loopStart;
preloaderSong.connect(audio.context.destination); preloaderSong.connect(audio.context.destination);
preloaderSong.started = audio.context.currentTime; preloaderSong.started = audio.context.currentTime;
preloaderSong.start(0); preloaderSong.start(0);
}); });
} else { } else {
document.getElementById("preloader").className = "loaded"; document.getElementById("preloader").className = "loaded";
document.getElementById("preloader").style.display = "none";
document.getElementById("waifu").className = "loaded"; document.getElementById("waifu").className = "loaded";
} }
@ -288,12 +305,30 @@
// preload images // preload images
waifuCanvas.preload(); waifuCanvas.preload();
}; };
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
break;
case 38: // up
audio.next();
break;
case 39: // right
break;
case 40: // down
audio.prev();
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
</script> </script>
</head> </head>
<body> <body>
<div id="preloader"> <div id="preloader">
0x00 0x00
</div> </div>
<div id="beets">.xoxoxoxoxoxo</div>
<canvas id="waifu" width="1280" height="720"></canvas>
<div id="controls"> <div id="controls">
<a href="#" onclick="void(audio.stop());">stop</a> <a href="#" onclick="void(audio.stop());">stop</a>
<a href="#" onclick="void(audio.play());">play</a> <a href="#" onclick="void(audio.play());">play</a>
@ -302,7 +337,6 @@
<div id="beatCount">B=0x0000</div> <div id="beatCount">B=0x0000</div>
<div id="timer">T=0x0000</div> <div id="timer">T=0x0000</div>
<div id="songname"></div> <div id="songname"></div>
<div id="beets"></div>
<div id="waifuName"></div> <div id="waifuName"></div>
<div id="colourName">white</div> <div id="colourName">white</div>
</div> </div>
@ -311,7 +345,5 @@
<div id="blackout"></div> <div id="blackout"></div>
<div id="waifuColour"></div> <div id="waifuColour"></div>
</div> </div>
<canvas id="waifu" width="1280" height="720"></canvas>
</body> </body>
</html> </html>

51
style_canvas.css
Unescape View File

@ -1,17 +1,37 @@
html, body {
height: 100%;
margin: 0; padding: 0;
}
body { body {
background-color:#ffffff; background-color:#ffffff;
height: 100%;
min-height: 100%;
margin: 0px;
} }
#waifu { #controls {
width: 100%; font-family: monospace;
background-color:#ffffff;
position: absolute;
bottom: 0px;
left: 50%;
z-index: 3;
}
#beets {
font-family: monospace;
background-color:#ffffff;
position: absolute;
top: 0px;
left: 50%;
z-index: 3;
}
#position: absolute; #waifu {
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0; padding: 0;
top: 0;
left: 0;
z-index: -10; z-index: -10;
opacity: 0; opacity: 0;
} }
@ -32,7 +52,7 @@ body {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -5; z-index: 1;
} }
#blackout { #blackout {
@ -44,7 +64,7 @@ body {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1; z-index: 2;
} }
#preloader { #preloader {
@ -65,23 +85,12 @@ body {
#preloader.loaded { #preloader.loaded {
opacity: 0; opacity: 0;
pointer-events:none;
animation-name: fadeout; animation-name: fadeout;
animation-duration: 3s; animation-duration: 3s;
-webkit-animation-name: fadeout; -webkit-animation-name: fadeout;
-webkit-animation-duration: 3s; -webkit-animation-duration: 3s;
} }
#controls {
font-family: monospace;
background-color:#ffffff;
width:800px;
#position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
@keyframes fadein { @keyframes fadein {
from {opacity: 0;} from {opacity: 0;}
to {opacity: 1;} to {opacity: 1;}

13
waifuCanvas.js
Unescape View File

@ -64,6 +64,19 @@ waifuCanvas.animationLoop = function() {
waifuCanvas.newWaifu = function() { waifuCanvas.newWaifu = function() {
GetRandomWaifu(); // increments the waifu counter 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; needsRedraw = true;
} }

Write Preview
Loading…
Cancel
Save