In my application I'm trying to display multiple edges between vertices in this way:
Based on some calculations regarding circle segments, I have identified 4 coordinates on each circle that are equally spread out. I can use these coordinates to draw the corresponding areas.
But as you can see, these coordinates always lie at the top of the circle, regardless of the positioning of the two vertices. I'm now trying to 'align' the coordinates, so that I get the result of the first image, but for the life of me, I can't seem to figure out what to do.
I have tried rotating the coordinates of B around the center of B by this angle:
$$ dx = b.x - a.x \\ dy = b.y - a.y \\ angle = \arctan(\frac{dy}{dx}) $$
And similarly for A but with: $\pi - angle$ But this only seemed to work for the case in the first figure ($A = (0,0)$; $B = (100, 100)$).
After a bit of trial and error I found that the following worked:
$$ dx = b.x - a.x \\ dy = b.y - a.y \\ angle = \frac{\pi}{2}- \arctan(\frac{dy}{dx}) $$
Coordinates of B are then rotated over $-angle$ and those of A over $\pi - angle$. The idea is to rotate the chord of the circle segment until it is perpendicular with the line through the centers of the vertices. The coordinates then follow the same rotation.