We_Relese/App/Relese/Content/V2/Effect/yanhua.js

(function ($) {
    $.fn.fireworks = function (options) {
        options = options || {};
        options.width = options.width || $(this).width();
        options.height = options.height || $(this).height();
        var fireworksField = this,
            SCREEN_WIDTH = options.width,
            SCREEN_HEIGHT = options.height,
            rockets = [],
            particles = [];
        var canvas = document.createElement("canvas");
        canvas.style.width = SCREEN_WIDTH + 'px';
        canvas.style.height = SCREEN_HEIGHT + 'px';
        canvas.width = SCREEN_WIDTH;
        canvas.height = SCREEN_HEIGHT;
        canvas.style.position = 'absolute';
        canvas.style.top = '0px';
        canvas.style.left = '0px';
        var context = canvas.getContext('2d');
        var mousePos = {};
        var gravity = 0.05;
        var raf;

        $(fireworksField).append(canvas);
        //document.onmousemove = mouseMove;
        setInterval(launch, 1000);
        setInterval(function () {
            mousePos = {
                x: Math.random() * SCREEN_WIDTH,
                y: Math.random() * SCREEN_HEIGHT / 2
            }
        }, 1000);

        //setInterval(loop, 20);
        raf = window.requestAnimationFrame(loop);

        //function mouseMove(ev) {
        //    ev = ev || window.event;
        //    mousePos = mousePosition(ev);
        //}
        //function mousePosition(ev) {
        //    if (ev.pageX || ev.pageY) {
        //        return { x: ev.pageX, y: ev.pageY };
        //    }
        //    return {
        //        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        //        y: ev.clientY + document.body.scrollTop - document.body.clientTop
        //    };
        //}

        function launch() {
            if (rockets.length < 10) {
                var rocket = new Rocket(SCREEN_WIDTH / 2);
                rocket.v.x = Math.random() * 6 - 3;
                rocket.v.y = Math.random() * -30 - 4;
                rocket.color = Math.floor(Math.random() * 360 / 10) * 10;
                rockets.push(rocket);
            }
        }
        function loop() {
            var existRockets = [];
            var existParticles = [];
            if (SCREEN_WIDTH != window.innerWidth) {
                canvas.width = SCREEN_WIDTH = window.innerWidth;
            }
            if (SCREEN_HEIGHT != window.innerHeight) {
                canvas.height = SCREEN_HEIGHT = window.innerHeight;
            }
            context.fillStyle = "rgba(0,0,0,0.02)";
            context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
            //context.save();
            for (var i = 0; i < rockets.length; i++) {
                rockets[i].update();
                rockets[i].render(context);
                //explosion rules
                //1.above the 4/5 screen
                //2.close to the mouse
                //3.1% random chance above the 1/2 screen
                var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
                var randomChance = (rockets[i].pos.y < SCREEN_HEIGHT / 2) ? (Math.random() * 100 <= 1) : false;
                if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || distance <= 50 || randomChance) {
                    rockets[i].explode();
                } else {
                    existRockets.push(rockets[i]);
                }
            }
            rockets = existRockets;
            for (var i = 0; i < particles.length; i++) {
                particles[i].update();
                if (particles[i].exist()) {
                    particles[i].render(context);
                    existParticles.push(particles[i]);
                }
            }
            particles = existParticles;
            //context.restore();
            raf = window.requestAnimationFrame(loop);
        }
        //the particles object
        function Particle(pos) {
            this.pos = {
                x: pos ? pos.x : 0,
                y: pos ? pos.y : 0
            };
            this.v = {
                x: 0,
                y: 0
            };
            this.resistance = 0.005;
            this.size = 5;
            this.shrink = 0.99;
            this.alpha = 1;
            this.fade = 0.97;
            this.color = "";
        }
        Particle.prototype.update = function () {
            this.v.x += this.resistance;
            this.v.y -= this.resistance;
            //gravity
            this.v.y += gravity;
            this.pos.x += this.v.x;
            this.pos.y += this.v.y;
            this.size *= this.shrink;
            this.alpha *= this.fade;
        }
        Particle.prototype.render = function () {
            var x = this.pos.x,
                y = this.pos.y,
                r = this.size / 2;
            var gradient = context.createRadialGradient(x, y, 0.1, x, y, r);
            gradient.addColorStop(0, "rgba(255, 255, 255, " + this.alpha + ")");
            gradient.addColorStop(0.9, "hsla(" + this.color + ", 100%, 50%, 1)");
            gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
            context.fillStyle = gradient;
            context.beginPath();
            context.arc(x, y, r, 0, 2 * Math.PI, true);
            context.closePath();
            context.fill();
        }
        Particle.prototype.exist = function () {
            if (this.alpha >= 0.02 && this.size > 0.8) {
                return true;
            } else {
                return false;
            }
        }
        //the rocket object
        function Rocket(x) {
            Particle.apply(this, [{
                x: x,
                y: SCREEN_HEIGHT
            }]);
        }
        (function () {
            var Super = function () { };
            Super.prototype = Particle.prototype;
            Rocket.prototype = new Super();
        })();
        Rocket.prototype.constructor = Rocket;
        Rocket.prototype.update = function () {
            this.pos.x += this.v.x;
            this.pos.y += this.v.y;
        }
        Rocket.prototype.render = function (context) {
            var x = this.pos.x,
                y = this.pos.y,
                r = this.size / 2;
            var gradient = context.createRadialGradient(x, y, 0.1, x, y, r);
            gradient.addColorStop(0, "#ffff00");
            gradient.addColorStop(1, "rgba(0, 0, 0, 0.01)");
            context.fillStyle = gradient;
            context.beginPath();
            context.arc(x, y, r, 0, 2 * Math.PI, true);
            context.closePath();
            context.fill();
        }
        Rocket.prototype.explode = function () {
            var count = getGaussianDistributionNumber(240, 20);
            for (var i = 0; i <= count; i++) {
                var particle = new Particle(this.pos);
                var angle = Math.random() * Math.PI * 2;
                var speed = getGaussianDistributionNumber(2.5, 0.3);
                particle.size = 3;
                particle.v.x = Math.cos(angle) * speed;
                particle.v.y = Math.sin(angle) * speed;
                particle.color = this.color;
                particles.push(particle);
            }
        }
        function getGaussianDistributionNumber(mean, std_dev) {
            var U1 = -Math.random() + 1;
            var U2 = -Math.random() + 1;
            var R = Math.sqrt(-2 * Math.log(U2));
            var a = 2 * Math.PI * U1;
            var Z = R * Math.cos(a);
            return mean + (Z * std_dev);
        }
    }
}(jQuery));

function YanHua(el) {
    $(el).fireworks();
}
function YanHua1(el) {
    var canvas = $(el)[0];
    canvas.width = $(window).width();
    canvas.height = $(window).height();
    var ctx = canvas.getContext('2d');

    // resize
    $(window).on('resize', function () {
        canvas.width = $(window).width();
        canvas.height = $(window).height();
        ctx.fillStyle = 'rgba(255, 255, 255, 0)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    });

    // init
    ctx.fillStyle = 'rgba(255, 255, 255, 0)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // objects
    var listFire = [];
    var listFirework = [];
    var fireNumber = 10;
    var center = { x: canvas.width / 2, y: canvas.height / 2 };
    var range = 100;
    for (var i = 0; i < fireNumber; i++) {
        var fire = {
            x: Math.random() * range / 2 - range / 4 + center.x,
            y: Math.random() * range * 2 + canvas.height,
            size: Math.random() + 0.5,
            fill: '#fd1',
            vx: Math.random() - 0.5,
            vy: -(Math.random() + 4),
            ax: Math.random() * 0.02 - 0.01,
            far: Math.random() * range + (center.y - range)
        };
        fire.base = {
            x: fire.x,
            y: fire.y,
            vx: fire.vx
        };
        //
        listFire.push(fire);
    }

    function randColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var color = 'rgb($r, $g, $b)';
        color = color.replace('$r', r);
        color = color.replace('$g', g);
        color = color.replace('$b', b);
        return color;
    }

    (function loop() {
        requestAnimationFrame(loop);
        update();
        draw();
    })();

    function update() {
        for (var i = 0; i < listFire.length; i++) {
            var fire = listFire[i];
            //
            if (fire.y <= fire.far) {
                // case add firework
                var color = randColor();
                for (var i = 0; i < fireNumber * 5; i++) {
                    var firework = {
                        x: fire.x,
                        y: fire.y,
                        size: Math.random() + 1.5,
                        fill: color,
                        vx: Math.random() * 5 - 2.5,
                        vy: Math.random() * -5 + 1.5,
                        ay: 0.05,
                        alpha: 1,
                        life: Math.round(Math.random() * range / 2) + range / 2
                    };
                    firework.base = {
                        life: firework.life,
                        size: firework.size
                    };
                    listFirework.push(firework);
                }
                // reset
                fire.y = fire.base.y;
                fire.x = fire.base.x;
                fire.vx = fire.base.vx;
                fire.ax = Math.random() * 0.02 - 0.01;
            }
            //
            fire.x += fire.vx;
            fire.y += fire.vy;
            fire.vx += fire.ax;
        }

        for (var i = listFirework.length - 1; i >= 0; i--) {
            var firework = listFirework[i];
            if (firework) {
                firework.x += firework.vx;
                firework.y += firework.vy;
                firework.vy += firework.ay;
                firework.alpha = firework.life / firework.base.life;
                firework.size = firework.alpha * firework.base.size;
                firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
                //
                firework.life--;
                if (firework.life <= 0) {
                    listFirework.splice(i, 1);
                }
            }
        }
    }

    function draw() {
        // clear
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.18;
        ctx.fillStyle = 'rgba(255, 255, 255, 0)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // re-draw
        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = 1;
        for (var i = 0; i < listFire.length; i++) {
            var fire = listFire[i];
            ctx.beginPath();
            ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = fire.fill;
            ctx.fill();
        }

        for (var i = 0; i < listFirework.length; i++) {
            var firework = listFirework[i];
            ctx.globalAlpha = firework.alpha;
            ctx.beginPath();
            ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fillStyle = firework.fill;
            ctx.fill();
        }
    }
}