Challenging vector maths in JavaScript

Question

I have a fun dev/math's problem that I can't get my head around solving. See the illustration below. I have two circles of dots; one small and one big. I want to: - Draw a line from any given point in the outer circle to any given point in the inner circle (done) - The lines should be arcs and shouldn't cross the inner circle's boundries or the outer circle's boundries. (I need your help!) fiddle! I've created a jsFiddle written with RaphaelJS where i create dots and draw lines between them. See here, http://jsfiddle.net/KATT/xZVnx/9/. It's basically in the `drawLine` function I need your help, in order to draw a nice arc, instead of a straight line. I added some helpers for working with vectors as well, se `MathHelpers.Vector`. Please have a go on forking and try implementing a solution where the lines bend around the. Solutions using Béziers that actually look good is also much appreciated. And yeah, I guess vector geometry is best suited for the calculations. Very, very, very thank…

Accepted Answer

One option is to use elliptical arcs. This doesn't look too awesome, but satisfies the constraints, and I think it can be improved by careful choice of the circle radius (here I used a fixed one).

```
var angleDiff = MathHelpers.getAngleInCircle(innerCircleIndex, numberOfDotsInInnerCircle) - MathHelpers.getAngleInCircle(outerCircleIndex, numberOfDotsInOuterCircle);
while (angleDiff > Math.PI) {
    angleDiff -= 2 * Math.PI;
}
while (angleDiff < -Math.PI) {
    angleDiff += 2 * Math.PI;
}

from = addOffsetAndRound(from);
to = addOffsetAndRound(to);
r = (0.5 * innerCircleRadius + 0.5 * outerCircleRadius);

var pathStr = "";
pathStr += "M" + [from.x, from.y].join(' '); // MOVE to
pathStr += "A" + [r, r, 0, 0, angleDiff >= 0 ? 1 : 0, to.x, to.y].join(' '); // Draw line to
var path = paper.path(pathStr);
```

P.S. Of course, one should keep in mind that the real spiral isn't an elliptical arc.

Challenging vector maths in JavaScript

Solution

Problem