javascriptmathvectorraphael

Challenging vector maths in JavaScript

I have a fun dev/math's problem that I can't get my head around solving.

See the illustration below.

End result

I have two circles of dots; one small and one big.

I want to:

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 thankful for any help. I've spent a lot of time trying to solve it, but my rusty highschool math skills just aren't enough.

Solution

  • 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.