Draw non-overlapping arc between two rectangles - algorithm

Question

I'm trying to draw a (svg) arc connecting two rectangles. The catch is, that the arc should start at the border of the rectangles, not at the center.
To illustrate:
I have the center points, width & height of the rectangles C1 w1 h1 C2 w2 h2 and the center and x and y radius of the arc D rx ry. So basically, for drawing the purple arc, i'm missing P1 and P2.
All values are dynamic and can change, so the algorithm needs be agnostic of rx and ry, width and height of the rectangles, how the rectangles are positioned relatively to each other, etc.
Taking the rounded corners into account would be the cherry on top. But that's not really necessary..

Answer 1

Let's center of ellipse be coordinate origin (if not, just shift rectangle coordinates by -D.X and -D.Y).
In this system ellipse equation is
x^2/rx^2 + y^2/ry^2 = 1
Substitute rectangle edge coordinates in this equation and check if result actually belongs to rectangle.
For example, right edge of top rectangle is X = C1'.X + w1. Find Y from ellipse equation and check it is in range C1'Y - h1 .. C1'Y + h1. If yes, P1 = (C1'.X + w1, CalculatedY)

Answer 2

Alright, just for people who might stumble upon this in the future..
Here is what i came up with in javascript (ES6). But it should be easy to port this to other languages..
/**
* Calculate the intersection of the border of the given rectangle
* and a circular arc.
* #param {Object} rectangle Rectangle object with dimensions and position properties.
* #param {Object} arc Arc object with center and radius properties.
* #return {Object} Resulting intersection point, with x- and y-coordinates.
*/
calculateBorderPoint(rectangle, arc) {
// Clone the rectangle, because we don't want to mutate the original.
const a = Object.assign({}, rectangle.position);
// Treat center of circle as coordinate origin.
a.x -= arc.center.x;
a.y -= arc.center.y;
let points = [];
// Check east & west with possible x values
const possibleX = [
a.x - rectangle.dimensions.width / 2,
a.x + rectangle.dimensions.width / 2,
];
possibleX.forEach((x) => {
const ySquared = [
Math.sqrt(Math.pow(arc.radius, 2) - Math.pow(x, 2)),
-Math.sqrt(Math.pow(arc.radius, 2) - Math.pow(x, 2)),
];
// Check if the derived y value is in range of rectangle
ySquared.forEach((y) => {
if (y >= a.y - rectangle.dimensions.height / 2 &&
y <= a.y + rectangle.dimensions.height / 2) {
points.push({x, y});
}
});
});
// Check north & south with possible y values
const possibleY = [
a.y - rectangle.dimensions.height / 2,
a.y + rectangle.dimensions.height / 2,
];
possibleY.forEach((y) => {
const xSquared = [
Math.sqrt(Math.pow(arc.radius, 2) - Math.pow(y, 2)),
-Math.sqrt(Math.pow(arc.radius, 2) - Math.pow(y, 2)),
];
// Check if the derived x value is in range of rectangle
xSquared.forEach((x) => {
if (x >= a.x - rectangle.dimensions.width / 2 &&
x <= a.x + rectangle.dimensions.width / 2) {
points.push({x, y});
}
});
});
// At this point you will propably have multiple possible solutions,
// because the circle might intersect the rectangle at multiple points.
// You need to select the point, that makes most sense in your case.
// One solution would be to select the one closest to the other rectangle.
// Translate it back.
points[0].x += arc.center.x;
points[0].y += arc.center.y;
return points[0];
}
It's not pretty, but it works. I'm happy to hear any suggestions..