Beziers

talk open source
1

Here’s my implementation of beziers. All that I’ve done are Linear, Quadratic and Cubic beziers.

I used Point objects for the coordinates but it could be changed to work without them by replacing new Point(xCoord, yCoord) with {x: xCoord, y:yCoord} for usage in flash versions < 8.

See it

Functions:

/*
 * Citation:
 * http://en.wikipedia.org/wiki/B%C3%A9zier_curve
 */

import flash.geom.Point;

MovieClip.prototype.linearBezierPoint = function(p:Array, t:Number):Point {
	// Takes 2 Points
	if (t < 0 || t > 1 || p.length != 2) return null;
	
	return new Point(
		p[0].x+(p[1].x-p[0].x)*t,
		p[0].y+(p[1].y-p[0].y)*t
	);
};

MovieClip.prototype.quadraticBezierPoint = function(p:Array, t:Number):Point {
	// Takes 3 Points
	if (t < 0 || t > 1 || p.length != 3) return null;
	
	var ax:Number, bx:Number;
	bx = 2*(p[1].x-p[0].x);
	ax = p[2].x - p[0].x - bx;
	
	var ay:Number, by:Number;
	by = 2*(p[1].y - p[0].y);
	ay = p[2].y - p[0].y - by;
	
	var t2:Number = t*t;
	
	return new Point(
		ax*t2 + bx*t + p[0].x,
		ay*t2 + by*t + p[0].y
	);
};

MovieClip.prototype.cubicBezierPoint = function(p:Array, t:Number):Point {
	// Takes 4 Points
	if (t < 0 || t > 1 || p.length != 4) return null;
	
	var ax:Number, bx:Number, cx:Number;
	cx = 3*(p[1].x - p[0].x);
	bx = 3*(p[2].x - p[1].x) - cx;
	ax = p[3].x - p[0].x - bx - cx;
	
	var ay:Number, by:Number, cy:Number;
	cy = 3*(p[1].y - p[0].y);
	by = 3*(p[2].y - p[1].y) - cy;
	ay = p[3].y - p[0].y - by - cy;
	
	var t2:Number = t*t;
	var t3:Number = t*t2;
	
	return new Point(
		ax*t3 + bx*t2 + cx*t + p[0].x,
		ay*t3 + by*t2 + cy*t + p[0].y
	);
}

MovieClip.prototype.bezier = function (p:Array, segments:Number) {
	if (segments < 1) return;
	
	var func:Function;
	if (p.length < 2) {
		return;
	} else if (p.length == 2) {
		func = this.linearBezierPoint;
	} else if (p.length == 3) {
		func = this.quadraticBezierPoint;
	} else if (p.length == 4) {
		func = this.cubicBezierPoint;
	} else {
		return;
	}
	
	var dt:Number = 1/segments;
	var s:Point = func(p, 0);
	this.moveTo(s.x, s.y);
	
	for (var i:Number=1; i<=segments; i++) {
		s = func(p, i*dt);
		this.lineTo(s.x, s.y);
	}
}

Usage:

_root.lineStyle(3, 0x0000FF);
// Linear
_root.bezier([
		new Point(100, 100),
		new Point(100, 200)
	], 10);
// Quadratic
_root.bezier([
		new Point(200, 100),
		new Point(200, 200),
		new Point(300, 200)
	], 20);
// Cubic
_root.bezier([
		new Point(400, 100),
		new Point(400, 200),
		new Point(500, 200),
		new Point(500, 300)
	], 20);