Category Archives: BitmapData

Seamless Vector Texture

Actionscript:
  1. [SWF(width = 800, height = 450, backgroundColor=0xFFFFFF)]
  2.  
  3. graphics.beginFill(0xDEDEDE);
  4. graphics.drawRect(0,0,400,400);
  5.  
  6. var container:Sprite = Sprite(addChild(new Sprite()));
  7. draggable(rx(), ry(), 0x112233, 20);
  8. draggable(rx(), ry(), 0x2266FF, 15);
  9. draggable(rx(), ry(), 0x003299, 50, "rect");
  10. draggable(rx(), ry(), 0xFFFFFF, 30);
  11. draggable(rx(), ry(), 0x00CCFF, 15);
  12. draggable(rx(), ry(), 0x1188CC, 50, "rect");
  13.  
  14. function rx():Number{
  15.     return Math.random() * 200 + 100;
  16. }
  17. function ry():Number{
  18.     return Math.random() * 200 + 100;
  19. }
  20.  
  21. var guides:Shape = Shape(addChild(new Shape()));
  22. with(guides.graphics){
  23.        lineStyle(0, 0x666666)
  24.        moveTo(200,0);
  25.        lineTo(200,400);
  26.        moveTo(0, 200);
  27.        lineTo(400, 200);
  28.        moveTo(400,0);
  29.        lineTo(400,400);
  30.        moveTo(0,400);
  31.        lineTo(800,400);
  32. }
  33.  
  34. var canvas:BitmapData = new BitmapData(200,200,true, 0x00000000);
  35. var tex:BitmapData = new BitmapData(800,800,false, 0xFFFFFF);
  36.  
  37. var frame:Bitmap = Bitmap(addChild(new Bitmap(tex, "auto", true)));
  38. frame.x = 401;
  39. frame.scaleX = frame.scaleY = 0.5;
  40.  
  41. var pnt:Point = new Point();
  42. var m:Matrix = new Matrix();
  43.  
  44. addEventListener(Event.ENTER_FRAME, onLoop);
  45. function onLoop(evt:Event):void {
  46.     canvas.fillRect(canvas.rect, 0x00000000);
  47.     canvas.draw(container);
  48.     drawQuadrant(-200,0)
  49.     drawQuadrant(-400,0)
  50.     drawQuadrant(0,-200)
  51.     drawQuadrant(-200,-200);
  52.     tex.fillRect(tex.rect, 0xFFFFFF);
  53.     for (var i:int = 0; i<16; i++){
  54.         var px:Number = i % 4;
  55.         var py:Number = int(i / 4);
  56.         pnt.x = px * 200;
  57.         pnt.y = py * 200;
  58.         tex.copyPixels(canvas, canvas.rect, pnt, null, null, true);
  59.        }
  60. }
  61.  
  62. function drawQuadrant(x:Number, y:Number):void{
  63.      m.tx = x;
  64.      m.ty = y;
  65.      canvas.draw(container, m);
  66. }
  67.  
  68. // draggable Sprite
  69. function draggable(xp:Number, yp:Number, col:uint = 0xFF0000,
  70. size:Number=4, type:String="circle"):Sprite {
  71.        var s:Sprite = Sprite(container.addChild(new Sprite()));
  72.        s.x = xp;
  73.        s.y = yp;
  74.        with(s.graphics){
  75.                beginFill(col)
  76.                if(type == "circle"){
  77.                  drawCircle(size,size,size);
  78.                }else if(type == "rect"){
  79.                  drawRect(0,0,size, size);
  80.                }
  81.        }
  82.        s.buttonMode = true;
  83.        s.addEventListener(MouseEvent.MOUSE_DOWN, onDrag);
  84.        return s;
  85. }
  86. function onDrag(evt:MouseEvent):void {
  87.     var w:Number = evt.currentTarget.width;
  88.     var h:Number = evt.currentTarget.height;
  89.     evt.currentTarget.startDrag(false, new Rectangle(0,0,400 - w, 400 - h));
  90. }
  91. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  92. function onUp(evt:MouseEvent):void{ stopDrag() }

This snippet creates a seamless texture from a few draggable vector shapes. BitmapData is used to combine four quadrants into one seamless tile.


Have a look at the swf

I created this snippet as a sketch for a new feature for my command drawing project.

Also posted in Graphics, misc | Tagged , , | 4 Comments

BitmapData Static

Actionscript:
  1. var canvas:BitmapData = new BitmapData(500,500,false, 0x000000);
  2. addChild(new Bitmap(canvas));
  3.  
  4. var pix:Vector.<uint> = new Vector.<uint>(canvas.width * canvas.height, true);
  5.  
  6. addEventListener(Event.ENTER_FRAME, onLoop);
  7. function onLoop(evt:Event):void {
  8.     canvas.lock();
  9.     var i:int = pix.length;
  10.     while(--i> -1){
  11.         var c:uint = uint(Math.random() * 255);
  12.         pix[i] = c <<16 | c <<8 | c;
  13.     }
  14.     canvas.setVector(canvas.rect, pix);
  15.     canvas.unlock();
  16. }

This is an easy way to fill a BitmapData Object up with a bunch of TV-style static....

This post is meant to serve as filler while I work to get a good solid SIMPLE fp10, drawing api z-sorting example going... There seem to be 3 main ways of doing z-sorting all of which don't seem right to me for some reason... they all work... but I have a gut feeling there is a faster way... The winner so far (unexpectedly) is using Array.sortOn

Also posted in Vector, misc | Tagged , , | 6 Comments

Sierpiński Glitch Texture #3

Actionscript:
  1. [SWF(frameRate=60, backgroundColor=0x000000, width=500, height=500)]
  2.  
  3. var canvas:BitmapData = new BitmapData(500,500,false, 0x000000);
  4. addChild(new Bitmap(canvas));
  5. var clone:BitmapData = new BitmapData(500,500,false, 0x000000);
  6. var canvasRect:Rectangle = canvas.rect;
  7. var w:int = canvas.width;
  8. var w2:Number = 1/w;
  9. var w10:Number = 1/(w * 80);
  10. var convert:Number = Math.PI/180;
  11. var size:int = canvas.width * canvas.height;
  12. var pix:Vector.<uint> = new Vector.<uint>(size, true);
  13. var m:Matrix = new Matrix();
  14. m.scale(1,-1);
  15. m.translate(0,canvas.height);
  16. var sin:Number = 0, cos:Number = 0;
  17. var dx:Number = 0, dy:Number = 0;
  18. var pnt:Point = new Point();
  19. var blur:BlurFilter = new BlurFilter(10,10,1);
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     canvas.lock();
  23.     dx +=  (mouseX * 10 - 3000 - dx) / 8;
  24.     dy +=  (mouseY * 4 - dy) / 8;
  25.     for (var i:int = 0; i<size; i++){
  26.         var xp:int = i % w;
  27.         var yp:int = int(i * w2);
  28.         var xp2:int = xp <<1;
  29.         var t:Number;
  30.         t = ((yp|(xp + yp * 0.1)) * (xp + dx) *w10) % 6.14687;
  31.         //compute sine
  32.         // technique from http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/
  33.         // by Michael Baczynski
  34.         if (t<0) {
  35.             sin=1.27323954*t+.405284735*t*t;
  36.         } else {
  37.             sin=1.27323954*t-0.405284735*t*t;
  38.         }
  39.         // compute cosine
  40.         t = (xp2|(yp+xp*0.1) + dy) * convert % 6.28;
  41.         t+=1.57079632;
  42.         if (t>3.14159265) {
  43.             t-=6.28318531;
  44.         }
  45.         if (t<0) {
  46.             cos=1.27323954*t+0.405284735*t*t;
  47.         } else {
  48.             cos=1.27323954*t-0.405284735*t*t;
  49.         }
  50.         var c1:int = 31 * (sin - cos);
  51.         if (c1 <0) c1 = 256 - c1;
  52.         c1 = (c1 <<4 | c1) ;
  53.         pix[i] = c1 <<16 | c1 <<8 | c1;
  54.     }
  55.     canvas.setVector(canvasRect, pix);
  56.     clone.copyPixels(canvas, canvasRect, pnt);
  57.     canvas.draw(clone, m, null, BlendMode.SUBTRACT);
  58.     clone.copyPixels(canvas, canvasRect, pnt);
  59.     clone.applyFilter(clone, canvasRect, pnt, blur);
  60.     canvas.draw(clone, null, null, BlendMode.SCREEN);
  61.     canvas.unlock();
  62. }

Decided to do a grayscale version ... also rendered it out large and posted it on flickr...

Check out the swf...


Check out the large flickr version...

Also posted in Operators, Vector, pixel manipulation | Tagged , , | 2 Comments

Sierpiński Glitch Texture #2

Actionscript:
  1. [SWF(frameRate=60, backgroundColor=0x000000, width=500, height=500)]
  2. var canvas:BitmapData = new BitmapData(500,500,false, 0x000000);
  3. addChild(new Bitmap(canvas));
  4. var clone:BitmapData = new BitmapData(500,500,false, 0x000000);
  5. var canvasRect:Rectangle = canvas.rect;
  6. var w:int = canvas.width;
  7. var w2:Number = 1/w;
  8. var w10:Number = 1/(w * 80);
  9. var convert:Number = Math.PI/180;
  10. var size:int = canvas.width * canvas.height;
  11. var pix:Vector.<uint> = new Vector.<uint>(size, true);
  12. var gray:ColorMatrixFilter = new ColorMatrixFilter([1, 0.55, 0.55, 0,0,0.55, 0.9, 0.55, 0,0,0.55, 0.55, 0.550,0, 0,0,0,1,0]);
  13. var m:Matrix = new Matrix();
  14. m.scale(1,-1);
  15. m.translate(0,canvas.height);
  16. var sin:Number = 0, cos:Number = 0;
  17. var dx:Number = 0, dy:Number = 0;
  18. var pnt:Point = new Point();
  19. var blur:BlurFilter = new BlurFilter(10,10,1);
  20. addEventListener(Event.ENTER_FRAME, onLoop);
  21. function onLoop(evt:Event):void {
  22.     canvas.lock();
  23.     dx += (mouseX * 10 - 3000 - dx) / 8;
  24.     dy += (mouseY * 4 - dy) / 8;
  25.     for (var i:int = 0; i<size; i++){
  26.         var xp:int = i % w;
  27.         var yp:int = int(i * w2);
  28.         var xp2:int = xp <<1;
  29.         var t:Number;
  30.         t = ((yp|(xp + yp)) * (xp + dx) *w10) % 6.14687;
  31.         //compute sine
  32.         // technique from http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/
  33.         // by Michael Baczynski
  34.         if (t<0) {
  35.             sin=1.27323954*t+.405284735*t*t;
  36.         } else {
  37.             sin=1.27323954*t-0.405284735*t*t;
  38.         }
  39.         // compute cosine
  40.         t = (xp2|(yp+xp/dx) + dy) * convert % 6.28;
  41.         t+=1.57079632;
  42.         if (t>3.14159265) {
  43.             t-=6.28318531;
  44.         }
  45.         if (t<0) {
  46.             cos=1.27323954*t+0.405284735*t*t;
  47.         } else {
  48.             cos=1.27323954*t-0.405284735*t*t;
  49.         }
  50.         var c1:int = 31 * (sin - cos);
  51.         if (c1 <0) c1 = 256 - c1;
  52.         c1 = (c1>>1  | c1) ;
  53.         pix[i] = c1 <<17 | c1 <<8 | c1;
  54.     }
  55.     canvas.setVector(canvasRect, pix);
  56.     clone.copyPixels(canvas, canvasRect, pnt);
  57.     canvas.draw(clone, m, null, BlendMode.SUBTRACT);
  58.     clone.copyPixels(canvas, canvasRect, pnt);
  59.     clone.applyFilter(clone, canvasRect, pnt, blur);
  60.    
  61.     canvas.draw(clone, null, null, BlendMode.LIGHTEN);
  62.     canvas.applyFilter(canvas, canvasRect, pnt, gray);
  63.     canvas.unlock();
  64. }

More texture experimentation...

Have a look at the swf over at wonderfl.net...

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