let c = i('canvas'),
    w = (canvas.width = window.innerWidth),
    h = (canvas.height = window.innerHeight);
class firefly {
    constructor()
    {
        this.x = Math.random() * w;
        this.y = Math.random() * h;
        this.s = Math.random() * 2;
        this.ang = Math.random() * 2 * Math.PI;
        this.v = this.s * this.s / 4
    }
    move()
    {
        this.x += this.v * Math.cos(this.ang);
        this.y += this.v * Math.sin(this.ang);
        this.ang += Math.random() * 20 * Math.PI / 180 - 10 * Math.PI / 180
    }
    show()
    {
        c.beginPath();
        c.arc(this.x, this.y, this.s, 0, 2 * Math.PI);
        c.fillStyle = '#fddba3';
        c.fill()
    }
}
let f = [];
function a() {
    if (f.length < 500)
        for (let j = 0; j < 10; j++)
            f.push(new firefly());
    for (let i = 0; i < f.length; i++) {
        f[i].move();
        f[i].show();
        f[i].x < 0 || f[i].x > w || f[i].y < 0 || f[i].y > h && f.splice(i, 1)
    }
}
let g = {};
let A = {};
canvas.addEventListener('mousemove', function(e) {
    A.x = g.x;
    A.y = g.y;
    g.x = e.pageX - this.offsetLeft;
    g.y = e.pageY - this.offsetTop
}, !1);
function i(_) {
    let b = document.getElementById(_),
        c = b.getContext('2d');
    c.fillStyle = 'rgba(30,30,30,1)';
    c.fillRect(0, 0, (b.width = window.innerWidth), (b.height = window.innerHeight));
    return c
}
window.requestAnimFrame = (() => (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(B) {
    window.setTimeout(B)
}));
function j() {
    window.requestAnimFrame(j);
    c.clearRect(0, 0, w, h);
    a()
}
window.addEventListener('resize', function() {
    ((w = canvas.width = window.innerWidth),
        (h = canvas.height = window.innerHeight));
    j()
});
j();
setInterval(j, 1000 / 60);