Bezier Interpolant Curves (r183-inspired)
Interactive keyframe interpolation lab using cubic Bezier interpolation between sampled points with tunable tension and live marker playback.
Key topics: three.js animation, bezier interpolant, keyframe interpolation, curve tension, r183
Game Over
What this code does
- Bezier Keyframe Interpolation: each segment derives Bezier control points from neighboring keyframes and a tension factor.
- Live Curve Rebuild: changing tension updates the entire smoothed path so interpolation behavior is immediately visible.
- Marker Playback: animated sphere traverses the interpolated curve to show temporal continuity between samples.
- Comparison Baseline: dim polyline shows raw samples while bright line shows Bezier-smoothed interpolation.
- Practical Use: helps tune path smoothness for camera rails, motion curves, and timeline-based procedural animation.
Related Demos
Continue Learning
JavaScript Implementation
function cubicBezier (t, p0, p1, p2, p3) {
const it = 1 - t
return (
it * it * it * p0 +
3 * it * it * t * p1 +
3 * it * t * t * p2 +
t * t * t * p3
)
}
// A tiny Bezier interpolant over keyframes.
function evaluateBezierKeyframe (u, values, tension) {
const count = values.length
const scaled = u * (count - 1)
const i = Math.min(Math.floor(scaled), count - 2)
const localT = scaled - i
const p0 = values[Math.max(0, i - 1)]
const p1 = values[i]
const p2 = values[i + 1]
const p3 = values[Math.min(count - 1, i + 2)]
const c1 = p1 + (p2 - p0) * tension / 3
const c2 = p2 - (p3 - p1) * tension / 3
return cubicBezier(localT, p1, c1, c2, p2)
}