5

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.

the animation path

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

Can someone help me with the function?

Improve this question
5
  • i would try a pursuit curve, where your drawing cursor follows an invisible point which moves on a hard triangle path at a certain distance, thereby smoothing the edges. This would also enable to ease into the triangle.
    – Thies Heidecke
    Commented Sep 27, 2012 at 21:14
  • I'd recommend a loop of Beziers to the rescue, they are nicely documented and easily implemented, and you can get the exact position at any time. However, they have an annoying property of not maintaining a constant speed along the path, and your animation will be much slower at the rounded ends than along the edges.
    – Lyth
    Commented Sep 27, 2012 at 22:37
  • a superformula with a=3 could help
    – Bergi
    Commented Sep 27, 2012 at 22:45
  • Uh, this question gave me more points than my whole reputation. that´s nice!. Can somebody assign it to my account please?
    – Benjamin
    Commented Sep 28, 2012 at 6:55
  • @Benjamin: I guess you'd need to link your two stackexchange accounts
    – Bergi
    Commented Sep 29, 2012 at 13:21

1 Answer 1

Reset to default
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θ)

Improve this answer
1
  • Thanks - thats exactly what i needed. Here is a prototype: jsfiddle.net/qgPVn/4 I am still working on the beginning of the animation .. As soon as i got this account mess cleared up, i will accept your answer!
    – Benjamin
    Commented Sep 29, 2012 at 23:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.