Chapter 5: Better Animated NGon

JavaScript

var paper = Raphael(0, 0, 500, 500);

function NGon(x, y, N, side, angle) {
    paper.circle(x, y, 3).attr("fill", "black");
        
    var path = "",
        c, temp_x, temp_y, theta;
    
    for (c = 0; c <= N; c += 1) {
        theta = c / N * 2 * Math.PI;
        
        temp_x = x + Math.cos(theta) * side;
        temp_y = y + Math.sin(theta) * side;
         console.log(theta, ' ' , temp_x, ' ' , temp_y)
        path += (c === 0 ? "M" : "L") + temp_x + "," + temp_y;
    }
   
    return path;
}

function N2Gon(x, y, N, side, angle) {
    paper.circle(x, y, 3).attr("fill", "black");
        
    var path = "",
        c, temp_x, temp_y, theta;
    
    for (c = 0; c <= 2*N; c += 1) {
        theta = Math.floor(c / 2) / N * 2 * Math.PI;
        
        temp_x = x + Math.cos(theta) * side;
        temp_y = y + Math.sin(theta) * side;
        path += (c === 0 ? "M" : "L") + temp_x + "," + temp_y;
    }
    return path;
}

//var pentagon = NGon(50, 50, 5, 20);

var pentagon = N2Gon(50, 50, 5, 20);
var decagon = NGon(50, 50, 10, 20);

var agon = paper.path(pentagon);
var anim = Raphael.animation({ path: decagon }, 1000);
agon.animate(anim);