5 ms·
Really nice! Two questions: - What's the "cross-product magic Amazon uses to detect movement inside the 'blue triangle.'"? - How did you do those GIFs?
by slig 14y ago
Really nice! Two questions:
- What's the "cross-product magic Amazon uses to detect movement inside the 'blue triangle.'"?
- How did you do those GIFs?
- bjterry 14y agoI just happen to have this open in another tab, but only helpful if you are a Mac user: https://gist.github.com/dergachev/4627207 https://gist.github.com/dergachev/4627207
- slig 14y agoThank 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 http://news.ycombinator.com/item?id=5137028
- moron4hire 14y agoIt'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 http://en.wikipedia.org/wiki/Cross_product
- Dn_Ab 14y agoAre 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.
- moron4hire 14y agoBalls, 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".
- Dn_Ab 14y agoRight 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.
- gbhn 14y agoYou 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.
- moron4hire 14y agoAfter 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.
- bazzargh 14y agoI'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 http://www.blackpawn.com/texts/pointinpoly/default.html
- slig 14y agoGot it, thanks! Should've thought about googling "hit test triangle".
- jamesmiller5 14y agoHere 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/ http://paulbourke.net/geometry/polygonmesh/
- bazzargh 14y agoYup, 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.
- glomph 14y agohttps://code.google.com/p/sharex/ 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.
- jchavannes 14y agoOff 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_friends_software_got_cloned/ http://www.reddit.com/r/opensource/comments/17qmek/my_friend...
- duncanj 14y agoOnce, 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".
- kamens 14y agoSince others answered the harder question: camtasia+gifbrewery