Cubic Hermite Spline

var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
addChild(new Bitmap(canvas));

// create some draggable dots
var p0:Sprite = dot(100, 100);
var p1:Sprite = dot(200, 200);
var m0:Sprite = dot(200, 100, 0xFFFFFF, 3)
var m1:Sprite = dot(100, 200, 0xFFFFFF, 3);

addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
	canvas.fillRect(canvas.rect, 0x000000);
	var px:Number = 0;
	var py:Number = 0;
	for (var t:Number = 0; t <1; t+=.01){
		var t_2:Number = t * t;
		var t_3:Number = t_2 * t;
		
		// some repetitive math for clarity
		px = (2 * t_3  - 3 * t_2 + 1) * p0.x +(t_3 - 2 * t_2 + t) *
				 m0.x + (-2 * t_3 + 3 * t_2) * p1.x + (t_3 - t_2) * m1.x;
		py = (2 * t_3  - 3 * t_2 + 1) * p0.y +(t_3 - 2 * t_2 + t) *
				 m0.y + (-2 * t_3 + 3 * t_2) * p1.y + (t_3 - t_2) * m1.y;
		canvas.setPixel(px, py, 0xFF0000);
	}
}
// draggable dot
function dot(xp:Number, yp:Number, col:uint = 0x507399, rad:Number=5):Sprite {
	var s:Sprite = Sprite(addChild(new Sprite()));
	s.x = xp;
	s.y = yp;
	with(s.graphics) beginFill(col), drawCircle(0,0,rad);
	s.buttonMode = true;
	s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
	return s;
}
function onDrag(evt:MouseEvent):void {
	evt.currentTarget.startDrag()
}
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
function onUp(evt:MouseEvent):void{
	stopDrag();
}

This is the start of my exploration of Cubic Hermite Splines (like Catmull–Rom)… I wrote this snippet while skimming the wikipedia article on the subject…. at first I wasn’t sure if this was correct, but I added tangent calculations for a Catmull-Rom and it worked nicely… will post that tomorrow.

Leave a Reply

Your email address will not be published. Required fields are marked *