Canvas and Slopes, Experiment Seven

[elfs]

And here we go, thanks much to zanfur!

Experiment Seven.

For my next trick, I have to figure out where the blue line intersects the outer circle closest to where the orange line does, and draw just that segment. It's Just Algebra, with a little bit of algorithm.

Comments

[http://www.flutterby.net/User:DanLyke (from livejournal.com)]

So, a couple of notes. I was going to fix arc_three, but then you posted this one and...

I'm not a JavaScript guy, so beware my syntax. I have, however, occasionally been a graphics guy.

First off, you are aware that contexts have a transformation state that you can push and pop? So rather than adding your center in everywhere, you could

ctx.save();
ctx.translate(300,300);
//... do your various things
ctx.restore();

In fact, if you feel that way about up and down, I'm pretty sure you can also add a ctx.scale(1,-1) after the translate. The "pretty sure" is that -1 can have some negative effects and since I haven't played with the JavaScript canvas much I don't know which of those may or may not show up. With some polygon fill algorithms you're interested in "winding", and a scale(1,-1) could turn the poly inside-out so the fill gets everything but the poly. As Tom Porter[1] once remarked to me "scale minus one is the devil speaking", but in a modern 2d engine built with web programmers in mind it probably doesn't worry about winding.

Second, you only have to figure out the length of the blue segment, right? You have the slope (the slope of the orange line), you have the offset (l2 - l1), and, in fact, you have the length directly, sin(angle_difference) * 2. So just scale your line length appropriately.

[1] yes, I am name dropping, that's the Porter of Porter-Duff compositing, but you youngsters probably don't remember the pioneers any more...

[http://www.flutterby.net/User:DanLyke (from livejournal.com)]

Oh, additional note: You are aware that JavaScript canvasas have clipping regions, right? Just create a clipping region of the outer circle before you draw the blue line...

[zanfur.livejournal.com]

For dealing with when the slope is undefined, you have two options: hardcode the values (this is what most people do, even mathematicians), or use a different form of the equation that doesn't lead to undefined values: the generic equation for a straight line is Ax + By = C (similar to how an ellipse is Ax^2 + Bx^2 = C). The slope-intercept is normalizing for B=-1, which makes m be -A/B...B just happens to be zero, here, so you can't do that.