It's not magic, it's just math. The cross product [1] between the vector of the mouse movement and the vector of the mouse's location to the menu's top left corner tells you the relative orientation of the two vectors. Compare that to cross product in regards to the menu's bottom left corner and you can easily figure out that the mouse must be moving towards the menu. This is much easier than figuring out the bounding triangle that the person drew in this article and then figuring out if the mouse is inside of it.

[1] http://en.wikipedia.org/wiki/Cross_product

Are you sure about that? The dot product gives a measure of the orientation between two vectors, the cross product gives perpendicularity and is vector valued (kind of, the distinction matters more for physics than graphics). It also only makes sense in 3 and 7 dimensions without generalizing the concept of vector.

Balls, you are correct, dot product is the correct operation, not cross product. Been a while since graphics ops were on my table.

EDIT: Well, cross product would work, too, if you extended the 2D vectors into 3D vectors, coplanar in the screen. The orientation of the cross product into or out of the screen would also tell you the relative orientation of the two vectors. So then, you'd be looking for the two cross products with differing signs on the Z component to tell you if it's "in the triangle".

After some playing around, dot product won't do it. You can get close with dot product, but it really only gives you the general direction. Cross product (and really, only calculating the Z component of the cross product of coplanar 3D vectors) will get it exactly right every time.

So basically, for a moving between two mouse points (Ix, Iy) and (Ax, Ay), and a top left menu corner (Bx, By) and bottom left (Cx, Cy), then:

DAx = Ax - Ix

DAy = Ay - Iy

DBx = Bx - Ix

DBy = By - Iy

DCx = Cx - Ix

DCy = Cy - Iy

Z1 = DBx * DAy - DAx * DBy

Z2 = DCx * DAy - DAx * DCy

Then, you know you're headed towards that menu if Z1 < 0 and Z2 > 0.

Could be simplified a little if you assume the X component of the top left corner of the menu will be the same as the X component of the bottom left corner, but the math was clearer to keep them separate.

And if you have any convex polygon as an ordered, circular list of points proceeding clockwise, then you can easily loop around the points checking your cross product values making sure they are all greater than 0 to determine if the point is in the polygon. You'll have to tessalate concave polygons into a list of convex polygons, but that's eaaaaaasy ;)

Right and excellent explanation. I was more disagreeing with your definition than saying it could not be done with "cross products" (although it's still bad terminology, biased to people that already know the concepts). That's why I couldn't say you were wrong. Intuitively, a measure of how parallel two vectors of arbitrary dimensions are, is a better default when talking about orientation of vectors.

You need cross product if you want to know sign. Dot product won't tell you which side of the line you're on, and that sounded like a big part of the algorithm.

No, the dot product won't work in this case. Take the two edges of the triangle as vectors. You want the mouse vector to fall in between. The dot product can't tell you which side of the two edge vectors your mouse vector falls on, but the cross product can if you look at the component of the cross product that points in/out of the screen.

Actually, you can make the dot product give you that answer, but you would need use the dot product of the mouse vector and two vectors normal to the edge vectors, which is really just a roundabout way of using the cross product.

I just happen to have this open in another tab, but only helpful if you are a Mac user: https://gist.github.com/dergachev/4627207

Thank you! In the gist comments I discovered another nice product that does something very similar using canvas: Phosphor - http://news.ycombinator.com/item?id=5137028

https://code.google.com/p/sharex/ makes those types of gifs very easy on windows. It can also do a load of other cool stuff.

Off topic, but the Reddit post about Neox Screen using the ShareX source code and asking for donations is quite disheartening. Not that anything illegal occurred, just the level of deceitfulness.

http://www.reddit.com/r/opensource/comments/17qmek/my_friend...

Once, I put a broken treadmill on the curb with a sign that said "Free." I came back a while later and it had a sign that said "$20".

Since others answered the harder question: camtasia+gifbrewery

I'm guessing that the cross product magic was a hit test for a triangle. Here's an explanation:

http://www.blackpawn.com/texts/pointinpoly/default.html

Here are a few different solutions to determine if a point is in a polygon with code examples. I think solution 3 might be applicable and faster.

Section: Determining if a point lies on the interior of a polygon http://paulbourke.net/geometry/polygonmesh/

Yup, that looks right, but it can be made even simpler in this case because one of the segments is always vertical.

  var prevOffset = prev.x-lowerRight.x;
  loc.x < lowerRight.x
  && (loc.y-prev.y)*-prevOffset-(loc.x-prev.x)*(upperRight.y-prev.y) <0
 && (loc.y-lowerRight.y)*prevOffset-(loc.x-lowerRight.x)*(prev.y-lowerRight.y) < 0

This is in fact equivalent to what's in jQuery.menu-aim.js, eg upperSlope < prevUpperSlope => upperSlope - prevUpperSlope < 0, then inline slope() and multiply through by the denominators.

I'd prefer the code above though, as there's no icky division by zero.

Got it, thanks! Should've thought about googling "hit test triangle".