4
$\begingroup$

I am decrementing/incrementing position x until it reaches y. However, this creates a rectangular-like path. I want position x to smoothly curve towards y (diagonally) on a 2D plane.

What kind of maths would I need to achieve this? Example image attached.

Algorithm

$\endgroup$

2 Answers 2

5
$\begingroup$

The math you need is linear interpolation. I think of a player sprite which moves from position X to position Y. Pseudocode:

playerSprite.x = Y.x + t * (X.x - Y.x)
playerSprite.y = Y.y + t * (X.y - Y.y)

where t is a value between 0.0 and 1.0 (floating point). Instead of incrementing the position components of Y you increment t till it reaches 1. When it reaches 1 the playerSprite reached point X. If t is 0, then the playerSprite is at position Y.

$\endgroup$
2
  • $\begingroup$ Thanks, works great! I'm still not quite understand the purpose of the float. Is it possible to have the object's speed static? $\endgroup$
    – user4570
    Jun 14, 2016 at 19:13
  • $\begingroup$ yes, the part (X.x - Y.x) is the first component of the direction vector. If you normalize it, you could multiply it with your speed and delta time. Regarding a former question that you posted on stackexchange, you should gather more information on linear algebra. See this for example. $\endgroup$
    – Timm
    Jun 14, 2016 at 20:01
5
$\begingroup$

What you want is linear interpolation like @Tim points out. However he uses a formula that is not so easily understandable form, we can refactor it differently. Basically linear interpolation is a weighted average where the weight of the first term is in range of 0-1 and the weight of the other value is 1-weight. Literature usually uses t for the weight and y for input (y can be a scalar, vector, matrix or mostly any construct). A more understandable version of the formula in scientific form is:

$$ y = t \cdot y_1 + (1-t) \cdot y_0 \quad \quad t \in [0,1] $$

As code it looks like:

playerSprite.x = t * Y.x + (1-t) * X.x 
playerSprite.y = t * Y.y + (1-t) * X.y 

There is a simple visual interpretation of this:

enter image description here

Image 1: Visual interpretation of weights (below) and the sum of vectors and position on line (above)

$\endgroup$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.