Looking to make complex curves

First of all, this is an awesome library! I spent a long time looking for implementations a couple of weeks ago and didn’t find this.

I’m looking at using this for some animations we are working on where we have some complex animation curves and I was wondering if you might be able to confirm if my idea should work, and also whether you might like it as a PR for this repo.

So, what we need is a way to specify curves with multiple control points and still interpolate from 0 -> 1.

This one, for example, does 80% of its movement in the first 20% of time and the final 20% in the last 80% of time.

The curve for the first bit is [0.23830050393398, 0, 0.25586732616931, 0.79011192334632] and the second is [0.21787238302442, 0.98324004924648, 0.58694150667646, 1].

What I’m planning is something taking a list of points and control points and be able to use them as if they were one curve:

var curve = [{
    cp: [0.23830050393398, 0, 0.25586732616931, 0.79011192334632],
}, {
    cp: [0.21787238302442, 0.98324004924648, 0.58694150667646, 1],
    p: [0.2, 0.8] // first curve will finish at [0.2, 0.8], rest of the curve follows the cp above
}];

var easing = cubicBezier(curve);

easing(0); // = 0
easing(0.2); // = 0.8 because we are at the end of the first curve
easing(1); // 1

So, the first curve would go from 0 -> 0.2, you would take the values from the curve and times them by 0.2 (because a 1 from the first curve would put you at 0.2 on the total curve). The second curves values would be 0.2 + 0.8*secondCurve.

I imagine it would work that, a single control point wouldnt need a p value because it would go from 0 -> 1 as normal, for two onwards you have p to tell you where the last curve finished.

So my two questions, does this work out mathematically as far as you can tell? And would you like a PR when I try this later?

Thanks again

[lukebatchelor]

You’ve been an awesome help, thanks heaps @gre!

[lukebatchelor]

Ah, so I’ve just realised my original idea was wrong.

For anyone that sees this later, there is a difference between a series of independent bezier curves and a single complex curve that has multiple control points. What I didn’t consider was that the control points affect both the next part of the curve and the previous one.

It looks like your library is exactly what I need.

I might have a couple of questions about it, but I’ll direct them to the other repo.

Thanks again!