Chapter 7: Point along path

JavaScript

Raphael.fn.rosetta = function(x,y,rx,ry,N) {
    if (N == 0) {
        console.log("no diving by zero, please"); return;
    }
    var angle = 360 / N; // negative values of N are fine
    var path = "M" + x + "," + y;
    
    for (var c = 0; c < N; c += 1) {
        // need angle for each leaf of rosetta in radians
        var theta = angle * c * Math.PI / 180;
        // coords of farthest point from center for this leaf
        var dx = x + 2 * rx * Math.cos(theta),
            dy = y + 2 * rx * Math.sin(theta);
        path += "A" + rx + "," + ry + " " + angle*c + " 1,1 " + dx + "," + dy;
        path += "A" + rx + "," + ry + " " + angle * c + " 1,1 " + x + "," + y;
    }
    var rosetta = paper.path(path);        
    return rosetta;
}

var paper = Raphael(0, 0, 500, 500);
var rose = paper.rosetta(120, 120, 55, 35, 6);

var circle = paper.circle(0, 0, 10).attr("fill", "red");
var point = rose.getPointAtLength(400);

circle.attr({
    cx: point.x,
    cy: point.y
});