Category Archives: Vector

Tetris Sand CA

By Zevan | June 7, 2009
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. scaleX = scaleY = 2.5;
  3. var canvas:BitmapData = new BitmapData(200,200,false, 0x000000);
  4. addChild(new Bitmap(canvas));
  5. var w:int = canvas.width;
  6. var size:int = canvas.width * canvas.height;
  7. var read:Vector.<uint> = new Vector.<uint>(size);
  8. var write:Vector.<uint> = new Vector.<uint>(size);
  9.  
  10. read = canvas.getVector(canvas.rect);
  11. var loc:int = 199*w;
  12. for(var i:int = 0; i <= 200; i++){
  13.        read[loc+i]=0xFFFFFFFF;
  14. }
  15. write = read.concat();
  16.  
  17. var shapes:Array = [];
  18. shapes[0] = [[1,1],[1,1]];
  19. shapes[1] = [[1,1,1,1]];
  20. shapes[2] = [[1],[1],[1],[1]];
  21. shapes[3] = [[1,1,1],[0,1,0]];
  22. shapes[4] = [[1,0],[1,1],[1,1],[0,1]];
  23. shapes[5] = [[1,0,0],[1,1,1]];
  24. shapes[6] = [[1,1,0], [0,1,1]];
  25. shapes[7] = [[1,1], [1,0],[1,0]];
  26. function drawShape(xp:int, yp:int, pattern:Array, col:uint):void{
  27.     var i:int = 0;
  28.     var loc:int = xp + yp * w;
  29.     if (int(Math.random()*2) == 1){
  30.         pattern.reverse();
  31.     }
  32.     if (int(Math.random()*2)){
  33.         for (i= 0; i<pattern.length; i++){
  34.             pattern[i].reverse();
  35.         }
  36.     }
  37.     for (i = 0; i<pattern.length; i++){
  38.          for (var j:int = 0; j<pattern[i].length; j++){
  39.              if (pattern[i][j] == 1){
  40.                 write[loc + i * w + j] = col;
  41.              }
  42.         }
  43.     }
  44. }
  45.  
  46. var counter:int = 0;
  47. addEventListener(Event.ENTER_FRAME, onLoop);
  48. function onLoop(evt:Event):void {
  49.      var i:int;
  50.      canvas.lock();
  51.      if (counter % 20 == 1){
  52.         for ( i= 0; i<20; i++){
  53.              drawShape(5+  i * 10, 10, shapes[int(Math.random() * shapes.length)], Math.random()*0xFFFFFF);
  54.         }
  55.      }
  56.      counter++;
  57.      read = write.concat();
  58.      for (i = 0; i<size; i++){
  59.          var curr:uint = read[i];
  60.          if (curr != 0xFF000000 && curr != 0xFFFFFFFF){
  61.             var below:uint = read[i + w];
  62.             if (below == 0xFF000000 || below == curr){
  63.               var above:uint = read[i - w];
  64.               if (above == 0xFF000000){
  65.                  write[i] = 0xFF000000;
  66.               }
  67.               write[i + w] = curr;
  68.             }else{
  69.                 var index:uint;
  70.                 if (int(Math.random()*2) == 1){
  71.                     index = i + w - 1;
  72.                 }else{
  73.                     index = i + w + 1;
  74.                 }
  75.                 if (read[index] == 0xFF000000){
  76.                     write[index] = curr;
  77.                 }
  78.             }
  79.          }
  80.      }
  81.      canvas.setVector(canvas.rect, write);
  82.      canvas.unlock();
  83. }

Quickly thrown together sand cellular automata - with some tetris shapes.

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

Distance Line Gradient

By Zevan | June 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600,height=500,frameRate=30)]
  2. var canvas:BitmapData=new BitmapData(400,400,false,0x000000);
  3. addChild(new Bitmap(canvas));
  4.  
  5. var size:Number=canvas.width*canvas.height;
  6. var w:Number=canvas.width;
  7. var pix:Vector.<uint> = new Vector.<uint>(size);
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10. function onLoop(evt:Event):void {
  11.     canvas.lock();
  12.        
  13.     var i:int = size;
  14.     var x1:Number=mouseX;
  15.     var y1:Number=mouseY;
  16.     var x2:Number=250;
  17.     var y2:Number=250;
  18.     var dx:Number=x2-x1;
  19.     var dy:Number=y2-y1;
  20.     var denom:Number =  1/(dx * dx + dy * dy);
  21.     if (dx==0&&dy==0) {
  22.             x2+=1;
  23.             y2+=1;
  24.             dx=dy=1;
  25.     }
  26.  
  27.     while( --i> -1 ){
  28.         var xp:int= i % w;
  29.         var yp:int = i / w;
  30.         var u:Number = ((xp - x1) * dx + (yp - y1) * dy) * denom;
  31.  
  32.         var closestX:Number;
  33.         var closestY:Number;
  34.         if (u<0) {
  35.             closestX=x1;
  36.             closestY=y1;
  37.         } else if (u> 1) {
  38.             closestX=x2;
  39.             closestY=y2;
  40.         } else {
  41.             closestX=x1+u*dx;
  42.             closestY=y1+u*dy;
  43.         }
  44.         var dfx:Number=closestX-xp;
  45.         var dfy:Number=closestY-yp;
  46.         var d:Number=255-Math.sqrt(dfx*dfx+dfy*dfy);
  47.         if (d<0) d=0;
  48.          pix[i]=uint(d);
  49.     }
  50.     canvas.setVector(canvas.rect, pix);
  51.     canvas.unlock();
  52. }

This didn't come out as interesting as I thought it would for some reason - just used the technique from the last two posts to draw a gradient. Event though it's visually boring, it does show how I went about inlining the function from yesterday... so I figured I'd post it.

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

sine cosine Gradient

By Zevan | May 25, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600,height=500,frameRate=30)]
  2. var canvas:BitmapData=new BitmapData(600,500,false,0x000000);
  3. addChild(new Bitmap(canvas));
  4. var size:Number=canvas.width*canvas.height;
  5. var w:Number=canvas.width;
  6. var wd:Number=1/w;
  7. var pix:Vector.<uint> = new Vector.<uint>();
  8. var sin:Number;
  9. var cos:Number;
  10. var dx:Number=110;
  11. var dy:Number=52;
  12. addEventListener(Event.ENTER_FRAME, onLoop);
  13. function onLoop(evt:Event):void {
  14.     dx+=0.001;
  15.     canvas.lock();
  16.     for (var i:int = 0; i<size; i++) {
  17.         var xp:Number=i%w;
  18.         var yp:Number=int(i*wd);
  19.         var xx:Number=xp*0.05+dx;
  20.         var yy:Number=yp*0.05+dy;
  21.         var t:Number= (xx * yy) % 3.14159265;
  22.         //compute sine
  23.         // technique from http://lab.polygonal.de/2007/07/18/fast-and-accurate-sinecosine-approximation/
  24.         // by Michael Baczynski
  25.         if (t<0) {
  26.             sin=1.27323954*t+.405284735*t*t;
  27.         } else {
  28.             sin=1.27323954*t-0.405284735*t*t;
  29.         }
  30.         //compute cosine: sin(t + PI/2) = cos(t)
  31.         t+=1.57079632;
  32.         if (t>3.14159265) {
  33.             t-=6.28318531;
  34.         }
  35.         if (t<0) {
  36.             cos=1.27323954*t+0.405284735*t*t;
  37.         } else {
  38.             cos=1.27323954*t-0.405284735*t*t;
  39.         }
  40.         var c:Number=sin+cos*cos*cos;
  41.         // fast math abs
  42.         c=c<0? -c:c;
  43.         c=c*140;
  44.         // math max 255
  45.         c=c>255?255:c;
  46.         pix[i]=c<<16|c<<8|c;
  47.     }
  48.     canvas.setVector(canvas.rect, pix);
  49.     canvas.unlock();
  50. }

The above snippet will animate a gradient that looks like this:

Also posted in BitmapData, graphics algorithms, pixel manipulation | 3 Comments

Distance Render

By Zevan | May 15, 2009
CLICK HERE TO COPY
Actionscript:
  1. var verts:Vector.<Number> = new Vector.<Number>();
  2. var pVerts:Vector.<Number> = new Vector.<Number>();
  3. var uvts:Vector.<Number> = new Vector.<Number>();
  4.  
  5. var hs:Number = 2.3;
  6. var step:Number = 0.04;
  7.  
  8. var tVerts:Vector.<Number> = new Vector.<Number>();
  9. var rVerts:Vector.<Number> = new Vector.<Number>();
  10. var matrix:Matrix3D = new Matrix3D();
  11. matrix.identity();
  12. matrix.appendRotation(45,Vector3D.Y_AXIS);
  13. matrix.appendRotation(45,Vector3D.X_AXIS);
  14. var inc:int = 0;
  15. var i:Number, j:Number, k:Number;
  16. i = hs;
  17. while( i> -hs){
  18.     j = hs;
  19.     while(j> -hs){
  20.         k = hs;
  21.         while(k> -hs){
  22.             tVerts[inc] = -i;
  23.             inc++
  24.             tVerts[inc] = -j;
  25.             inc++
  26.             tVerts[inc] = -k;
  27.             inc++
  28.             k -= step;
  29.         }
  30.         j -= step;
  31.     }
  32.     i -= step;
  33. }
  34.  
  35. matrix.transformVectors(tVerts, rVerts);
  36.  
  37. var vinc:int = 0;
  38. inc = 0
  39. var R:Number = 1.5;
  40. var r:Number = .5;
  41. for (i= -hs; i<hs; i+=step){
  42.     for (j = -hs; j<hs; j+=step){
  43.         for (k = -hs; k<hs; k+=step){
  44.             var vx:Number = rVerts[inc] ;
  45.             inc++
  46.             var vy:Number = rVerts[inc]  ;
  47.             inc++
  48.             var vz:Number=  rVerts[inc] ;
  49.             inc++
  50.             var s:Number = Math.pow(vx  * vx  + vy * vy + vz * vz + R*R - r * r, 2) - 4 * (R * R)*(vx * vx + vy * vy);
  51.             if (s <0 && s> -.5){
  52.                 verts[vinc] = (i * 50);
  53.                 vinc++
  54.                 verts[vinc] = (j * 50);
  55.                 vinc++
  56.                 verts[vinc] = (k * 50);
  57.                 vinc++
  58.                   inc += int((hs - k) / step) * 3;
  59.                   k = hs;
  60.              }
  61.         }
  62.     }
  63. }
  64.  
  65. var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
  66. addChild(new Bitmap(canvas));
  67. render();
  68. function render():void{
  69.     matrix.identity();
  70.     matrix.appendTranslation(200, 200, 0);
  71.     Utils3D.projectVectors(matrix, verts, pVerts, uvts);
  72.     canvas.lock();
  73.     canvas.fillRect(canvas.rect, 0x000000);
  74.     var inc:int = 2;
  75.     var c:int = 0;
  76.     var r:Rectangle = new Rectangle();
  77.     r.width = r.height = 2;
  78.     for (var i:int = 0; i<pVerts.length; i+=2){
  79.           r.x = pVerts[i];
  80.           r.y = pVerts[i + 1];
  81.           c = Math.max(0,100 - verts[inc]);
  82.           canvas.fillRect(r, c <<16 | c <<8 | c);
  83.           inc += 3;
  84.     }
  85.     canvas.unlock();
  86. }

This snippet uses some of the techniques from the last few posts to create a distance render - this renders the implicit equation for a torus.

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