正七角形を描画する

[polygon.js]

window.onload = function(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    
    var W = window.innerWidth;
    var H = window.innerHeight;
    var W2 = W * 0.5;           // LINEを描画する範囲（最下）
    var H2 = H * 0.4;           //                   （右端)
    canvas.width = W;
    canvas.height = H;
    
    var cx = W2/2;
    var cy = H2/2;
    var r = H2/4;
    var pi = 3.141592;
    
    var particles = [];
    let n = 7;
    for(var i = 0; i < n; i++){             // 頂点の数
        particles.push(new particle(i,n));
    }
    
    function particle(i,n){
        //location on the canvas
        this.location = {
            x: r*Math.cos(2*i*pi/n-pi/2), 
            y: r*Math.sin(2*i*pi/n-pi/2)
        };
        this.radius = 0;
        this.count = 0;
        this.random = 0;
        this.rgba = randomColor();
    }

    function randomColor(){
        let r = Math.round(Math.random()*255);
        let g = Math.round(Math.random()*255);
        let b = Math.round(Math.random()*255);
        let a = Math.random();
        return "rgba("+r+", "+g+", "+b+", "+a+")";
    }    
    function draw(){
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(20, 20, 20, 0.2)";
        ctx.fillRect(0, 0, W, H);
        ctx.globalCompositeOperation = "lighter";
        
        for(var i = 0; i < particles.length; i++){
            var p = particles[i];
            p.count = (p.count + 1) % (Math.round(Math.random()*5) + 8);
            if(p.count == 0){
                p.random = Math.random()*8 - 4;
                p.rgba =randomColor();
            }
            ctx.fillStyle = "black";
            ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
            
            for(var n = i+1; n < particles.length; n++){
                var p2 = particles[n];

                ctx.beginPath();
                ctx.moveTo(p.location.x + cx, p.location.y + cy);
                ctx.lineTo(p2.location.x + cx, p2.location.y + cy);
                ctx.strokeStyle = p.rgba;
                ctx.stroke();
            }
            
            let rd = -1 * pi / 180.0;
            let x1 = p.location.x * Math.cos(rd) - p.location.y * Math.sin(rd);
            let y1 = p.location.x * Math.sin(rd) + p.location.y * Math.cos(rd);
            p.location.x = x1;
            p.location.y = y1;
        }
    }
    
    setInterval(draw, 50);
};