Twenty-Fifteen

index.html

<canvas id = 'canv'>
</canvas>  
<!--Fireworks explode in the vicinity of your mouse  !-->

script.js

var w = window.innerWidth,
    h = window.innerHeight,
    mousePos = {
        x: 400,
        y: 300
    },
    cnv = document.getElementById('canv'),
    ctx = cnv.getContext('2d'),
    particles = [],
    fireworks = [],
    max = 400,
    color = 0;
    
// init
$(document).ready(function() {
    cnv.width = w;
    cnv.height = h;
    setInterval(go, 50);
    setInterval(loop, 800 / 50);
});

// update mouse position
$(document).mousemove(function(e) {
    e.preventDefault();
    mousePos = {
        x: e.clientX,
        y: e.clientY
    };
});

$(document).mousedown(function(e) {
    for (var i = 0; i < 5; i++) {
        goFrom(Math.random() * w * 2 / 3 + w / 6);
    }
});

function go() {
    goFrom(mousePos.x);
}

function goFrom(x) {
    if (fireworks.length < 10) {
        var firework = new Firework(x);
        firework.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
        firework.vel.y = Math.random() * -3 - 4;
        firework.vel.x = Math.random() * 6 - 3;
        firework.size = 8;
        firework.shrink = 0.999;
        firework.gravity = 0.01;
        fireworks.push(firework);
    }
}

function loop() {
    // update screen size
    if (w != window.innerWidth) {
        cnv.width = w = window.innerWidth;
    }
    if (h != window.innerHeight) {
        cnv.height = h = window.innerHeight;
    }

    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, w , h);

    var curr_Fireworks = [];

    for (var i = 0; i < fireworks.length; i++) {
        // update and render
        fireworks[i].update();
        fireworks[i].render(ctx);

        // calculate distance with Pythagoras
        var distance = Math.sqrt(Math.pow(mousePos.x - fireworks[i].pos.x, 2) + Math.pow(mousePos.y - fireworks[i].pos.y, 2));

        // random chance of 1% if rockets is above the middle
        var rnd = fireworks[i].pos.y < (h * 2 / 3) ? (Math.random() * 100 <= 1) : false;


        if (fireworks[i].pos.y < h / 5 || fireworks[i].vel.y >= 0 || distance < 50 || rnd) {
            fireworks[i].explode();
        } else {
            curr_Fireworks.push(fireworks[i]);
        }
    }

    fireworks = curr_Fireworks;

    var curr_Particles = [];

    for (var i = 0; i < particles.length; i++) {
        particles[i].update();

        // render and save particles that can be rendered
        if (particles[i].exists()) {
            particles[i].render(ctx);
            curr_Particles.push(particles[i]);
        }
    }

    // update array with existing particles 
    particles = curr_Particles;

    while (particles.length > max) {
        particles.shift();
    }
}

function Particle(pos) {
    this.pos = {
        x: pos ? pos.x : 0,
        y: pos ? pos.y : 0
    };
    this.vel = {
        x: 0,
        y: 0
    };
    this.shrink = .97;
    this.size = 2;

    this.resistance = 1;
    this.gravity = 0;

    this.flick = false;

    this.alpha = 1;
    this.fade = 0;
    this.color = 0;
}

Particle.prototype.update = function() {
    // resistance
    this.vel.x *= this.resistance;
    this.vel.y *= this.resistance;

    // gravity down
    this.vel.y += this.gravity;

    // update position based on speed
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;

    // shrink
    this.size *= this.shrink;

    // fade out
    this.alpha -= this.fade;
};

Particle.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }

    c.save();

    c.globalCompositeOperation = 'lighter';

    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;

    var grd = c.createRadialGradient(x, y, 0.1, x, y, r);
    grd.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
    grd.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
    grd.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");

    c.fillStyle = grd;

    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();

    c.restore();
};

Particle.prototype.exists = function() {
    return this.alpha >= 0.1 && this.size >= 1;
};

function Firework(x) {
    Particle.apply(this, [{
        x: x,
        y:h}]);

    this.explosionColor = 0;
}

Firework.prototype = new Particle();
Firework.prototype.constructor = Firework;

Firework.prototype.explode = function() {
    var count = Math.random() * 10 + 80;

    for (var i = 0; i < count; i++) {
        var particle = new Particle(this.pos);
        var angle = Math.random() * Math.PI * 2;

        // giving a 3D effect by using cosine to have more particles in the middle
        var speed = Math.cos(Math.random() * Math.PI / 2) * 15;

        particle.vel.x = Math.cos(angle) * speed;
        particle.vel.y = Math.sin(angle) * speed;

        particle.size = 10;

        particle.gravity = 0.2;
        particle.resistance = 0.92;
        particle.shrink = Math.random() * 0.05 + 0.93;

        particle.flick = true;
        particle.color = this.explosionColor;

        particles.push(particle);
    }
};

Firework.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }

    c.save();

    c.globalCompositeOperation = 'lighter';

    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;

    var grd = c.createRadialGradient(x, y, 0.1, x, y, r);
    grd.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
    grd.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");

    c.fillStyle = grd;

    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();

    c.restore();
};

style.css

body {
    margin: 0px;
    overflow: hidden;
    width:100%;
    background-image:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRmOrYzAgSNANBYLV0o7DWJI4j_2lXKXne2od--QNA65fo5hZHzcw'); background-repeat:no-repeat; background-size:100% 100%;
}
canvas{
  margin-top:0;
  height:100vh;
  padding:0;
  width:100%;
  background:transparent;
}

Twenty-Fifteen.markdown

Twenty-Fifteen

Wishing You All A Safe & Happy New Year!

Forked from Tiffany Rayside's Pen Twenty-Fifteen.

A Pen by Captain Anonymous on CodePen.

License.