Comments on: How to divide a div into two triangles with Javascript?
http://ask.metafilter.com/232701/How-to-divide-a-div-into-two-triangles-with-Javascript/
Comments on Ask MetaFilter post How to divide a div into two triangles with Javascript?Tue, 08 Jan 2013 08:40:41 -0800Tue, 08 Jan 2013 08:49:43 -0800en-ushttp://blogs.law.harvard.edu/tech/rss60Question: How to divide a div into two triangles with Javascript?
http://ask.metafilter.com/232701/How-to-divide-a-div-into-two-triangles-with-Javascript
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!post:ask.metafilter.com,2013:site.232701Tue, 08 Jan 2013 08:40:41 -0800eustacescrubbjavascripttrianglehoverHTMLresolvedBy: pipeski
http://ask.metafilter.com/232701/How-to-divide-a-div-into-two-triangles-with-Javascript#3368809
Assuming the line dividing the rectangle runs from the top-left corner to the bottom-right:<br>
<br>
First get the gradient of the dividing line, which is (div height / div width). Call this value 'g'.<br>
Then get the x- and y- coordinates of the mouse, relative to the top-left of the div.<br>
<br>
If (mouse_y / mouse_x) is less than g, the mouse is over the top/right triangle.<br>
If (mouse_y / mouse_x) is greater than g, the mouse if over the bottom/left triangle.<br>
If (mouse_y / mouse_x) is equal to g, you're on the dividing line.<br>
<br>
You'll also need to treat as special the case where mouse_x = 0, because that'll produce a divide-by-zero error.<br>
<br>
If your dividing line runs the other way, the calculation will be slightly different.comment:ask.metafilter.com,2013:site.232701-3368809Tue, 08 Jan 2013 08:49:43 -0800pipeskiBy: eustacescrubb
http://ask.metafilter.com/232701/How-to-divide-a-div-into-two-triangles-with-Javascript#3368814
<b>pipeski</b>, 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.comment:ask.metafilter.com,2013:site.232701-3368814Tue, 08 Jan 2013 08:53:28 -0800eustacescrubbBy: pipeski
http://ask.metafilter.com/232701/How-to-divide-a-div-into-two-triangles-with-Javascript#3368826
In that case, just invert the mouse_x thus (w is the div width):<br>
<br>
If (mouse_y / (w - mouse_x)) is less than g, the mouse is over the top/left triangle.<br>
If (mouse_y / (w - mouse_x)) is greater than g, the mouse if over the bottom/right triangle.<br>
If (mouse_y / (w - mouse_x)) is equal to g, you're on the dividing line.comment:ask.metafilter.com,2013:site.232701-3368826Tue, 08 Jan 2013 09:03:35 -0800pipeskiBy: chairface
http://ask.metafilter.com/232701/How-to-divide-a-div-into-two-triangles-with-Javascript#3368840
If you know the equation for the line in this form:<br>
<br>
Ax + By + C = 0<br>
<br>
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.comment:ask.metafilter.com,2013:site.232701-3368840Tue, 08 Jan 2013 09:17:52 -0800chairfaceBy: eustacescrubb
http://ask.metafilter.com/232701/How-to-divide-a-div-into-two-triangles-with-Javascript#3368862
<strong>pipeski</strong>, worked like a charm. Thank you!comment:ask.metafilter.com,2013:site.232701-3368862Tue, 08 Jan 2013 09:42:39 -0800eustacescrubbBy: w0mbat
http://ask.metafilter.com/232701/How-to-divide-a-div-into-two-triangles-with-Javascript#3369379
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.<br>
<br>
eg <br>
<br>
if (squared(mouse_x - left) + squared( mouse_y - top)) > <br>
(squared(right - mouse_x ) + squared(bottom - mouse_y))comment:ask.metafilter.com,2013:site.232701-3369379Tue, 08 Jan 2013 16:29:18 -0800w0mbat