7
\$\begingroup\$

I'm trying to create a triangular touch surface for iOS where the user can drag around a point inside this triangle. Using information from this page, it is easy to figure out if the dragged point is inside or outside the triangle. However, I want to clip the point to the triangle edges if the user drags outside the triangle.

This is easy for side AB and side AC, because I just have to set vectors u or v to zero respectively if the user's finger drags outside of these edges. However, I'm not sure how to find point p, on side BC. I need to find this point of intersection if the user drags their finger outside of edge BC.

triangle with point and vector labels

\$\endgroup\$
1
  • \$\begingroup\$ Simply take the scalar projection of the vector (B(u+v)) on vector (BC), using the Dotproduct, dividing that by the squared length of BC. \$\endgroup\$ Jul 25, 2012 at 6:49

2 Answers 2

2
\$\begingroup\$

All points on edge BC have the property that |u| + |v| = 1. Reducing the magnitude of the longer vector so that this property is true will get you your intersection point. In your picture this would mean reducing the magnitude of v by 0.245764829343853. This only works if your line from A to the finger crosses BC.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ To elaborate: if you detect u + v > 1, then scale the (u, v) values by 1/(u + v); that will shorten the u + v vector so it lands right on the edge. \$\endgroup\$ Apr 19, 2012 at 23:51
1
\$\begingroup\$

Assuming you have coordinates for A, B, and C (which we'll call Ax, Ay, etc.), and D=u+v, the intersection point is:

X = ((Bx - Cx) (Ax * Dy - Ay * Dx) - (Bx * Cy - By * Cx) (Ax - Dx))/((By - Cy) (Ax - Dx) - (Bx - Cx) (Ay - Dy))

Y = ((By - Cy) (Ax * Dy - Ay * Dx) - (Bx * Cy - By * Cx) (Ay - Dy))/((By - Cy) (Ax - Dx) - (Bx - Cx) (Ay - Dy))

See also Wikipedia's article on Line-line intersection.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .