vector arc playground

I've recently started working with Raphaël after a long hiatus. I'd forgotten how fun it is. The current project uses a lot of curves, and so I found myself working with a lot of paths that use arcs. Since they are kinda hard to understand intuitively, I made a little playground to help me remember what does what.

M

x0

y0

L

x1

y1

A

rx

ry

x-rotation

large arc

sweep

x2

y2

The arc is essentially an ellipse of which only part of the circumference is drawn. The centerpoint of the ellipse is denoted by the coordinates E_x, E_y, and is calculated using the awesome Sylvester (a lot of calculation is required just to find that point, but it's nice to have it there).

You can play around with the various values at will. Use the arrow keys or the mouse wheel to increment and decrement while focused on a particular text box.

Seeing it laid out like this helped me a lot. Hopefully this will be of use to someone else, too.