Code for smooth spline animation with keyframes?

Programming Questions

hamoid

Code for smooth spline animation with keyframes?

in Programming Questions • 1 year ago

Hi,

I want to write a program that can smoothly pan and zoom in a photo. It should have keyframes and positions. It should pass each position at the right frame.

Drawing a continuous curve using bezier curves is not hard. The problem comes when animating. If one segment has more frames than the next one there will be a sudden change in speed, which I want to avoid.

You can see the speed change in this program I wrote (sometimes it's not so obvious, depends on the random values you get) http://studio.sketchpad.cc/sp/pad/view/ro.91U$eaK67FtNp/latest

TL;DR Does someone have code that allows that kind of animation?

According to Wikipedia, "In computer graphics, Catmull–Rom splines are frequently used to get smooth interpolated motion between key frames. For example, most camera path animations generated from discrete key-frames are handled using Catmull–Rom splines. They are popular mainly for being relatively easy to compute, guaranteeing that each key frame position will be hit exactly, and also guaranteeing that the tangents of the generated curve are continuous over multiple segments. "

I've read all the tech notes at http://algorithmist.net/, downloaded http://www.algorithmist.net/as3pc.html and http://www.degrafa.org/code/ but as far as I can tell, there is no keyframe system to do spline animation. I only find formulas for drawing curves.

This seems to be the right direction, but at least in the example all time segments have the same duration, and that ActionScript/MXML code is not that straightforward to translate. I can not try these demos (no Silverlight plug-in) but I think this is what I want to achieve, done the Microsoft way.

Replies(2)

amnon.owed

Re: Code for smooth spline animation with keyframes?

1 year ago

Check out proscene. It's chock-full of Catmull-Rom interpolated camera's and allows keyframes.

At first look when I compare your example interpolation to driving in a car. It's almost as if it drives super slow on a short road and super fast on a long road. The end result is that it takes just as much time to drive over either a long or a short road. However, what you perhaps want, is a car with a constant speed touring the countryside. This means no matter if the road is long or short, it keeps on going at the same speed.

To do this you might have to chop up your road in fixed distance parts (instead of interpolate over it). Check out Toxiclibs, which has the ability to do that.

hamoid

Re: Code for smooth spline animation with keyframes?

1 year ago

Thanks a lot for the links! I'm checking them out.

I know I can have a constant speed over the curve by subdividing it in equal length segments, but that's not what I'm looking for. I want it to go fast and slow, but transitioning smoothly.

I have it in my head how to do that. It would involve moving through each segment at a non linear speed, using another bezier to transition speeds. It's a good training for my brain, but I think I've done enough thinking for the last two days :)

Top Reply