Using Math.atan2 to find the radian angle between 2 different points

Question

1.00/5 (1 vote)

See more:

I'm working on a fish animation. When I click on my canvas, a piece of food will appear and my fish sprite will move forward to it. But the current code I have is something like this:

Fish.prototype.chaseFood = function(index) {
    if (this.xPos > foodArray[index].x + foodWidth) {
        this.speedX = -1 * Math.abs(this.speedX);
    } else if (this.xPos < foodArray[index].x) {
        this.speedX = Math.abs(this.speedX);
    }
    if (this.yPos > foodArray[index].y + foodHeight) {
        this.speedY = -1 * Math.abs(this.speedY);
    } else if (this.yPos < foodArray[index].y) {
        this.speedY = Math.abs(this.speedY);
    }
};

So my fish sprite will always 1 or -1 so it would bounce back and forth till it reaches the food. I'm trying to use Math.atan2 to detect the position of the food and this method allows it can travel exactly towards the food. How do I implement this method:

var point1={x:20,y:30};
var point2={x:125,y:50};

var dx=point2.x-point1.x;
var dy=point2.y-point1.y;

// angle between point1 & point2 normalized within PI*2

var radianAngle=(Math.atan2(dy,dx)+Math.PI*2)%(Math.PI*2);

So once the fish sprite detect the method and it will start to move towards it without bouncing back and forth.

Posted 30-Jul-14 15:40pm

John_90

Updated 3-Aug-14 18:08pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 30-Jul-14 23:54pm

...—SA

Sergey Alexandrovich Kryukov 30-Jul-14 23:54pm

Where is your question? Yes, to find an angle by two catheti it's the best to use atan2. What's the problem?
—SA

[no name] 30-Jul-14 23:57pm

So to allow the fish sprite to swim towards it directly, instead of bouncing back and forth will placing the food at the side of the fish. Because will the piece of food is place directly in front of the fish, it will move smoothly toward it, but when it is place at the side of the fish it will move in a zig zag manner.

Sergey Alexandrovich Kryukov 31-Jul-14 1:22am

Another non-question. I already told you, the fish won't move in zig zag manner, it will go directly to the food. :-)
How is it related to atan2?
—SA

[no name] 31-Jul-14 1:55am

If the food is place in front of the fish, it will go directly to the food. But when it's place beside the swimming direction, the zig zag manner will appear. Check this out: https://vine.co/v/MEgrVVpYa3g Hope you will be able to hope me out. (:

Sergey Alexandrovich Kryukov 31-Jul-14 2:20am

Thank you for this interesting information. I was actually joking around the topic "fish is not so foolish..." :-)
I still see no problem with atan2, which is a really trivial thing, as soon as you already know this "trick" of using it...
—SA

[no name] 31-Jul-14 2:32am

My problem is i do not know how to implement this method in my code to solve the problem. I wanted to fish sprite to move smoothly it in all direction, and not only if the food is infront of the fish.

Sergey Alexandrovich Kryukov 31-Jul-14 3:04am

So, the problem is not atan2...
—SA

[no name] 31-Jul-14 3:24am

I think I am the problem. I can't seems to get the atan2 method working on my code. Are you free to help me to look in my code?

Sergey Alexandrovich Kryukov 31-Jul-14 12:02pm

If dx and dy are calculated correctly, your use is perfectly correct. Makes some sample where you know what are correct dx, dy (use, {0, x}, {x, 0}, {0, -x}, {-x, 0}, for good examples) and check it up under the debugger: you should have get some different values N*Math.Pi/2, where N is +-0..4.., check them up. It's simple.
—SA

[no name] 31-Jul-14 8:47am

Or do you have any other method to achieve it? To make the sprite to move forward smoothly? I really need help for this function to be working. Thank you.

Sergey Alexandrovich Kryukov 31-Jul-14 12:11pm

Never try to do it in Javascript, but 100% sure it's quite possible. I would even through out the cumbersome concept of sprite (reminiscent of 1970x :-) and choose much richer model, based on HTML5 Canvas and probably one of the available frameworks. If you look at the samples, you will absolutely smooth motion if extremely rich scenes.
—SA

[no name] 31-Jul-14 12:27pm

I guess I will stick to this method, as the other method is too tedious. For a beginner like myself, I can't even get the simple method right.

Sergey Alexandrovich Kryukov 31-Jul-14 12:37pm

You see, simplicity is non-linear. Sometime something more advanced is easier.

Simple example with those angles:
In traditional school, children first learn trigonometry, which algebra (sin, cos, atan, and so on...) is pretty tricky to in calculations. Only later, they introduce complex numbers. Conceptually, many have problems understanding them. However, all trigonometry can be rewritten in complex numbers, and all trigonometric functions can be excluded, replaced with exponents/powers/logarithms. It greatly simplifies calculations and make them more regular, less heuristic.

—SA

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2014-07-31T06:05:00

Solution 1

If dx and dy are calculated correctly (the are supposed to be some catheti), your use of Math.Atan2 is perfectly correct.

Use the debugger and check up the following:
Makes some sample where you know what are correct dx, dy (for good examples, use {0, x}, {x, 0}, {0, -x}, {-x, 0}, where x is some non-zero positive value) and check it up under the debugger: for your angle, you should have get some different values of N*Math.Pi/2, where N is +-0..4.., check them up.

It's simple.

—SA

Posted 31-Jul-14 6:05am

Sergey Alexandrovich Kryukov

Comments

[no name] 31-Jul-14 12:23pm

So the Math.atan2 codes is to be place the chaseFood function or it will outside of it?

Sergey Alexandrovich Kryukov 31-Jul-14 12:33pm

This is up to you. Use it where you have to use it...
—SA

[no name] 31-Jul-14 12:46pm

I really need a little more guidance on how should I use that, whether should edit my whole chaseFood function or just adding on the Math.atan2 method into it. I have try it lots of different way, but there is still no progress at all.

Sergey Alexandrovich Kryukov 31-Jul-14 12:59pm

It is really starting to look hopeless. If you cannot cope with such a simple issue, I am afraid further help could only waste time. You know all you need to know. Even if someone write all the really working code for you, it won't help. Well, create some much simpler project and get more experience.
—SA

[no name] 1-Aug-14 4:48am

Really there is no other ways that you able to help me out? It's still not hopeless yet, it's really close to get the swimming manner well. I would appreciate if you could help me out. Thank you.

Sergey Alexandrovich Kryukov · Answer 2 · 2014-07-31T06:17:00

John_90 wrote:
Or do you have any other method to achieve it? To make the sprite to move forward smoothly? I really need help for this function to be working. Thank you.

Well, if you dare to leave the kindergarten of "sprites", the reminiscent of 1970x, the HTML5 Canvas feature will allow you to play with much richer graphics models in absolutely smooth way.

It will take considerable effort, but what you can do is quite impressive:
http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/[^].

You can find several engines already designed, in particular, for creation of vector graphics, which can also be interactive:
Raphaël: http://raphaeljs.com/[^],
CAKE: http://code.google.com/p/cakejs/[^],
Paper.js, a vector-graphics scripting network: http://paperjs.org/[^],
Burst Engine: https://github.com/rwaldron/burst-core[^].

See also this Mozilla tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas?redirectlocale=en-US&redirectslug=HTML%2FCanvas%2FDrawing_Graphics_with_Canvas[^].

—SA