Hah. Canvas experiment #10

[elfs]

It only took me about an hour to get the quadratic equation working. I realized I was recalculating the intercept with the inner circle twice, and removed one of the quadratic recalculations.

Then I had to handle the special case where the reference line crosses the Y-axis, because that results in an undefined slope. That did indeed require a special case handler.

It didn't help that Javascript's math isn't precise enough to actually tell you when the slope is going vertical. I had to "clamp" the number to 15 digits of precision to the right of the decimal to ensure that I got "something like zero" when I expected zero. I asked Stack Overflow for help on that one.

Then I had the case where the one of the target lines traverses the X-axis. The quadratic equations generate two intercepts on opposite points of the circle. Trying to figure out which generated "the smallest possible angle with the reference line" broke when the intercepts were on opposite sides of the X-axis. The algorithm for that turned out to be fun.

Canvas Experiment #10 The orange line is the reference line. At small angles, the blue lines form a rectangle, not a pie-slice.

Now I need to work on the easing algorithm so that the outer angle "eases" to the same angle as the inner angle the further away from the reference line the inner angle is. At some point away from the reference line, having the slopes be perfectly coincidental looks just as twonky as the pie-slice effect you get close to the reference line.

Comments

[blaisepascal]

Is the example in the canvas the effect you are going for, or simply a way-station to the end goal? i.e., are you looking to generate parallel offsets from the orange "hand" between the inner and outer circle?

If so, I think there's a simpler way:

Let d be the desired distance from the orange line to the blue lines, r1 be the inner radius, and r2 be the outer radius.

Compute t1 = arcsin(d/r1), t2 = arcsin(d/r2)

Then, in polar coordinates, the line segment from (r1,t+t1) to (r2,t+t2) will be parallel to the ray of angle t, and similarly (r1,t-t1)->(r2,t-t2).

Instead of solving a multiple quadratic equations per clock tick, trying to special case horizontal and vertical lines, worrying about small divisors, etc, you do four trivial angle calculations and four polar->cartesian transformations.

[elfs.livejournal.com]

I'll take a look at doing your substitution. As to what I'm trying to achieve, take a look at The Ubuntu Logo (http://www.google.com/search?q=ubuntu+logo&hl=en&safe=off&prmd=imvns&tbm=isch&tbo=u&source=univ&sa=X&biw=1280&bih=669). See how the endpieces of each arc form a rectangle of whitespace? That's what I'm trying to achieve, only as the arcs get smaller, the whitespace grows and eventually I want the two ends of the arc to be parallel to each other. (Basically, as the eye is drawn to the small details, I want those details to be consistently rectangular.) So there's also some easing to be done.

It doesn't help that Canvas uses cartesian coordinates for the straight line parts of the arc, and polar coordinates for the arc parts, so I have to have all the details worked out (X, Y, R, and θ of all four points) before I can issue drawing commands.