So I do a lot of animations in JS, as far as moving things around, rotating, resizing, all sorts of stuff.
When I move a sprite, I generate a set of points from it's starting location to it's target location, and without going into unnecessary detail, let's say I have smooth 'regular' movement down. That is, moving in straight or diagonal lines.
What I can't figure out is how to mathematically generate a set of x, y coords that will allow my shapes to move in arcs, or curved patterns.
I would like to be able to create two separate arrays (since my animation methods already use arrays) that contain the x and y points for an image to move, with the ability to specify the beginning/ending points of the movement.
Each frame, I pop the next x and y coords from these arrays and set them as the target sprite's x and y properties, creating smooth movement.
But on the way there, I'd like the shape to move in a sort of curve or arc, rather than just a straight or diagonal line. Does this make sense?
I'd also like the 'length of time', or really, the length of the list to be variable.
I've researched it a lot, but there are so many different contexts under which one would try to mathematically define a curve, and I haven't found any that allow me to create a set of x, y points that could be used as a path for a sprite to move along.