Search Results for: Bresenham circle

Bresenham’s Circle and setVector()

By Zevan | June 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvasSize:int = 400;
  2. var canvas:BitmapData = new BitmapData(canvasSize, canvasSize, false, 0xFFFFFF);
  3. addChild(new Bitmap(canvas));
  4. var size:int = canvas.width * canvas.height;
  5. var pixels:Vector.<uint> = canvas.getVector(canvas.rect);
  6.  
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8. function onLoop(evt:Event):void {
  9.      for (var i:int = 0; i<500; i++){
  10.       fillCircle(int(Math.random() * canvasSize),
  11.                       int(Math.random() * canvasSize),
  12.                       int(Math.random() * 5 + 3),
  13.                       uint(Math.random() * 0xFFFF));
  14.      }
  15.      canvas.lock();
  16.      canvas.setVector(canvas.rect, pixels);
  17.      canvas.unlock();
  18. }
  19.  
  20. function fillCircle(xp:int,yp:int, radius:int, col:uint = 0x000000):void {
  21.     var xoff:int =0;
  22.     var yoff:int = radius;
  23.     var balance:int = -radius;
  24.     while (xoff <= yoff) {
  25.          var p0:int = xp - xoff;
  26.          var p1:int = xp - yoff;
  27.          var w0:int = xoff + xoff;
  28.          var w1:int = yoff + yoff;
  29.          hLine(p0, yp + yoff, w0, col);
  30.          hLine(p0, yp - yoff, w0, col);
  31.          hLine(p1, yp + xoff, w1, col);
  32.          hLine(p1, yp - xoff, w1, col);
  33.         if ((balance += xoff++ + xoff)>= 0) {
  34.             balance-=--yoff+yoff;
  35.         }
  36.     }
  37. }
  38. function hLine(xp:int, yp:int, w:int, col:uint):void {
  39.     var index:int = xp + yp * canvasSize;
  40.     for (var i:int = 0; i <w; i++){
  41.         index++;
  42.         if (index> -1 && index <size){
  43.           pixels[index] = col;
  44.         }
  45.     }
  46. }

In the past I've posted examples of Bresenham's Circle (here and here). Both of those examples make use of setPixel(). Today's snippet demos a version of Bresenham's Circle that works with setVector().

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

Slow Circle Drawing

By Zevan | April 3, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = new BitmapData(400,400,false, 0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3.  
  4. addEventListener(Event.ENTER_FRAME, onLoop);
  5. function onLoop(evt:Event):void {
  6.     canvas.fillRect(canvas.rect, 0xCCCCCC);
  7.    
  8.     var r:Number = Math.abs(200 - mouseX);
  9.     var r2:Number = r * r;
  10.     var inc:Number = 1 / r;
  11.     var xp:Number = .00000001;
  12.     var yp:Number = -r;
  13.     while(yp<r){
  14.           var y:Number = 200 + yp;
  15.           yp += xp * inc;
  16.           xp = Math.sqrt(r2 - yp * yp);
  17.           canvas.setPixel(200 + xp, y, 0x000000);
  18.           canvas.setPixel(200 - xp, y, 0x000000);
  19.      }
  20. }

A slow way to draw circles using setPixel().

CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData = new BitmapData(400,400,false, 0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3.  
  4. addEventListener(Event.ENTER_FRAME, onLoop);
  5. function onLoop(evt:Event):void {
  6.     canvas.fillRect(canvas.rect, 0xCCCCCC);
  7.     var r:Number = Math.abs(200 - mouseX);
  8.     var r2:Number = r * r;
  9.     var inc:Number = 1 / r;
  10.     var xp:Number = .000001;
  11.     var yp:Number = -r;
  12.     while(yp <= 0){;
  13.          var x1:Number = 200 + xp;
  14.          var y1:Number = 200 + yp
  15.          var x2:Number = 200 - xp;
  16.          var y2:Number = 200 - yp;
  17.          canvas.setPixel(x1, y1, 0x000000);
  18.          canvas.setPixel(x1, y2, 0x000000);
  19.          canvas.setPixel(x2, y1, 0x000000);
  20.          canvas.setPixel(x2, y2, 0x000000);
  21.           yp += xp * inc;
  22.           xp = Math.sqrt(r2 - yp * yp);
  23.      }
  24. }

Little better, still slow.

I was brainstorming about a few things today and somehow these two slow circle drawing algorithms popped out. These are pretty useless compared to some of the famous algorithms I've posted in the past. Kind of interesting nevertheless.

Posted in misc, setPixel | Tagged , | Leave a comment

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