Geometry question


(Jay) #1

Hi, I have a question about geometry of objects. Is it possible to anchor a position on an object so that it is always pointing in the direction a user has the object?
An example would be a ship moving across a sea on a iPad where gravity is controlled by the user.

Thanks for any insight!
Jay


(π•„π•šπ•”π•™π•’π•–π• 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

Ha ha. It doesn’t look like anyone is jumping in to answer this one. I wrote about this in my last two textbooks. I figure I should cover it in the Hype Book. It was a bit tricky to do it in Hype.

Basically, you need to figure out the angle from one point to another. That is basic Geometry, but it needs to be translated into JavaScript.

window.onmousemove = function(event) {

mx = event.pageX; // Mouse X
my = event.pageY; // Mouse Y
rx = parseFloat(box.style.left) + (parseFloat(box.style.width)/2); // X-Center of the box
ry = parseFloat(box.style.top) + (parseFloat(box.style.height)/2); // Y-Center of the box
angle = Math.atan2((my-ry),(mx-rx)) * (180/Math.PI) ; // AHHHH MATH!

box.style.WebkitTransform = "rotate(" + angle + "deg)"; // Rotate the box

	}

β€œbox” is the ID of an element in the scene. I put an arrow in it that faces to the right (zero degrees). With the above JavaScript, the arrow turns to face the mouse.

facing.hype.zip (10.5 KB)

To make it follow a different element, use the location of that element instead of the mouse location. I included a template on this post so you can see. I’m planning something prettier for the book. HA HA.


Align an object to the mouse pointer
A Book About Hype (3.5+Pro) – NOW AVAILABLE! πŸ“˜
Question on Hype
(Jay) #3

Hi Michael, that is certainly a complete answer! I appreciate you taking the time to show the js and your hype file example. I’m very new to Hype and will be heading over to your site to find more info on your books. The whole JavaScript part of hype I don’t understand yet so I’m encouraged to know someone is providing information on working in Hype. I want to learn and push the boundaries of Hype!