# Coordinate of intersection between line and square

TL;DR given a square and a point $p$, I need the intersection between the perimeter of the square and a ray cast from the center of the square through point $p$. This is my approach so far, but I will also accept correct answers that use a totally different approach.

I’m writing an iPad app where there is a square on the screen. The user drags their finger around the screen. Imagine an ray starting at the center of the square and passing through the point where their finger is touching. I need to do stuff on the screen at the intersection between that line and the center of the square.

The way I am doing this currently is by using the parametric equation of a square that I found at this answer:

\begin{align*}x&=p\left(|\cos\,t|\cos\,t+|\sin\,t|\sin\,t\right)\\y&=q\left(|\cos\,t|\cos\,t-|\sin\,t|\sin\,t\right)\end{align*}

And for $t$, I am using the angle of the ray formed by the person’s finger. I am placing a small dot at the point given by that equation, just so I can see what I’m working with. I have to multiply that angle by $-1$ and add $\pi\over4$ so that the angles match up.

My problem is that the equation of a square does not vary at the same rate as the angle. For any given value of $t$, a ray cast from the center of the square to the user’s finger does not pass through the square at the point given by the above equation, except at the centers of the sides and at the exact corners. The effect is that the dot I am putting on the screen lags or ahead of the user’s finger.

Is there any way to get the point returned by the above equation to be collinear with the line from the center to the user’s finger?

Here’s an illustration I put together in the OS X Grapher application so you can see what I mean. If you have a Mac, you can also download the file and play with it yourself. • Or would it be easier to find the equation of the line and solve for when it is equal to the equation of the square? Then I would have to also figure out which of two solutions is the one that I want… Jan 29, 2014 at 2:00
• Based on what you are currently doing, it seems like you only have point $p$ in polar coordinates. Is that the case? Jan 29, 2014 at 2:12
• No, I have it in $(x,y)$ (cartesian). But I am deriving its angle from the polar origin. Not getting its radius, but I could if it would be useful. Jan 29, 2014 at 2:35

u = max(|x|, |y|);

xp = x / u;
yp = y / u;

return (xp, yp);


You can see that this produces a point one of whose coordinates is either $+1$ or $-1$; it's a scalar multiple of $(x, y)$, so it lies on the line from $(0,0)$ through $(x, y)$. And because the multiplier ($1/u$) used is positive, it lies on the same side of $(0,0)$ as $(x,y)$ does.

Note that if both $x$ and $y$ are zero, the procedure fails...but that's to be expected.

• Did you mean $y_p = y/u$? Jan 29, 2014 at 3:12
• Yes -- fixed now. Thanks! Jan 29, 2014 at 3:12
• This is freakishly cool. It took me a while to understand exactly how it works, but once I had mapped out all the values, it turned out to be exactly what I needed. Thank you! Jan 29, 2014 at 5:05
• One might say this in a fancy way: $|x_2 - x_1| + |y_2 - y_1|$ gives a metric on $\mathbb R^2$ in which the "unit circle" is exactly your square; all I did was to divide a vector by its length (in this metric) to "normalize" it, just like dividing by euclidean length would normalize it onto the circle $x^2 + y^2 = 1$. Jan 29, 2014 at 13:03
• @ZevEisenberg I see your question, I see your graphic, and I have no clue why this answer makes you happy. Its like apples, apples and hippos. It's not clear what x, y we're talking about in the eqn u = max(|x|, |y|); . Is that the coordinates of the first user touch on the graph above? How does that let you calculate an accurate parameter (t) to determine the intersection point on the rectangle? I see how that calculation gets you to the unmarked blue dot on the inner circle on your graph, but that wasn't the goal, was it? What am I missing? Many thx. Oct 17, 2016 at 2:29