quadraticCurveTo prototype

talk open source
1

The next step on from CurveTo, takes two anchor points to create a more complex curve.

cubicCurvoTo(origin, control, control, desination)

MovieClip.prototype.cubicCurveTo = function(p0, p1, p2, p3) {
	var x0 = p0._x; var y0 = p0._y;
	var x1 = p1._x; var y1 = p1._y;
	var x2 = p2._x; var y2 = p2._y;
	var x3 = p3._x; var y3 = p3._y;
	this.moveTo(x0, y0);
	for (var t = 0; t <= 1; t += 0.02) {
		var cx = 3 * x1 - 3 * x0;
		var bx = 3 * x2 - 3 * x1 - cx;
		var ax = x3 - x0 - cx - bx;
		var x:Number = ax * t*t*t + bx * t*t + cx * t + x0;
		cy = 3 * y1 - 3 * y0;
		by = 3 * y2 - 3 * y1 - cy;
		ay = y3 - y0 - cy - by;
		var y:Number = ay * t*t*t + by * t*t + cy * t + y0;
		this.lineTo(x, y);
	}
	this.lineTo(x3, y3);
}

Each parameter requires a _x and a _y property. I left it as _x and not just x so you can pass in MC’s. It’s easily changed in the first four lines though.

var names:Array = ["origin", "control", "control", "destination"];
for (var i:Number = 0; i<4; i++) {
	var d:MovieClip = attachMovie("dot", "dot"+i, getNextHighestDepth());
	d._x = Math.random()*Stage.width;
	d._y = Math.random()*Stage.height;
	d.name.text = names*;
	d.onPress = startDrag;
	d.onRelease = d.onReleaseOutside = stopDrag;
}
function onEnterFrame() {
	clear();
	lineStyle(2, 0x9ACDFE);
	moveTo(dot0._x, dot0._y);
	cubicCurveTo(dot0, dot1, dot2, dot3);
}

View the example here