How to divide a div into two triangles with Javascript?

January 8, 2013 8:40 AM

Javascript question: I have a rectangular div. Imagine that div is divided from one corner to the other to make two right triangles. I would like to, on hover, have Javascript tell me which triangle my mouse is over. But my trigonometry powers are failing me, and Google is coming up short. Hope me, admin!
posted by eustacescrubb to Computers & Internet (6 answers total)

Best answer: Assuming the line dividing the rectangle runs from the top-left corner to the bottom-right:

First get the gradient of the dividing line, which is (div height / div width). Call this value 'g'.
Then get the x- and y- coordinates of the mouse, relative to the top-left of the div.

If (mouse_y / mouse_x) is less than g, the mouse is over the top/right triangle.
If (mouse_y / mouse_x) is greater than g, the mouse if over the bottom/left triangle.
If (mouse_y / mouse_x) is equal to g, you're on the dividing line.

You'll also need to treat as special the case where mouse_x = 0, because that'll produce a divide-by-zero error.

If your dividing line runs the other way, the calculation will be slightly different.
posted by pipeski at 8:49 AM on January 8, 2013 [2 favorites]

Response by poster: pipeski, yes, not to be complicated, but I should have mentioned that: the dividing line is from the top right to the bottom left of the triangle.
posted by eustacescrubb at 8:53 AM on January 8, 2013

Best answer: In that case, just invert the mouse_x thus (w is the div width):

If (mouse_y / (w - mouse_x)) is less than g, the mouse is over the top/left triangle.
If (mouse_y / (w - mouse_x)) is greater than g, the mouse if over the bottom/right triangle.
If (mouse_y / (w - mouse_x)) is equal to g, you're on the dividing line.
posted by pipeski at 9:03 AM on January 8, 2013

If you know the equation for the line in this form:

Ax + By + C = 0

you can evaluate it for any point and the sign of the result will determine which side of the line the point is on. In other words, evaluate Ax + By + C and just check the sign. If it's less than 0 it's on one side; if it's zero it's on the line, if it's > 0 then it's on the other side. If the geometry of your div is fixed this makes it pretty easy.
posted by chairface at 9:17 AM on January 8, 2013

Response by poster: pipeski, worked like a charm. Thank you!
posted by eustacescrubb at 9:42 AM on January 8, 2013

Another way to do it is with Pythagoras, measuring which of two anchor corners is closer to the mouse. You can do a faster version of the math as you don't need to know the actual distances, just which is greater, so you can skip the square roots and compare the raw squared distances.

eg

if (squared(mouse_x - left) + squared( mouse_y - top)) >
(squared(right - mouse_x ) + squared(bottom - mouse_y))
posted by w0mbat at 4:29 PM on January 8, 2013