Skip
# How to divide a div into two triangles with Javascript?

(adsbygoogle = window.adsbygoogle || []).push({});

posted by eustacescrubb at 8:53 AM on January 8, 2013

(adsbygoogle = window.adsbygoogle || []).push({});

Post

# How to divide a div into two triangles with Javascript?

January 8, 2013 8:40 AM Subscribe

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!

**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

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 (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

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

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

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

This thread is closed to new comments.

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]