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

  • \$\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\$ – Martijn Courteaux Jul 25 '12 at 6:49

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.

  • 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\$ – Nathan Reed Apr 19 '12 at 23:51

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.