Transforming One Arc Into Another Using HTML Canvas

20 views Asked by At

I need to transform an arc into another larger arc that passes through the same start and end points of the original arc. To do this the arc center and arc radius of the original arc need to be transformed. Hopefully there is some ratio or relationship between the original arc and the transformed arc that can be put to one or more equations.

The graphic below is a little confusing at first, but it'll be explained.

enter image description here

The original arc (drawn in black) has a radius of 100 and a center of (200, 200), with start and end points of (100, 200) and (300, 200), where the diameter is the chord, so hence the arc is a semicircle.

The transformed arc (drawn in red) has a radius of 125 and a center of (200, 275), with start and end points of (75, 275) and (325, 275), where the diameter is also the chord, and where the arc is also a semicircle.

As things would have it my first hard coded attempt seemed to work, but I can't put together a system for generating other arcs.

Note that the transformed arc passes through the start and end points of the original arc. I don't need the start and end points for the transformed arc as it's supposed to use the same start and end points of the original arc.

Note also that the radius of the transformed arc extends the arc from (200, 275) to (200, 150), and this terminal point on the arc bisects the radius of the original arc. I'm referring to this as 50%, where I'd like to be able to transform an arc by adjusting this location by any percent of the original radius.

It's sort of like the original arc is a spring anchored in two hole where pushing down on it from the top center deforms it into the transformed arc.

When I hard coded this first example I thought for sure I could come up with a routine that was capable of handling the transformation, but it seems that I just happened to luck out when I generated it manually without equations. It's just beyond my skill set.

What equation or system of equations is capable of managing this transformation.

0

There are 0 answers