quadraticCurveTo prototype

[Sammo]

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[i];
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 (http://img267.imageshack.us/my.php?image=quadraticcurvetobd1.swf)

[TheCanadian]

Cool, but that's a cubic curve ;)

[Sammo]

Hot damn, I knew that! I'm tired. curveTo is quadratic...

I had it named Bezier right until I posted it so yeah..

If a mod drops by feel free to change the title.