Weeknotes № 28
Bezier Curves
Last week we put the finishing touches to the animation chapter, and recorded a bunch of episodes to cover the summer break. I worked a bit on my talk as well.
For our keyframe reimplementation, we also wanted to have cubic bezier timing curves. This was interesting to implement: sampling a cubic bezier curve is actually really simple, I was basically able to take Wikipedia’s algorithm and just write it down in Swift. The algorithm is a function from t
to a point (you can actually use VectorArithmetic
instead of a point, which I did). After plotting everything, I realized that the t
isn’t used as the time value. Instead, if you use a CGPoint
, the x
value is the time, and the y
value the progress. in other words, the t
is used to sample the result, but not as the time or value.
This makes a lot of sense, but took me a while to figure out. To provide an efficient implementation, we need to then first find a t
for a given time (in other words, find t
for x
). There seem to be a number of efficient ways to do this this and this seems to be helpful. Once we have the correct t
we can get y
as well.
When you have multiple cubic bezier keyframes after each other, the implementation uses Catmull-Rom to interpolate between the keyframes. I also managed to implement this (on top of quadratic bezier curves), getting the exact same timing curve. Hopefully we can get this to Swift Talk sometime soon!
The summer holiday has started here, we had family visiting and will be going on a trip of our own. So next week there almost certainly won’t be any weeknotes.