Geometry question

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

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.

3 Likes

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!