From d3ee953bfdf8905c2b6d6b71a91bbbdc1628f045 Mon Sep 17 00:00:00 2001 From: William Toohey Date: Sat, 9 May 2015 22:09:59 +1000 Subject: [PATCH] Main change: Use many image divs instead of changing the background - saves 8ms per image in Chrome --- 0x40.js | 36 ++++++++----- index.html | 146 +++++++++++++++++++++++++++++++---------------------- style.css | 44 +++++++++++----- 3 files changed, 140 insertions(+), 86 deletions(-) diff --git a/0x40.js b/0x40.js index 0b1aebd..68dcb3c 100644 --- a/0x40.js +++ b/0x40.js @@ -1382,7 +1382,15 @@ var rgSongs = [ name: "Pendulum - Propane Nightmares", 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." - } + }, + { + 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; @@ -1390,20 +1398,16 @@ var nCurrentWaifu = 0; var nColorX, nColorY, nColorZ; -/* + function GetRandomWaifu() { - var x = 0; - while(x++ < 100) - { - var tmp = Math.round((Math.random() * (waifus.length - 1))); - waifu = waifus[tmp]; - if(waifu && waifu.texture) { - nCurrentWaifu = tmp; - return waifu; - } - } -}*/ + var tmp = Math.round((Math.random() * (waifus.length - 1))); + if(tmp == nCurrentWaifu) { + return GetRandomWaifu(); + } + nCurrentWaifu = tmp; + return waifus[tmp]; +} function pad(n, width, z) { z = z || '0'; @@ -1422,7 +1426,11 @@ function rgbToHex(rgb) { function RequestNextColor() { 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; nColorY = parseInt(nCurrentColor / 4) % 4; diff --git a/index.html b/index.html index 956bc00..5895fde 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,20 @@ @@ -19,14 +23,14 @@ - + + fill="freeze" from="0 70" to="0 0"/> + fill="freeze" from="70 0" to="0 0"/> @@ -39,8 +43,10 @@ -
- -
-
stop play prev next +
B=0x0000
+
T=0x0000
-
-
+ +
+ +
+
\ No newline at end of file diff --git a/style.css b/style.css index d300716..66ba8c3 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,8 @@ -#waifu { - background: url("images/Megumi.png") no-repeat center center fixed; - -webkit-background-size: cover; - background-size: cover; - +body { + background-color:#ffffff; +} + +#waifu { width: 100%; height: 100%; position: absolute; @@ -11,18 +11,36 @@ z-index: -10; opacity: 0; + + #-webkit-transform: scale(3); + #transform: scale(3); + #-webkit-transform-origin: top left; + #transform-origin: top left; } #waifu.loaded { animation-name: fadein; animation-duration: 1s; - opacity: 255; + opacity: 1; } -#waifuColour { - opacity: 0.69; +.waifuImg { + 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%; height: 100%; position: absolute; @@ -46,11 +64,13 @@ font-family: monospace; background-color:#ffffff; width:800px; - position: relative; - z-index 2; + position: absolute; + top: 10px; + left: 10px; + z-index: 2; } @keyframes fadein { from {opacity: 0;} - to {opacity: 255;} + to {opacity: 1;} } \ No newline at end of file