SVG, Raphael.js, Drawing

Question

This I guess is more of a maths question or maybe an SVG question. I was looking at modifying some example code I found on the raphael.js site. I already modified it to have a custom centre point. Now I want to modify it so that I can specify at which angle the arc is started at. (similar to d3.js so I can use it to have something like a bar chart with the middle missing).

However I have no idea where or how to begin. My maths is terrible, I have no idea what alpha is and the a variable does. Or why x and y are calculated that way. I have been reading the SVG specification over and over but I am missing some crucial basic knowledge and I don't know.

Can someone point me in the right direction so I can begin to understand this stuff?

window.onload = function () {
    var r = Raphael("holder", 600, 600),
        R = 200,
        init = true,
        param = {stroke: "#fff", "stroke-width": 30};
    // Custom Attribute
    r.customAttributes.arc = function (xPos, yPos, value, total, R) {
        var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = xPos + R * Math.cos(a),
        y = yPos - R * Math.sin(a),
        var path = [["M", xPos, yPos - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
        return {path: path};
    };
    var sec = r.path().attr(param).attr({arc: [300, 300, 3, 60, R]});
};

Running the code produces:

<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
    <path style="" fill="none" stroke="#bfb5b5" d="M300,100A200,200,0,0,1,361.8033988749895,109.7886967409693" stroke-width="30">
</svg>

Also I have no idea how the arc parameters work together to draw what they are drawing.

Apologies for the lack of focus on the question.

EDIT: It's based on the polar clock example. http://raphaeljs.com/polar-clock.html

Answer 1

I think the author of the example is trying to create a custom attribute in order to make it easy to create arcs based on clock rotation. Basically the total paramter of the custom attribute represents the total movement of the clock (60 seconds) while value (3 in your case) represents the length (in seconds) of the arc you are trying to draw. So basically you have an arc of 3 seconds.

Now for the math:

• alpha : the angle (in degrees) of the arc. You notice the conversion from seconds to degrees: 3 seconds -> 18 degrees

• a : the angle in radians. Trigonometric formulas use radians not degrees, so you need this conversion. For some reason that I don't understand, this is the complementary angle (90 - alpha)
  Edit: the complementary angle is (probably) used to compensate for the fact that in trigonometry the y-axis points upwards while on the svg canvas it points downwards.

• x, y : ending points of the path (arc) you are drawing. These are caculated using elementary trigonometry (sorry..you're not getting any help here).

The parameters for the svg arc are described here: http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands