Monthly Archives: January 2009

Bezier Skin (smooth curveTo())

By Zevan | January 12, 2009
CLICK HERE TO COPY
Actionscript:
  1. // graphics, vector of xy coords, closed boolean
  2. function bezierSkin(g:Graphics, bez:Vector.<Number>, closed:Boolean = true):void {
  3.     var avg:Vector.<Number> = calcAvgs(bez);
  4.     var i:int, n:int;
  5.     var leng:int = bez.length;
  6.  
  7.     if (closed){
  8.         g.moveTo(avg[0], avg[1]);
  9.         for (i = 2; i <leng; i+=2) {
  10.             n=i+1;
  11.             g.curveTo(bez[i], bez[n], avg[i], avg[n]);
  12.         }
  13.         g.curveTo(bez[0], bez[1], avg[0], avg[1]);
  14.     }else{
  15.         g.moveTo(bez[0], bez[1]);
  16.         g.lineTo(avg[0], avg[1]);
  17.         for (i = 2; i <leng-2; i+=2) {
  18.             n=i+1;
  19.             g.curveTo(bez[i], bez[n], avg[i], avg[n]);
  20.         }
  21.         g.lineTo(bez[ leng - 2], bez[ leng - 1]);
  22.     }
  23. }
  24.  
  25. // create anchor points by averaging the control points
  26. function calcAvgs(v:Vector.<Number>):Vector.<Number> {
  27.     var avg:Vector.<Number> = new Vector.<Number>();
  28.     var leng:int=v.length;
  29.     for (var i:int = 2; i<leng; i+=1) {
  30.         var prev:Number=i-2;
  31.         avg.push( (v[prev] + v[i]) / 2 );
  32.     }
  33.     // close
  34.     avg.push( (v[0] + v[ leng - 2]) / 2 );
  35.     avg.push( (v[1] + v[ leng - 1]) / 2 );
  36.     return avg;
  37. }
  38.  
  39. // test out the functions:
  40.  
  41. graphics.lineStyle(0,0x000000);
  42.  
  43. // draw a very rounded rect
  44. bezierSkin(graphics, Vector.<Number>([100,100,200,100,200,200,100,200]) );
  45.  
  46. // draw a random curve with 10 xy coords
  47. var rnd:Vector.<Number> = new Vector.<Number>();
  48. for (var i:int = 0; i<20; i++) rnd.push(Math.random()*100);
  49. bezierSkin(graphics, rnd);
  50.                        
  51. // erase everything and allow the used to draw a smooth curve with the mouse
  52. stage.addEventListener(MouseEvent.MOUSE_DOWN, onLoop);
  53. var index:int = 0;
  54. var pnts:Vector.<Number> = new Vector.<Number>();
  55.  
  56. function onLoop(evt:MouseEvent):void {
  57.      pnts.push(mouseX);
  58.      pnts.push(mouseY);
  59.    
  60.      graphics.clear();
  61.      graphics.lineStyle(0,0x000000);
  62.      
  63.       // draw a smooth curved line
  64.      bezierSkin(graphics,pnts,false);
  65. }

The above code uses averaging to generate anchor points for curveTo() calls. This is an easy way to always draw smooth curves.

This is an old one that I've seen floating around since the drawing api first came out... but I it's an important snippet, so I figured I'd post it.

Posted in Graphics, bezier | Tagged , , | Leave a comment

Quadratic Bezier

By Zevan | January 11, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData=new BitmapData(280,280,false,0x000000);
  2. addChild(new Bitmap(canvas, PixelSnapping.AUTO, true));
  3. var color:uint;
  4. // anchor x1, anchor y1,
  5. // control-handle x2, control-handle y2,
  6. // anchor x3, anchor y3, [resolution incremental value between 0-1]
  7. function quadBezier(x1:Number, y1:Number, x2:Number, y2:Number, x3:Number, y3:Number, resolution:Number=.03):void {
  8.     var b:Number,pre1:Number,pre2:Number,pre3:Number,pre4:Number;
  9.     for (var a:Number = 0; a <1;a+=resolution) {
  10.    
  11.         b=1-a;
  12.         pre1=(a*a);
  13.         pre2=2*a*b;
  14.         pre3=(b*b);
  15.        
  16.         canvas.setPixel(pre1*x1 + pre2*x2  + pre3*x3 ,
  17.                                      pre1*y1 + pre2*y2 + pre3*y3, color);
  18.     }
  19. }
  20.  
  21. // draw a few
  22. color = 0xFFFFFF;
  23.  
  24. for (var i:int = 0; i<20; i++){
  25. quadBezier(40,100, 150 , 20 + i * 10 , 200, 100,.01);
  26. }
  27.  
  28. color = 0xFF0000;
  29.  
  30. for (i= 0; i<20; i++){
  31. quadBezier(150,200, 100 + i * 10, 100  , 120, 30,.01);
  32. }

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.

Posted in BitmapData, bezier, graphics algorithms, pixel manipulation, setPixel | Tagged , , | 2 Comments

Bresenham Circle Filled

By Zevan | January 10, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = new BitmapData(400, 400, false, 0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3.  
  4. fillCircle(100,100,50,0xFF0000);
  5.  
  6. function fillCircle(xp:Number,yp:Number, radius:Number, col:uint = 0x000000):void {
  7.     var xoff:int =0;
  8.     var yoff:int = radius;
  9.     var balance:int = -radius;
  10.  
  11.     while (xoff <= yoff) {
  12.          var p0:int = xp - xoff;
  13.          var p1:int = xp - yoff;
  14.          
  15.          var w0:int = xoff + xoff;
  16.          var w1:int = yoff + yoff;
  17.          
  18.          hLine(p0, yp + yoff, w0, col);
  19.          hLine(p0, yp - yoff, w0, col);
  20.          
  21.          hLine(p1, yp + xoff, w1, col);
  22.          hLine(p1, yp - xoff, w1, col);
  23.        
  24.         if ((balance += xoff++ + xoff)>= 0) {
  25.             balance-=--yoff+yoff;
  26.         }
  27.     }
  28. }
  29.  
  30. function hLine(xp:Number, yp:Number, w:Number, col:uint):void {
  31.     for (var i:int = 0; i <w; i++){
  32.         canvas.setPixel(xp + i, yp, col);
  33.     }
  34. }

An implementation of yesterdays post that draws a filled circle instead of an outlined circle.

Posted in BitmapData, graphics algorithms, pixel manipulation, setPixel | Tagged , | Leave a comment

Bresenham Circle No Multiplication

By Zevan | January 9, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = new BitmapData(400, 400, false, 0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3.  
  4. drawCircle(200,100, 50);
  5.  
  6. // y, y radius, color
  7. function drawCircle(xp:Number,yp:Number, radius:Number, col:uint =0x000000):void {
  8.     var balance:int;
  9.     var xoff:int;
  10.     var yoff:int;
  11.     xoff=0;
  12.     yoff=radius;
  13.     balance=- radius;
  14.  
  15.     while (xoff <= yoff) {
  16.         canvas.setPixel(xp+xoff, yp+yoff, col);
  17.         canvas.setPixel(xp-xoff, yp+yoff, col);
  18.         canvas.setPixel(xp-xoff, yp-yoff, col);
  19.         canvas.setPixel(xp+xoff, yp-yoff, col);
  20.         canvas.setPixel(xp+yoff, yp+xoff, col);
  21.         canvas.setPixel(xp-yoff, yp+xoff, col);
  22.         canvas.setPixel(xp-yoff, yp-xoff, col);
  23.         canvas.setPixel(xp+yoff, yp-xoff, col);
  24.  
  25.         if ((balance += xoff++ + xoff)>= 0) {
  26.             balance-=--yoff+yoff;
  27.         }
  28.     }
  29. }

The above demos a circle drawing algorithm. This will draw an outlined circle with no fill. This implementation doesn't use multiplication.

Using setPixel to draw primitive shapes can be a good learning experience. I found this basic implementation of the Bresenham Circle algorithm a few years back and lost the original link.... I dug around for a good hour trying to find the original but to no avail. So if someone recognizes this interesting implementation .... let me know :)

The original code was written in java I think.

If your curious. The standard implementation I keep finding online looks something like this:

CLICK HERE TO COPY
Actionscript:
  1. // ported from http://www.codeuu.com/Bresenham_Circle
  2. function drawCircle(cx:Number, cy:Number, r:Number, col:uint):void{
  3.     var xp:int  = 0, yp:int= r ;
  4.     var d:int = 3 - (2 * r);
  5.    
  6.     while(xp <= yp){
  7.        
  8.         canvas.setPixel(cx+xp,cy+yp,col);
  9.         canvas.setPixel(cx+yp,cy+xp,col);
  10.         canvas.setPixel(cx-xp,cy+yp,col);
  11.         canvas.setPixel(cx+yp,cy-xp,col);
  12.         canvas.setPixel(cx-xp,cy-yp,col);
  13.         canvas.setPixel(cx-yp,cy-xp,col);
  14.         canvas.setPixel(cx+xp,cy-yp,col);
  15.         canvas.setPixel(cx-yp,cy+xp,col);
  16.        
  17.         if (d<0){
  18.             d += (4*xp)+6;
  19.         }else{
  20.             d += (4*(xp-yp))+10;
  21.             yp -= 1;
  22.         }
  23.         xp++;
  24.     }
  25.    
  26. }

I did a few speed tests against the first one that doesn't make use of multiplication and it is only ever so slightly faster....

Posted in BitmapData, graphics algorithms, pixel manipulation, setPixel | Tagged , , , | Leave a comment