1
$\begingroup$

I want to check an element if it's in a circle in my browser. I know the circle formula from my high school:

enter image description here

But I'm not sure if it's same in browser XY system too. Because browsers zero coordinate is on left top of the page and from there to right is positive x axis and to bottom is positive y axis.

Browser XY

For example in this picture point c have positive x and y. Please optimize the circle formula for this system and also give me the correct formula for a circle centered in c = (200,200) with 150 radius.

2 Answers 2

4

For any affine change of variables $x \to a_1 x + a_2 y + a_3$ and $y \to b_1 x + b_2 y + b_3$ the equation of the circle $(x-x_0)^2 + (y-y_0)^2 = r^2$ translates into $ ( a_1 x + a_2 y + a_3 - x_0)^2 + (b_1 x + b_2 y +b_3 - y_0)^2 = r^2 $ Expanding $ \begin{eqnarray} & & x^2 ( a_1^2 + b_1^2) + y^2 (a_2^2 + b_2^2) + 2 x y ( a_1 a_2 + b_1 b_2) \\ && + 2 x ( a_1 (a_3 - x_0) + b_1 (b_3-y_0) ) + 2 y ( a_2 (a_3 - x_0) + b_2 (b_3-y_0) ) \\ && + (a_3-x_0)^2 + (b_3 - y_0)^2 = r^2 \end{eqnarray} $ Now, choosing $a_1$, $a_2$ and $b_1$ and $b_2$ so that $ a_1^2 + b_1^2 = a_2^2 + b_2^2 = 1 \qquad a_1 a_2 + b_1 b_2 = 0 $ and completing squares will again arrive at $(x-\hat{x}_0)^2 + (y-\hat{y}_0)^2 = \hat{r}^2$.

2

Even with the $y$-coordinate flipped, the equation for your circle is still $ (x-200)^2+(y-200)^2=150^2\tag{1} $ In the normal coordinates, this would be the circle of radius $150$ and center $(200,-200)$ so the equation with flipped $y$-coordinate would be $ (x-200)^2+(-y-(-200))^2=150^2\tag{2} $ Equation $(2)$ is the same as equation $(1)$ since $(-1)^2=1$.

  • 0
    @Mohsen: He's demonstrating that changing the signs of $y$-coordinates has no effect here.2011-09-21