Quadratic Bezier

var canvas:BitmapData=new BitmapData(280,280,false,0x000000);
addChild(new Bitmap(canvas, PixelSnapping.AUTO, true));
var color:uint;
// anchor x1, anchor y1,
// control-handle x2, control-handle y2,
// anchor x3, anchor y3, [resolution incremental value between 0-1]
function quadBezier(x1:Number, y1:Number, x2:Number, y2:Number, x3:Number, y3:Number, resolution:Number=.03):void {
	var b:Number,pre1:Number,pre2:Number,pre3:Number,pre4:Number;
	for (var a:Number = 0; a <1;a+=resolution) {
	
		b=1-a;
		pre1=(a*a);
		pre2=2*a*b;
		pre3=(b*b);
		
		canvas.setPixel(pre1*x1 + pre2*x2  + pre3*x3 ,
						             pre1*y1 + pre2*y2 + pre3*y3, color);
	}
}

// draw a few
color = 0xFFFFFF;

for (var i:int = 0; i<20; i++){
quadBezier(40,100, 150 , 20 + i * 10 , 200, 100,.01);
}

color = 0xFF0000;

for (i= 0; i<20; i++){
quadBezier(150,200, 100 + i * 10, 100  , 120, 30,.01);
}

The above demos a function that draws quadratic bezier curves using setPixel().

One of the first posts on this site was a snippet that used setPixel() to draw a cubic bezier curve. I recently needed to do the exact same thing but I wanted to use a quadratic bezier… I knew I had the code laying around somewhere, but I couldn’t seem to find it so I just looked on wikipedia and changed the previous cubicBezier() function accordingly.