15,964,792 members
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

So once the fish sprite detect the method and it will start to move towards it without bouncing back and forth.
Posted
Updated 3-Aug-14 18:08pm
v2
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. (:

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

[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.

Solution 2

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/[^],
Paper.js, a vector-graphics scripting network: http://paperjs.org/[^],
Burst Engine: https://github.com/rwaldron/burst-core[^].

—SA