Category Archives: setPixel

Bresenham’s Circle and setVector()

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().

Also posted in BitmapData, graphics algorithms, pixel manipulation | Tagged , , , | Leave a comment

x and y Coordinates in 1D Array / Vector

Actionscript:
  1. var canvas:BitmapData=new BitmapData(400,400,false,0x000000);
  2. addChild(new Bitmap(canvas));
  3. var pix:Vector.<uint>=canvas.getVector(canvas.rect);
  4.  
  5. canvas.lock();
  6. for (var i:int = 0; i<300; i++) {
  7.     var xp:int=50+i;
  8.     var yp:int=50+i/2;
  9.     // target x and y coords in 1D array
  10.     pix[xp+yp*400]=0xFFFFFF;
  11. }
  12. canvas.setVector(canvas.rect, pix);
  13. canvas.unlock();

This snippet shows how to target x and y coordinates in a 1D Array / Vector. This can be useful sometimes when working with setVector().

This is sort of like re-inventing setPixel().... and for that reason is kind of pointless - that said, it's interesting to know. I first learned about this technique from using processing.

Also posted in BitmapData, Vector, arrays, pixel manipulation | Tagged , , | Leave a comment

Strange BitmapData Drawing Instructions

Actionscript:
  1. // instructions
  2. var ins:Array = [0,
  3. -1, 100, 200, 3, 100, 0, 50, 1, 100, -1, 100, 150, 0, 50,
  4. -1, 160, 200, 0, 50, 3, 50, 2, 50, 3, 50, 0, 50,
  5. -1, 220, 200, 0, 50, 3, 50, 2, 50, -1, 270, 150, 3, 50, 2, 50];
  6.  
  7. var canvas:BitmapData = new BitmapData(400,400,false, 0xCCCCCC);
  8. addChild(new Bitmap(canvas));
  9.  
  10. var index:int = 0;
  11. var penX:int = 0;
  12. var penY:int = 0;
  13.  
  14. read();
  15.  
  16. function read():void{
  17.     var i:int, xp:int, yp:int;
  18.     if (ins[index+1] == -1){
  19.          index++;
  20.         xp = ins[++index];
  21.         yp = ins[++index];
  22.     }else{
  23.         xp = penX;
  24.         yp = penY;
  25.     }
  26.     var dir:int = ins[index];
  27.     var leng:int = ins[++index];
  28.     for (i = 0; i<leng; i++){
  29.         if (dir == 0){
  30.             xp += 1;
  31.         }else if (dir == 1){
  32.             yp += 1;
  33.         }else if (dir == 2){
  34.             xp -= 1;
  35.         }else if (dir == 3){
  36.             yp -= 1;
  37.         }
  38.         canvas.setPixel(xp, yp, 0x000000);
  39.      }
  40.      penX = xp;
  41.      penY = yp;
  42.     if (index <ins.length){
  43.         read();
  44.     }
  45. }

I was thinking today about alternative ways to represent drawings and I wrote this snippet while brainstorming. The function read() looks through an array of instructions (ins[]) and draws an image. In this case the letters AS3 are drawn to a Bitmap using setPixel().

The instructions work like this:

The first value of the array is ignored - it can be set to 0, or used to store some other info.
If the next value is a -1, the following two values in the array are used as a sort of moveTo().
This is followed by a direction value 0 = right, 1 = down, 2 = left, 3 = up.
Lastly there is a length value in pixels.

If no -1 is found, the read() function assumes that the value is for a direction.

So to draw a line from (100, 100) to (150, 100) you would write:
[0, -1, 100, 100, 0, 50]

To then draw a line down 50 pixels from the endpoint of the previous line you would add 1 (move down), 50 (length 50)... so you to end up with:
[0, -1, 100, 100, 0, 50, 1, 50]

and so on...

I'm not sure really where I was going with this, but it was fun to write...

Also posted in misc | Tagged , , | Leave a comment

Global Illumination Links

Recently saw some great links making use of Global Illumination/Ambient Occlusion... these ones are from wonderfl posted by keim at Si :
This first example is based on something called AO bench.
one
two
three

and there is something called MiniLight which has been ported to Flex.

Also posted in BitmapData, graphics algorithms, misc, pixel manipulation | Tagged , | Leave a comment