# Move from point a, to point b, and determine the accuracy

Let's say I have a circle at point a (0,0), and I wish to move it to point b (23,58), whatever, how can I accurately do this with a speed variation if I wanted. (I'm doing this in javascript).

Every attempt I make ends up causing it to shake (as the accuracy is off) someone suggested clamping but I have no idea how to do this or where to even look to figure out how.

Any sources, examples, references, guides, tutorials... that correctly explain it regardless if it's one piece of the puzzle is appreciated.

If it helps, I'm using mouse clicks to determine the position where I should move the object to (Top-Down):

if (char.end.x != char.start.x || char.end.y != char.start.y) {
char.distance = {};
char.distance.x = char.end.x - char.start.x;
char.distance.y = char.end.y - char.start.y;

char.distance.hypot = Math.sqrt(
char.distance.x * char.distance.x +
char.distance.y * char.distance.y
);

char.distance.moves = char.distance.hypot / char.speed;
char.start.x += Math.floor(char.distance.x/char.distance.moves);
char.start.y += Math.floor(char.distance.y/char.distance.moves);
}

• How do you actually move the object? It's hard to tell what is wrong from the description. – sm4 Jun 9 '13 at 6:22
• I will update with my current code, if that helps – LilGrave Jun 9 '13 at 6:30
• From a quick look, I'd say the problem with shaking is the addition of floored values. You have to floor only the x, y coordinates after you add the fraction (and keep the accumulated floating x, y for future addition). If you want to make it fully integer math, look at algorithms like this one: en.wikipedia.org/wiki/Bresenham%27s_line_algorithm But don't worry about floating point math performance just yet, just make it move properly. – sm4 Jun 9 '13 at 6:35
• It's also the fact that I'm checking if they are in the exact location of the end x and y coords – LilGrave Jun 9 '13 at 7:14

This is one way how you can do it: What you need is to parametrize the trajectory. This will be your parametrized line:

y = m * x + b;

Where m is the "slope", or how fast your trajectory grows, and b in your case is the y of the starting point (0) - so we can ignore it.

1) y = m * x for x from [0, 23], where m in your case is 58/23.

For speed variation you need another function that will give you x . Most simple one is of course linear function x = minX + t * (maxX - minX), where t is time (in half time, travel half distance etc). But you can have arbitrary function. Let's consider a more complex function:

2) x = minX + sqrt(t) * (maxX - minX), where t from [0, 1] (one second)

In you game loop to determine the position of the sprite, you simply need to get the x from second function (t is the time elapsed from the start of movement) and calculate y from the first function. If you use exactly these two functions, your circle will go very fast in the beginning and slow down until 0 speed at the end.

Note that I've made a lot of simplifications like I don't consider that you can move from right to left etc.

In the function that determines the varied speed you're moving at, add a check to see if the current displacement value + the current position are equal to or more than the target coordinates. If the displacement is greater than the distance between the target and current positions, set it to be exactly the difference. If not, leave it the way it is

Alright, so me and sm4 were on the right track with the flooring, the actual problem with the shaking can be solved by flooring the character.distance.moves and ceil the additions:

if (char.end.x != char.start.x || char.end.y != char.start.y) {
char.distance = {};
char.distance.x = char.end.x - char.start.x;
char.distance.y = char.end.y - char.start.y;

char.distance.hypot = Math.sqrt(
char.distance.x * char.distance.x +
char.distance.y * char.distance.y
);

char.distance.moves = Math.abs(Math.floor(char.distance.hypot / char.speed)) || 1;
char.start.x += Math.ceil(char.distance.x/char.distance.moves);
char.start.y += Math.ceil(char.distance.y/char.distance.moves);
}

• I am pretty sure that the flooring and ceiling now is still wrong. It probably works, because your end.y > end.x. The problem is the floating point manipulation itself. Just remove it completely for now and round only the final coordinates you are using to display your circle. – sm4 Jun 9 '13 at 7:38