rotate polygon

by mohayonao

HTML

<canvas id="canvas"></canvas>

CSS

* {
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

canvas {
    width: 100%;
    height: 100%;
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var N =5;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.center = {
    x: canvas.width >> 1,
    y: canvas.height >> 1
};

context.fillStyle = "rgba(255, 255, 255, 0.6)";

function animate(t) {
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    var edges = getEdges(N, 200, t * 0.0025);
    
    context.beginPath();
    edges.forEach(function(pt) {
        context.lineTo(canvas.center.x + pt.x, canvas.center.y + pt.y);
    });
    context.closePath();
    context.stroke();
    
    requestAnimationFrame(animate);
}

function getEdges(n, r, phase) {
    phase = phase || 0;
    
    var edges = new Array(n);
    
    for (var i = 0; i < n; i++) {
        var t = (i / n) * 2 * Math.PI + phase;
        var x = Math.sin(t) * r;
        var y = Math.cos(t) * r;
        edges[i] = { x: x, y: y };
    }
    
    return edges;
}

requestAnimationFrame(animate);