Skip to content

Instantly share code, notes, and snippets.

@FliiFe

FliiFe/bgyjpb.markdown

Last active Jan 28, 2017
Embed
What would you like to do?
SDD POWA
<!-- Logo: Kwizzy (Alexis Visco) -->
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="500px" viewBox="0 0 300 500" enable-background="new 0 0 300 500" xml:space="preserve">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M67.777,371.023c11.307-14.219,20.198-25.402,33.521-42.16
c-18.791,0-31.167,0.422-43.507-0.087c-27.218-1.113-41.142-14.024-41.422-40.845c-0.638-60.656-0.501-121.319-0.043-181.976
c0.188-25.385,14.507-38.872,39.495-40.178c16.498-0.856,33.162-1.295,49.602-0.027c35.151,2.715,67.736,1.188,86.855-35.487
c4.77-9.146,13.995-11.166,24.462-7.638c0.659,10.487-8.254,15.414-13.615,21.896c-39.816,48.162-80.304,95.767-120.066,143.972
c-24.992,30.303-17.834,56.386,18.409,70.414c35.852,13.877,44.107,43.628,20.617,74.311
C92.938,371.289,92.938,371.289,67.777,371.023z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M232.024,140.382c-10.152,13.615-19.173,25.713-31.842,42.712
c17.539,0,29.955-0.465,42.32,0.095c27.104,1.243,40.832,14.243,41.107,41.119c0.615,59.718,0.572,119.458,0.07,179.18
c-0.24,28.782-13.59,42.058-42.225,42.856c-24.785,0.696-49.72,1.585-74.394-0.254c-21.606-1.606-36.553,5.354-48.726,23.07
c-7.875,11.461-15.534,26.663-38.121,18.698c18.064-21.723,35.353-42.582,52.723-63.382c28.854-34.554,58.22-68.688,86.482-103.716
c22.082-27.367,13.93-54.567-18.913-67.296c-39.439-15.286-47.789-44.676-19.467-76.981
C194.114,161.571,200.8,135.126,232.024,140.382z"/>
</g>
</svg>
<div id="music">
<audio loop autoplay="" id="audio">
<source src="https://alexisvisco.github.io/soshmusic.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
</div>
<div id="bottomline">Press &lt;Space&gt; to pause</div>
/* Code: FliiFe (Theophile Cailliau).
Idea: Kwizzy (Alexis Visco), Compagny912 */
function changeBg(r, g, b) {
document.body.style.background = '#' + r + g + b;
}
var logo = document.getElementById('logo');
function changeLogo(r, g, b) {
logo.style.fill = '#' + r + g + b;
}
function randHex() {
return "abcdef0123456789"[Math.floor(Math.random() * 16)];
}
function randomColourValue() {
return randHex() + randHex();
}
function compareColours(first, second) {
first = first.map(s => {return parseInt(s, 16)});
second = second.map(s => {return parseInt(s, 16)});
var reddiff = Math.abs(first[0]-second[0]);
var greendiff = Math.abs(first[1]-second[1]);
var bluediff = Math.abs(first[2]-second[2]);
var globaldiff = (reddiff + greendiff + bluediff)/(3*255);
console.log('Global diff between', first, 'and', second, 'is', globaldiff);
return Math.floor(globaldiff*100);
}
window.even = true;
window.logoColour = [0, 0, 0];
window.bgColour = [255, 255, 255];
window.lastChanged = Date.now();
function mainLoop() {
if (window.even = !window.even) {
window.logoColour = [randomColourValue(), randomColourValue(), randomColourValue()];
}
window.bgColour = [randomColourValue(), randomColourValue(), randomColourValue()];
while(compareColours(window.logoColour, window.bgColour) < 40) {
window.bgColour = [randomColourValue(), randomColourValue(), randomColourValue()];
}
changeLogo.apply(this, window.logoColour);
changeBg.apply(this, window.bgColour);
window.lastChanged = Date.now();
}
var audio = document.getElementById('audio');
audio.onplay = function() {
setTimeout(function() {
window.interval = setInterval(mainLoop, 512);
}, window.remaining || 0);
};
audio.onpause = function() {
clearInterval(window.interval);
window.remaining = 216 - ((Date.now() - window.lastChanged) % 516);
}
window.onkeypress = function(e) {
if(e.keyCode = 32) {
if(!audio.paused) {
audio.pause();
} else {
audio.play();
}
}
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 300px;
height: 500px;
transition-property: fill;
transition-duration: 250ms;
fill: #1369BF;
}
body {
transition-property: background;
transition-duration: 250ms;
background: #1C1F21;
font-family: 'Lato Bold', sans-serif;
font-size: 20px;
font-style: italic;
overflow: hidden;
}
#bottomline {
position: absolute;
color: #CCCCCC;
bottom: 5px;
animation-name: slide;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
width: 500px;
}
@keyframes slide {
from {
margin-left: 100%;
opacity: 0;
}
30% {
opacity: 0;
}
35% {
opacity: 1;
}
85% {
opacity: 1;
}
90% {
opacity: 0;
}
to {
margin-left: 0%;
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment