Disco Laser Dance Rave

Made with love for Sarah :)

by ChaseMoskal

HTML

<div class="colors">
    <button>Rolling</button>
    <button>Amble</button>
    <button>Hyper</button>
</div>

CSS

html,body { height:100%; }

.colors {
    width:100%; height:100%;
    background-color:hsl(0,100%,50%);
}

JavaScript

$(function(){
    window.hue=0.0;
    window.disco_speed=1.0; // 4.0 = 1 css-hsl() hue point per second
    function discoLaserDanceRave () {
        $('.colors').css('background-color','hsl('+window.hue+',100%,50%)');
        window.hue+=window.disco_speed/4;
        if (window.hue>360) window.hue=window.hue-360;
        setTimeout(discoLaserDanceRave,10);
    }
    discoLaserDanceRave();
    $('.colors>button').click(function(){
        switch ($(this).text().toLowerCase()) {
            case 'rolling': window.disco_speed=1; break;
            case 'amble':   window.disco_speed=4; break;
            case 'hyper':   window.disco_speed=24; break;
        }
    });
});