Question

Here is the problem I’m trying to solve for my game.

I have this scenario:

I’m trying to solve for the position and size of the green rectangle. The circle is at 50%, 40% of the screen and its radius is proportional to the height of the screen.

The green rectangle must always be 10 pixels away from the bottom. Its left corner must be 10 pixels away also. And as can be seen in the image, the distance from the top right corner until the rectangle touches the circle is 10 pixels also.

Another constraint is that the green rectangle must always be 3 times wider than its height (aspect ratio).

Given these constraints, how can I solve for the position and size of the green rectangle?

Essentially, the Game Window can have a bunch of different aspect ratios so the green rectangle must look good in any of these situations.

I’m not necessarily looking for code but just an idea on how this could be solved.

Thanks

Answer 1

The thing to do in these situations is to describe the constraints mathematically, and see if it simplifies. This is an essential skill for geometric processing.

Let’s assume the bottom left corner of the image area is (0,0). That puts the bottom-left corner of the rectangle at (10,10); we’ll call the top-right corner (x1,y1). I’ll assume you’ve already calculated where the circle will be since that’s pretty straight-forward, we’ll call the center (x2,y2) and the radius r.

The first constraint: the rectangle is 3 times wider than it is tall.

x1-10 = 3 * (y1-10)  or  x1 = 3 * (y1-10) + 10  or  x1 = 3*y1 - 20

The second constraint: x1,y1 lies 10 pixels away from the circle. If we describe another circle 10 pixels larger than the first, the point will lie on it.

(x1-x2)^2 + (y1-y2)^2 = (r+10)^2

Substituting for x1:

(3*y1 - 20 - x2)^2 + (y1-y2)^2 = (r+10)^2

This is great, because r, x2, and y2 are known; the only unknown left is y1. Let’s see if we can gather all the y1’s together.

(3*y1 + (-20 - x2))^2 + (y1-y2)^2 = (r+10)^2
3^2*y1^2 + 2*(3*y1*(-20-x2) + (-20-x2)^2 + y1^2 + 2*y1*-y2 + y2^2 = (r+10)^2
3^2*y1^2 + y1^2 + 6*(-20-x2)*y1 + 2*-y2*y1 + y2^2 = (r+10)^2
(3^2+1)*y1^2 + (-120 - 6*x2 - 2*y2)*y1 + y2^2 = (r+10)^2

At this point it’s looking almost like a quadratic equation. One more little tweak:

10 * y1^2 + (-120 - 6*x2 - 2*y2) * y1 + (y2^2 - (r+10)^2) = 0

The final step is to apply the Quadratic Formula.

a*y1^2 + b*y1 + c = 0
a = 10
b = (-120 - 6*x2 - 2*y2)
c = (y2^2 - (r+10)^2)
y1 = (-b +/- sqrt(b^2 - 4*a*c)) / 2*a

There are two possible answers from the quadratic equation, but one of them will put the rectangle on the far side of the circle. It should be easy to eliminate that case.