While working on MandalaTron I needed to distribute values along a curve. This helped achieve 2 goals.
- Animate shapes or properties over time. (Tween)
- Skew a random distribution. (Curve)
And sadly I could find no super simple JS library that provided a number of different curving strategies. So, naturally, I looked up the math and then rolled my own.
// Tweens! Tween.easeMethod(now, beginValue, valueChange, duration); // tweened value Tween.easeInSine(20, 100, 100, 30); // 150 Tween.easeInOutExpo(10, 50, 10, 20); // 55 // Curves! Curve.easeMethod(normalizedFloat); // curved value Curve.easeOutQuint(0.9); // 0.99999 Curve.easeInCubic(0.1); // 0.001
Easy to integrate and use, was the main goal here. Check out the example page if you need some tweens or curves in your web or node.js project.