Question

i want to make an animation in javascript where an object moves on a path.
For this i need a function that returns me X/Y coordinates on the path for a given time.
The path should be a triangle with soft edges.

At the beginning of the animation it should soft move into the triangle path – but this i could solve maybe in a different function .. more important to me is the function which can return me the X/Y coordinates for the move on the triangle.

The animation should then loop endless on the triangle path.

Are there (online) tools to create coordinates for such a animation?

Can someone help me with the function?

Answer 1

I’d recommend something like sqrt(x²+y²)=2.5+sin(atan2(y,x)*3)/5 – polar: ρ(θ)=2.5+sin(3θ)/5. It’s a simple polar coordinate system, and adding a compressed sine wave (3 periods per turn) on a circle:

θ(t) = t // angle
ρ(t) = 2.5 + 0.2 * sin (t * 3) // radius
// of course, you can play with the parameters :-)

You can easily convert those polar coordinates into cartesion ones.

The animation at the beginning, moving from the center into the path, would need an extra function of course. Yet, it could be done with the same mechanic – leaving out the circle part: ρ(θ)=2.5*sin(3θ)