jQuery widget for editing cubic splines that wrap around. Useful at least for controlling looping animations.

Basic init with random knots

Init with chosen knots

Reading the computed y-values

Showing the playhead and controlling an animation

The widget needs a div to live in, with an explicitly defined size so the canvas element that gets created inside of it knows how big to be.

<div id="foo" style="width:200px;height:200px;"></div>

Init the widget like so:

$('#foo').splineEditor();

Naturally you need to include the plugin and the dependencies jquery, underscore and sylvester. Please see example.html on how to do this.

You can choose the initial knots (also known as control points) by passing in the initialKnots option. [0, 0] is top left.

$('#foo').splineEditor({
	initialKnots: [
		[100, 140],
		[160, 100],
		[220, 140]
	]
});

To get what the interpolated y is at some point:

var x = 100; // for example
var y = $('#foo').splineEditor('getY', x);

To animate based on the data, you would start a setInterval and then read each y for each frame.

When using the editor to control an animation, you might want to show the user where the animation is currently at, similar to how Adobe Flash shows a playhead as the animation is playing. You can show a black line at a certain x pos by using showPlayhead, setPlayheadX and hidePlayhead. See example4.html.

If you found the editor widget useful, I'd love to hear from you.Drop me a line at [email protected]