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

Main change: Use many image divs instead of changing the background - saves 8ms per image in Chrome

Browse Source
serial
William Toohey 10 years ago
parent 34f897f72e
commit d3ee953bfd
3 changed files with 140 additions and 86 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. 36
      0x40.js
  2. 146
      index.html
  3. 44
      style.css

36
0x40.js
Unescape View File

@ -1382,7 +1382,15 @@ var rgSongs = [
name: "Pendulum - Propane Nightmares", name: "Pendulum - Propane Nightmares",
source: "https://www.youtube.com/watch?v=y2j5uMYTnDE", source: "https://www.youtube.com/watch?v=y2j5uMYTnDE",
rhythm: "o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox..x..x.x.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.xxxxxxxxxxxxxxo..ox..oo.oox...o..ox..oo.oox.xxo..ox..oo.oox...o..ox..oo.oox.xxo..ox..oo.oox...o..ox..oo.oox.xxo..ox..oo.oox...o..ox..o.xoox.o." rhythm: "o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox..x..x.x.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.x..ox.o.x..xx.o.x..ox.o.x..ox.o.xxxxxxxxxxxxxxo..ox..oo.oox...o..ox..oo.oox.xxo..ox..oo.oox...o..ox..oo.oox.xxo..ox..oo.oox...o..ox..oo.oox.xxo..ox..oo.oox...o..ox..o.xoox.o."
} },
{
pack: 3,
file: "songs/loop_Sail.mp3",
name: "AWOLNation - Sail",
rhythm: "x..::.+.x...+...x..::.+.x:.:+...x..::.+.x...+...x..::.+.x::::...",
buildUp: "songs/build_Sail.mp3",
buildUpRhythm: ".....+...........o...+..........o:...+...........o...+...o...+.o.:..."
},
]; ];
var nCurrentColor = 0; var nCurrentColor = 0;
@ -1390,20 +1398,16 @@ var nCurrentWaifu = 0;
var nColorX, nColorY, nColorZ; var nColorX, nColorY, nColorZ;
/*
function GetRandomWaifu() function GetRandomWaifu()
{ {
var x = 0; var tmp = Math.round((Math.random() * (waifus.length - 1)));
while(x++ < 100) if(tmp == nCurrentWaifu) {
{ return GetRandomWaifu();
var tmp = Math.round((Math.random() * (waifus.length - 1))); }
waifu = waifus[tmp]; nCurrentWaifu = tmp;
if(waifu && waifu.texture) { return waifus[tmp];
nCurrentWaifu = tmp; }
return waifu;
}
}
}*/
function pad(n, width, z) { function pad(n, width, z) {
z = z || '0'; z = z || '0';
@ -1422,7 +1426,11 @@ function rgbToHex(rgb) {
function RequestNextColor() function RequestNextColor()
{ {
var rgb = new Array; var rgb = new Array;
nCurrentColor = (nCurrentColor + Math.round( (Math.random() * (colors.length - 2) ) ) + 1) % colors.length; var tmp = (nCurrentColor + Math.round( (Math.random() * (colors.length - 2) ) ) + 1) % colors.length;
if(tmp == nCurrentColor) {
return RequestNextColor();
}
nCurrentColor = tmp;
nColorX = nCurrentColor % 4; nColorX = nCurrentColor % 4;
nColorY = parseInt(nCurrentColor / 4) % 4; nColorY = parseInt(nCurrentColor / 4) % 4;

146
index.html
Unescape View File

@ -2,16 +2,20 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<!-- <!--
TODO: TODO:
Clean up the damn code Clean up the damn code
Do the damn thesis and team project if you're not mon, don't read any further, it's pretty bad JS
Loading screen
Volume controls Loading screen
Prettier ui Volume controls
Song shuffle Prettier ui
Image shuffle Song shuffle
Image pause Image pause
Fine tune blur Fine tune blur
Keyboard shortcuts
Different colour palettes
External respacks
Change short blackout to beat length / 1.7
Blur into blackout? iunno
--> -->
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@ -19,14 +23,14 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0">
<filter id="blur"> <filter id="blur" filterRes="1">
<feGaussianBlur stdDeviation="0 0"> <feGaussianBlur stdDeviation="0 0">
<animate attributeName="stdDeviation" attributeType="XML" <animate attributeName="stdDeviation" attributeType="XML"
begin="indefinite" end="indefinite" dur="0.1s" begin="indefinite" end="indefinite" dur="0.1s"
fill="freeze" from="0 60" to="0 0"/> fill="freeze" from="0 70" to="0 0"/>
<animate attributeName="stdDeviation" attributeType="XML" <animate attributeName="stdDeviation" attributeType="XML"
begin="indefinite" end="indefinite" dur="0.1s" begin="indefinite" end="indefinite" dur="0.1s"
fill="freeze" from="60 0" to="0 0"/> fill="freeze" from="70 0" to="0 0"/>
</feGaussianBlur> </feGaussianBlur>
</filter> </filter>
</svg> </svg>
@ -39,8 +43,10 @@
</style> </style>
<script type="text/javascript" src="0x40.js"></script> <script type="text/javascript" src="0x40.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//debug
var noAutoPlay = false;
var leftToLoad = waifus.length; var leftToLoad = waifus.length;
var snip = 0;
var initialLoad = true; var initialLoad = true;
var shortBlackout = false; var shortBlackout = false;
@ -49,8 +55,6 @@
// Seconds! // Seconds!
var animationLookAhead = 0.2; var animationLookAhead = 0.2;
var waifuIndex = 0;
var tmpSong = {}; var tmpSong = {};
//-------------- //--------------
@ -204,8 +208,6 @@
// I probably shouldn't have so much on one line // I probably shouldn't have so much on one line
document.getElementById("beatCount").innerHTML = "B=0x" + pad(bp < 0 ? 0: loopBeat(bp).toString(16).toUpperCase(), 4); document.getElementById("beatCount").innerHTML = "B=0x" + pad(bp < 0 ? 0: loopBeat(bp).toString(16).toUpperCase(), 4);
if(beat != '.') { if(beat != '.') {
var waifuDiv = document.getElementById("waifu");
if(beat == '|') { if(beat == '|') {
shortBlackout = true; shortBlackout = true;
document.getElementById("blackout").style.display = "block"; document.getElementById("blackout").style.display = "block";
@ -217,15 +219,22 @@
} else { } else {
document.getElementById("blackout").style.display = "none"; document.getElementById("blackout").style.display = "none";
} }
if(beat != ':' && beat != 'O' && beat != 'X') {
var waifu = GetRandomWaifu();
var waifuDiv = document.getElementsByClassName('waifuImg')[nCurrentWaifu];
current = document.getElementsByClassName('active');
if(current.length) {
current[0].style.display = "none";
current[0].className = "waifuImg";
}
waifuDiv.style.display = "block";
waifuDiv.className = "waifuImg active";
document.getElementById("waifuName").innerHTML = waifu.name;
}
if(beat != '*' && beat != 'X' && beat != 'O') { if(beat != '*' && beat != 'X' && beat != 'O') {
document.getElementById("waifuColour").style.backgroundColor = c; document.getElementById("waifuColour").style.backgroundColor = c;
document.getElementById("colourName").innerHTML = colors[cc]; document.getElementById("colourName").innerHTML = colors[cc];
} }
if(beat != ':' && beat != 'O' && beat != 'X') {
var waifu = waifus[waifuIndex++%waifus.length];
waifuDiv.style.backgroundImage = 'url("images/' + waifu.file + '")';
document.getElementById("waifuName").innerHTML = waifu.name;
}
if(beat.toLowerCase() == 'o') { if(beat.toLowerCase() == 'o') {
$("#blur animate").get(1).beginElement(); $("#blur animate").get(1).beginElement();
} }
@ -259,7 +268,7 @@
function(buffer) { function(buffer) {
tmpSong[tmpArray] = trimSilence(buffer); tmpSong[tmpArray] = trimSilence(buffer);
if(!--leftToLoad) { if(!--leftToLoad) {
onLoaded(index); onFilesLoaded(index);
} }
}, },
function() { function() {
@ -271,12 +280,8 @@
} }
function onLoaded(index) { function onFilesLoaded(index) {
var buf; var buf;
if(initialLoad) {
document.getElementById('waifu').className = "loaded";
initialLoad = false;
}
// is there a buildup? // is there a buildup?
if(tmpSong[0]) { if(tmpSong[0]) {
buf = concatenateAudioBuffers(tmpSong[0],tmpSong[1]); buf = concatenateAudioBuffers(tmpSong[0],tmpSong[1]);
@ -288,33 +293,14 @@
audio.buffer[index] = buf; audio.buffer[index] = buf;
if(initialLoad) {
document.getElementById('waifu').className = "loaded";
initialLoad = false;
if(noAutoPlay)
return;
}
audio.playIndex(index); audio.playIndex(index);
} }
//-----------------------------
// Check Web Audio API Support
//-----------------------------
try {
// More info at http://caniuse.com/#feat=audio-api
window.AudioContext = window.AudioContext || window.webkitAudioContext;
audio.context = new window.AudioContext();
} catch(e) {
audio.proceed = false;
alert('Web Audio API not supported in this browser.');
}
// preloads, don't update leftToLoad as that's up top
for(var waifu in waifus) {
o = document.createElement('img');
o.src = "images/" + waifus[waifu].file;
o.onload = function() {if(!--leftToLoad) onLoaded(0);};
}
if (audio.proceed) {
audio.playIndex(0);
animationLoop();
timerLoop();
}
// because MP3 is bad // because MP3 is bad
function trimSilence(buffer) { function trimSilence(buffer) {
@ -381,25 +367,65 @@
} }
return tmp; return tmp;
}; };
window.onload = function() {
// Check Web Audio API Support
try {
// More info at http://caniuse.com/#feat=audio-api
window.AudioContext = window.AudioContext || window.webkitAudioContext;
audio.context = new window.AudioContext();
} catch(e) {
audio.proceed = false;
alert('Web Audio API not supported in this browser.');
}
// preloads, don't update leftToLoad as that's up top
for(var waifu in waifus) {
o = document.createElement('img');
o.src = "images/" + waifus[waifu].file;
o.onload = function() {if(!--leftToLoad) onFilesLoaded(0);};
}
// actual images
var container = document.getElementById('waifu');
for(var waifu in waifus) {
o = document.createElement('div');
o.style.backgroundImage = 'url("images/' + waifus[waifu].file + '")';
o.className = "waifuImg";
container.appendChild(o);
}
var megumi = document.getElementsByClassName("waifuImg")[0];
megumi.style.display = "block";
megumi.className = "waifuImg active";
setTimeout( function() {
if (audio.proceed) {
audio.playIndex(0);
animationLoop();
timerLoop();
}
}, 400);
};
</script> </script>
</head> </head>
<body> <body>
<div id="blackout"></div>
<div id="waifu"></div>
<div id="waifuColour"></div>
<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>
<a href="#" onclick="void(audio.prev());">prev</a> <a href="#" onclick="void(audio.prev());">prev</a>
<a href="#" onclick="void(audio.next());">next</a> <a href="#" onclick="void(audio.next());">next</a>
<div id="beatCount">B=0x0000</div>
<div id="timer">T=0x0000</div>
<div id="songname"></div> <div id="songname"></div>
<div id="beets"></div> <div id="beets"></div>
<div id="waifuName"></div> <div id="waifuName"></div>
<div id="colourName"></div> <div id="colourName"></div>
<div id="beatCount"></div>
<div id="timer"></div>
</div> </div>
<div id="blackout"></div>
<div id="waifu"></div>
<div id="waifuColour"></div>
</body> </body>
</html> </html>

44
style.css
Unescape View File

@ -1,8 +1,8 @@
#waifu { body {
background: url("images/Megumi.png") no-repeat center center fixed; background-color:#ffffff;
-webkit-background-size: cover; }
background-size: cover;
#waifu {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -11,18 +11,36 @@
z-index: -10; z-index: -10;
opacity: 0; opacity: 0;
#-webkit-transform: scale(3);
#transform: scale(3);
#-webkit-transform-origin: top left;
#transform-origin: top left;
} }
#waifu.loaded { #waifu.loaded {
animation-name: fadein; animation-name: fadein;
animation-duration: 1s; animation-duration: 1s;
opacity: 255; opacity: 1;
} }
#waifuColour { .waifuImg {
opacity: 0.69; background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
display: none;
}
-mix-blend-mode: hard-light; .waifuImg.active {
display: block;
}
#waifuColour {
opacity: 0.7;
mix-blend-mode: hard-light;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -46,11 +64,13 @@
font-family: monospace; font-family: monospace;
background-color:#ffffff; background-color:#ffffff;
width:800px; width:800px;
position: relative; position: absolute;
z-index 2; top: 10px;
left: 10px;
z-index: 2;
} }
@keyframes fadein { @keyframes fadein {
from {opacity: 0;} from {opacity: 0;}
to {opacity: 255;} to {opacity: 1;}
} }
Write Preview
Loading…
Cancel
Save