Canvas realizes dynamic color bubbles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body{
            width:100%;
            margin:0;
            overflow:hidden;
            background:hsla(232, 95%, 10%, 1);
        }

    </style>
</head>
<body>
<canvas id = 'canv'></canvas>
<script>
    var c = document.getElementById ('canv');
    var $ = c.getContext("2d");
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var arr = [];
    var x = 0, y = 0;

    for(var i = 0; i < 250; i++) arr.push(new part());

    function part(){
        this.x = Math.random()*w;
        this.y = Math.random()*h;
        this.vx = Math.random();
        this.vy = Math.random();
        this.col = 'hsla('+Math.random()*360+', 85%, 60%, 1)';
        this.rad = Math.random()*40;
    }

    function draw(){
        $.globalCompositeOperation = 'source-over';
        $.fillStyle = 'hsla(232, 95%, 10%, 1)';
        $.fillRect(0, 0, w, h);
        $.globalCompositeOperation = 'lighter';
        for(var j = 0; j < arr.length; j++){
            var p = arr[j];
            $.beginPath();
            var g = $.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.rad);
            g.addColorStop(0, 'hsla(0,0%,0%,.4)');
            g.addColorStop(0.4, p.col);
            g.addColorStop(1, 'hsla(0,0%,0%,0)');
            $.fillStyle = g;
            $.arc(p.x, p.y, p.rad, Math.PI*2, false);
            $.fill();
            p.x += p.vx;
            py + = p.vy;
            if(p.x < -50) p.x = w+50;
            if(p.y < -50) p.y = h+50;
            if(p.x > w+50) p.x = -50;
            if(p.y > h+50) p.y = -50;
        }
        window.requestAnimationFrame(draw);
    }
    draw();

    window.addEventListener('resize', function(){
        c.width = w = window.innerWidth;
        c.height = h = window.innerHeight;
    }, false);
</script>
</body>
</html>
Canvas realizes dynamic color bubbles

Guess you like
