Trigonometry help!

  • Lord Sivell
  • Novice
  • Novice
  • Lord Sivell
  • Posts: 32
  • Loc: Australia

Post 3+ Months Ago

The problem is as follows:
I have one movieclip (the blue one) that needs to face the target it is going to. I know I have to use trig, but I don't know how to get it to work.

On paper I worked it out that the code inside the blue things movieClip should look something like this:

A = the _x difference between the blue clip and the target clip;
O = the _y difference between the blue clip and the target clip;
// (a as in Adjacent and o as in Opposite)
this._rotation = tan /*to the power of -1*/ *(O/A);

My biggest problem is the tan method that is: tan(angle) In which case I can't get it to be to the power off -1.

Well if any of this made any sense some help would be greatly appreciated:
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Voetsjoeba
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Belgium, Ghent.

Post 3+ Months Ago

If you have the y distance and the x distance, you can easily get the angle out of that by using the atan or the atan2 method. I personally prefer using atan. It works like this:

Math.atan(ydistance/xdistance)

But, you need to take note that two angles can have the same tangent (example: 45 degrees and 45+180 degrees have the same tangent). Therefore, it can be both those angles, so you need to check if the point you clicked lays to the right of your movieclip or to the left. That will make sure which corner it is.

I don't have the time now, but I'll make some drawings for you this evening so you can understand. I don't have the time now to provide some example code, so this is actually a short explanation. A bigger one will be up this evening, hang on ;)

So let's say you have your angle using an if statement whether your point is to the left or to the right of the blue movieclip and the atan method. You would then need to convert it to degrees (Flash uses radians, based on pi: 180° = pi), to be able to use the _rotation property.

PI radians = 180 degrees
<=> 1 radiant = 180 / PI degrees

So our converting function will be this:

Code: [ Select ]
Math.convertToDegrees = function(radians){
return radians*(180/Math.PI);
}
  1. Math.convertToDegrees = function(radians){
  2. return radians*(180/Math.PI);
  3. }


Use that method on the angle you got by calculating atan, and you ahve your degrees to rotate to :)
  • Voetsjoeba
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Belgium, Ghent.

Post 3+ Months Ago

Ok, here we go. As you know, the tangent of an angle, is it's sine divided by it's cosine. On the goniometric circle (with radius 1), we can see the tangent:

Image

Because the triangles ABC and AED are congruent, the relation between CB and BA is the same as the one between ED and DA. CB is the sine of angle µ, and BA is it's cosine. (opposite side/hypotenuse with hypotenuse == 1, the same goes for the cosine). Our equasion becomes:

sin µ / cos µ = tan µ / 1. Which is correct. Tangent comes from the latin word tangere by the way, which means 'to touch'. That is exactly what the tangent does: it touches the side of the circle.

Math.atan() is used with y/x: Math.atan(ydistance/xdistance). This is because you need to provide the tangent to calculate the angle from, and the tangent is sin/cos, where sin is on the y (vertical) axis and cos is on the x (horizontal) axis.

But, there's a but. Two angles can have the same tangent:
Image
When calculating the arc tangent ( == atan == tan^-1), Flash will return the angle to the right side of the triangle. But that means that if our point is at the left part of the circle, Flash will return the angle at the right side that has the same tangent.

Therefore, we need to check if our point is at the left or at the right of our circle. If it's at the left, we will have to add 180°, so Math.PI, because Flash uses radians.

Another thing to be aware of is that Flash doesn't go counterclockwise around the circle, but clockwise. And, that the _rotation property doesn't go from 0 to 360, but from -180 to 180. So we can't have a clip rotate to 225° using _rotation = 225. We have to substract 360 from that value to make it negative, and then rotate it to that negative number.

Here's a FLA for you that puts all this theory into practice. Enjoy :)

And I've added the code here ...

Code: [ Select ]
_global.d = 0;
_global.angle = 0;
pointer._rotation = 0;
Math.convertToDegrees = function(radians) {
    return radians*(180/Math.PI);
};
MovieClip.prototype.rotateTo = function(to){
    to > 180 ? to-=360 : null
    this.onEnterFrame = function(){
        this._rotation = to-(to-this._rotation)/1.2
        this._rotation > to-1 && this._rotation < to+1 ? delete this.onEnterFrame : null
    }
}
this.onMouseDown = function() {
    mc = this.attachMovie("dot","dot"+d,d)
    mc._x = this._xmouse
    mc._y = this._ymouse
    var diffX = this._xmouse-pointer._x;
    var diffY = this._ymouse-pointer._y;
    diffX>=0 ? _global.angle = Math.atan(diffY/diffX) : _global.angle = Math.PI+Math.atan(diffY/diffX);
    pointer.rotateTo(Math.convertToDegrees(angle));
    _global.d++;
};
  1. _global.d = 0;
  2. _global.angle = 0;
  3. pointer._rotation = 0;
  4. Math.convertToDegrees = function(radians) {
  5.     return radians*(180/Math.PI);
  6. };
  7. MovieClip.prototype.rotateTo = function(to){
  8.     to > 180 ? to-=360 : null
  9.     this.onEnterFrame = function(){
  10.         this._rotation = to-(to-this._rotation)/1.2
  11.         this._rotation > to-1 && this._rotation < to+1 ? delete this.onEnterFrame : null
  12.     }
  13. }
  14. this.onMouseDown = function() {
  15.     mc = this.attachMovie("dot","dot"+d,d)
  16.     mc._x = this._xmouse
  17.     mc._y = this._ymouse
  18.     var diffX = this._xmouse-pointer._x;
  19.     var diffY = this._ymouse-pointer._y;
  20.     diffX>=0 ? _global.angle = Math.atan(diffY/diffX) : _global.angle = Math.PI+Math.atan(diffY/diffX);
  21.     pointer.rotateTo(Math.convertToDegrees(angle));
  22.     _global.d++;
  23. };
  • Lord Sivell
  • Novice
  • Novice
  • Lord Sivell
  • Posts: 32
  • Loc: Australia

Post 3+ Months Ago

Whoa! I didn't think it would be that complicated. Thanks for the help I'll give it a try and see what I get :?
  • Voetsjoeba
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Belgium, Ghent.

Post 3+ Months Ago

It's not complicated at all :) Once you get the hang of trigonometry, it's easy as pie ;)

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 23 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.