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.
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.
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:
Image 1: Visual interpretation of weights (below) and the sum of vectors and position on line (above)
