defis48/src/Mmi/Bundle/ChallengeBundle/Resources/public/js/main.js

var _nyan = 0;
var __nyan = [["+      o     +              o      ","    +             o     +       +  ","o          +                       ","    o  +           +        +      ","+        o     o       +        o  ","-_-_-_-_-_-_-_,------,      o      ","_-_-_-_-_-_-_-|   /\\_/\\            ","-_-_-_-_-_-_-~|__( ^ .^)  +     +  ","_-_-_-_-_-_-_-\"\"  \"\"               ","+      o         o   +       o     ","    +         +                    ","o        o         o      o     +  ","    o           +                  ","+      +     o        o      +     "],
    ["+      o     +              +      ","    o             o     o       +  ","o          +                       ","    +  o           +        o      ","o        o     o       +        o  ","_-_-_-_-_-_-_-,------,      +      ","-_-_-_-_-_-_-_|   /\\_/\\            ","_-_-_-_-_-_-_-|__( ^ .^)  o     +  ","-_-_-_-_-_-_-_ \"\"  \"\"              ","+      +         o   +       o     ","    o         +                    ","+        +         +      +     o  ","    +           o                  ","+      o     o        o      +     "]]
function nyan(){
    console.clear();
    console.log(__nyan[_nyan].join("\n"))
    if(_nyan == 0){ _nyan = 1; } else {	_nyan = 0; }
}
window.setInterval(nyan, 300);


$(document).ready(function () {

    jQuery.easing['jswing'] = jQuery.easing['swing'];

    jQuery.extend( jQuery.easing,
        {
            easeOutCirc: function (x, t, b, c, d) {
                return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
            }
        });

    $('header, main').fadeOut(0);


    $(window).load(function () {
        setTimeout(function () {
            $('#loader').fadeOut(2000);
            $('#pixel-grid').animate({
                opacity: 0
            }, 2000, function() {
                $('header, main').fadeIn(2000);
            });

            setTimeout(function () {
                var $target = $('#container');
                var middle = 60-(window.innerHeight/2);
                $target.scrollTo($('.active'), 1500,{ easing:'easeOutCirc', offset:{ top:middle, left:0 } });
                $('#pixel-grid').hide();
            }, 4000);
        }, 4000);

    });

    $('#container').scroll(function(){

        lastTimeMouseMoved = new Date().getTime();
        var t=setTimeout(function(){
            var currentTime = new Date().getTime();
            if(currentTime - lastTimeMouseMoved > 4000){
                var $target = $('#container');
                var middle = 60-(window.innerHeight/2);
                $target.scrollTo($('.active'), 1500,{ easing:'easeOutCirc', offset:{ top:middle, left:0 } });
            }
        },4000);

    });



    $(function () {

        var $pixelGrid = $('#pixel-grid');

        var pixelGrid = {

            canvas: null,
            c2d: null,
            canvasW: window.innerWidth,
            canvasH: window.innerHeight,
            bgColor: 'black',
            pixelColor: '#ffffff',
            numPixelsX: window.innerWidth/12,
            numPixelsY: window.innerHeight/12,
            pixelSize: 8,
            pixelSpacing: 4,
            pixelDeathFade: 100,
            pixelBornFade: 50,
            pixelMaxLife: 50,
            pixelMinLife: 25,
            pixelMaxOffLife: 50,
            pixelMinOffLife: 25,
            pixels: [],

            init: function () {
                var canvas = document.createElement('canvas');
                canvas.width = this.canvasW;
                canvas.height = this.canvasH;
                $pixelGrid.append(canvas);
                this.canvas = canvas;
                this.c2d = canvas.getContext('2d');

                this.initPixels();
                this.renderLoop();

                $pixelGrid.addClass('appear');
            },

            initPixels: function () {

                for (var y = 0; y < this.numPixelsY; y++) {
                    for (var x = 0; x < this.numPixelsX; x++) {
                        var pixel = this.randomizePixelAttrs(x, y);
                        this.pixels.push(pixel);
                    }
                }
            },

            randomizePixelAttrs: function (x, y) {

                var alpha = this.randomAlpha(),
                    self = this;

                var lit = true;
                if (alpha === 0.1) {
                    lit = false;
                }

                return {
                    xPos: x * this.pixelSize + (x * this.pixelSpacing),
                    yPos: y * this.pixelSize + (y * this.pixelSpacing),
                    alpha: 0,
                    maxAlpha: alpha,
                    life: Math.floor(Math.random() * self.pixelMaxLife - self.pixelMinLife + 1) + self.pixelMinLife,
                    offLife: Math.floor(Math.random() * self.pixelMaxOffLife - self.pixelMinOffLife + 1) + self.pixelMinOffLife,
                    isLit: lit,
                    dying: false,
                    deathFade: this.pixelDeathFade,
                    bornFade: this.pixelBornFade,
                    randomizeSelf: function () {

                        var alpha = self.randomAlpha();

                        var lit = true;
                        if (alpha === 0.1) {
                            lit = false;
                        }

                        this.alpha = 0;
                        this.maxAlpha = alpha;
                        this.life = Math.floor(Math.random() * self.pixelMaxLife - self.pixelMinLife + 1) + self.pixelMinLife;
                        this.offLife = Math.floor(Math.random() * self.pixelMaxOffLife - self.pixelMinOffLife + 1) + self.pixelMinOffLife;
                        this.isLit = lit;
                        this.dying = false;
                        this.deathFade = self.pixelDeathFade;
                        this.bornFade = self.pixelBornFade;
                    }
                };
            },

            randomAlpha: function () {

                var randStartAlpha = Math.floor(Math.random() * 101);

                // Fully lit (1)
                if (randStartAlpha > 90) {
                    return 1;
                }
                // Halt lit (0.5)
                else if (randStartAlpha > 80) {
                    return 0.5;
                }
                else {
                    return 0.1;
                }
            },

            renderLoop: function () {

                this.clearCanvas();
                this.renderPixels();

                window.requestAnimationFrame(function () {
                    this.renderLoop();
                }.bind(this));
            },

            renderPixels: function () {
                for (var i = 0; i < this.pixels.length; i++) {
                    this.drawPixel(this.pixels[i]);
                }
            },

            drawPixel: function (pixel) {
                if (pixel.alpha < 0.1) {
                    pixel.alpha = 0.1;
                }
                else if (pixel.alpha > pixel.maxAlpha) {
                    pixel.alpha = pixel.maxAlpha;
                }

                this.c2d.fillStyle = 'rgba(255, 255, 255, ' + pixel.alpha + ')';
                this.c2d.fillRect(pixel.xPos, pixel.yPos, this.pixelSize, this.pixelSize);

                if (pixel.isLit) {

                    if (pixel.bornFade <= 0) {

                        // Update pixel attributes
                        if (pixel.life <= 0) {
                            pixel.dying = true;

                            if (pixel.deathFade <= 0) {
                                pixel.randomizeSelf();
                            }
                            else {
                                var divisor = 1;
                                if (pixel.maxAlpha === 0.5 && pixel.alpha > 0.5) {
                                    divisor = 2;
                                }
                                pixel.alpha = (pixel.deathFade / this.pixelDeathFade) / divisor;
                                pixel.deathFade--;
                            }
                        }
                        else {
                            pixel.life--;
                        }
                    }
                    else {
                        pixel.alpha = pixel.maxAlpha - pixel.bornFade / this.pixelBornFade;
                        pixel.bornFade--;
                    }
                }
                else {
                    if (pixel.offLife <= 0) {
                        pixel.isLit = true;
                    }
                    pixel.offLife--;
                }
            },

            clearCanvas: function () {
                this.c2d.fillStyle = this.bgColor;
                this.c2d.fillRect(0, 0, this.canvasW, this.canvasH);
            }
        };

        // Init pixel grid animation
        pixelGrid.init();

    });
});