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

Answer 1

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.

Answer 2

Start simply by drawing a piecewise a spiral.

The spiral radius goes from start angle to end angle and the spiral radius goes from inner circle radius to outer circle radius.

To give you an idea of what I mean, choose a number of pieces (n)

var n = 20, // The number of lines in the spiral
    rStep = (outerRadius - innerRadius)/n, // the radius increase between points
    aStep = (outerAngle - innerAngle)/n,  // the angle change between points
    points = [];

// compute the cartesian coordinates (x, y) from polar coordinates (r, a)
function cartesian(r, a) {
    return [
        r * Math.cos(a),
        r * Math.sin(a)
    ];
}

for (i = 0; i <= n; i += 1) {
   points.push(cartesian(innerRadius + (i * rStep), innerAngle + (i * aStep));
}

---

I have demonstrated a basic piecewise spiral using polar coordinates:

http://jsfiddle.net/xmDx8/

Try changing n to see how the pieces build up.

drawLine(innerCircleIndex, outerCircleIndex, 1); // This is what you did

drawLine(innerCircleIndex, outerCircleIndex, 100); // 100 lines in the example

drawLine(innerCircleIndex, outerCircleIndex, n); // Choose n to see how it grows

Answer 3

If you really did want to avoid teh fancy maths, you could approximate a spiral using a series of simple line segments given no information other than the coordinates of the two points being connected and either their respective angles relative to the origin or the origin's coordinates (obviously one can be inferred from the other). Given (ix,iy,i_angle) describing the coordinates and relative angle of the interior point and (ox,oy,o_angle) describing the coordinates and relative angle of the exterior point,

        var generatePath = function( ix, iy, i_angle, ox, oy, o_angle )
        {
            var path = [ "M", ox, oy ];
            var slices = 100;

            var cur_angle = o_angle;
            var cur_r = cr_outer;
            var delta_r = ( cr_inner - cr_outer ) / slices;
            var delta_angle = ( i_angle - o_angle );
            if ( delta_angle > Math.PI )
                delta_angle -= Math.PI * 2;
            else if ( delta_angle < Math.PI * -1 )
                delta_angle += Math.PI * 2;
            delta_angle = delta_angle / slices;

            for ( var i = 0; i < slices; i++ )
            {
                cur_angle += delta_angle;
                cur_r += delta_r;
                path.push( "L", cx + Math.cos( cur_angle ) * cur_r, cy + Math.sin( cur_angle ) * cur_r );
            }
            return path;
        }

The logic is stupid-simple, looks good even at high resolutions, and is possibly more performant than a "genuine" arc segment or series of quadratic bezier curve. The number of slices per segment could probably be tuned based on length and size to balance performance against aesthetics.

I have this function (with control point calculations) staged here.