Monthly Archives: August 2009

BitmapData Static

By Zevan | August 24, 2009
CLICK HERE TO COPY
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

Posted in BitmapData, Vector, misc | Tagged , , | 6 Comments

Gradient Bezier 3D

By Zevan | August 23, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x333333, width=800, height=600)];
  2. x = stage.stageWidth / 2;
  3. y = stage.stageHeight / 2;
  4. var verts:Vector.<Number>  = new Vector.<Number>();
  5. var tVerts:Vector.<Number> = new Vector.<Number>();
  6. var pVerts:Vector.<Number> = new Vector.<Number>();
  7. var uvts:Vector.<Number> = new Vector.<Number>();
  8.  
  9. var igraph:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
  10.  
  11. var tVect:Vector3D = new Vector3D();
  12. var m:Matrix3D = new Matrix3D();
  13. for (var i:int = 0; i<200; i++){
  14.     for (var j:int = 0; j<3; j++){
  15.         tVect.x = Math.random() * 0.15;
  16.         m.identity();
  17.         m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  18.         m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  19.         m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  20.         tVect = m.transformVector(tVect);
  21.         verts.push(tVect.x, tVect.y, tVect.z);
  22.     }
  23.    
  24.     var stroke:GraphicsStroke = new GraphicsStroke();
  25.    
  26.     var col:int = [0xFFFFFF, 0x000000, 0xFFCC00, 0xFF0000][int(Math.random() * 4)];
  27.    
  28.     stroke.thickness = 2+(Math.random()*Math.random())*8;
  29.     var mg:Matrix = new Matrix();
  30.     mg.createGradientBox(350+Math.random()*20-10, 350+Math.random()*20-10, 0, -270+i/2,-240+i/2);
  31.     stroke.fill = new GraphicsGradientFill(GradientType.RADIAL, [0xFFFFFF,0x444444], [1, 1], [30, 255], mg);
  32.  
  33.     var bez:GraphicsPath = new GraphicsPath();
  34.     bez.commands = Vector.<int>([1, 3]);
  35.     igraph.push(stroke);
  36.     igraph.push(bez);
  37. }
  38.  
  39. var perspective:PerspectiveProjection = new PerspectiveProjection();
  40. perspective.fieldOfView = 45;
  41. var trans:Matrix3D = new Matrix3D();
  42. var proj:Matrix3D = perspective.toMatrix3D();
  43. var dx:Number = 0, dy:Number = 0;
  44.  
  45. addEventListener(Event.ENTER_FRAME, onLoop);
  46. function onLoop(evt:Event):void {
  47.     dx += (mouseX - dx) / 4;
  48.     dy += (mouseY - dy) / 4;
  49.        
  50.     trans.identity();
  51.     trans.appendRotation(dy, Vector3D.X_AXIS);
  52.     trans.appendRotation(dx, Vector3D.Y_AXIS);
  53.     trans.appendTranslation(0,0,0.5);
  54.     trans.transformVectors(verts, tVerts);
  55.     Utils3D.projectVectors(proj, tVerts, pVerts, uvts);
  56.    
  57.     var inc:int = 0;
  58.     for (var i:int = 1; i<igraph.length; i+=2){
  59.         GraphicsPath(igraph[i]).data = pVerts.slice(inc, inc + 6);
  60.         inc += 6;
  61.     }
  62.      
  63.     graphics.clear();
  64.     graphics.drawGraphicsData(igraph);
  65. }

A variation on yesterdays post - this makes use of GraphicsGradientFill to add some depth...

Check out the swf...

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

3D Bezier

By Zevan | August 22, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x000000, width=800, height=600)];
  2. x = stage.stageWidth / 2;
  3. y = stage.stageHeight / 2;
  4. var verts:Vector.<Number>  = new Vector.<Number>();
  5. var tVerts:Vector.<Number> = new Vector.<Number>();
  6. var pVerts:Vector.<Number> = new Vector.<Number>();
  7. var uvts:Vector.<Number> = new Vector.<Number>();
  8.  
  9. var igraph:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
  10.  
  11. var tVect:Vector3D = new Vector3D();
  12. var m:Matrix3D = new Matrix3D();
  13. for (var i:int = 0; i<300; i++){
  14.     for (var j:int = 0; j<3; j++){
  15.         tVect.x = Math.random() * 0.15;
  16.         m.identity();
  17.         m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  18.         m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  19.         m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  20.         tVect = m.transformVector(tVect);
  21.         verts.push(tVect.x, tVect.y, tVect.z);
  22.     }
  23.    
  24.      
  25.     var stroke:IGraphicsData = new GraphicsStroke();
  26.    
  27.     var col:int = [0xFFFFFF, 0x000000, 0xFFCC00, 0xFF0000][int(Math.random() * 4)];
  28.     with (stroke) thickness = (Math.random()*Math.random())*10, fill = new GraphicsSolidFill(col);
  29.  
  30.     var bez:GraphicsPath = new GraphicsPath();
  31.     bez.commands = Vector.<int>([1, 3]);
  32.     igraph.push(stroke);
  33.     igraph.push(bez);
  34. }
  35.  
  36. var perspective:PerspectiveProjection = new PerspectiveProjection();
  37. perspective.fieldOfView = 45;
  38. var trans:Matrix3D = new Matrix3D();
  39. var proj:Matrix3D = perspective.toMatrix3D();
  40. var dx:Number = 0, dy:Number = 0;
  41.  
  42. addEventListener(Event.ENTER_FRAME, onLoop);
  43. function onLoop(evt:Event):void {
  44.     dx += (mouseX - dx) / 4;
  45.     dy += (mouseY - dy) / 4;
  46.        
  47.     trans.identity();
  48.     trans.appendRotation(dy, Vector3D.X_AXIS);
  49.     trans.appendRotation(dx, Vector3D.Y_AXIS);
  50.     trans.appendTranslation(0,0,0.5);
  51.     trans.transformVectors(verts, tVerts);
  52.     Utils3D.projectVectors(proj, tVerts, pVerts, uvts);
  53.    
  54.     var inc:int = 0;
  55.     for (var i:int = 1; i<igraph.length; i+=2){
  56.         GraphicsPath(igraph[i]).data = pVerts.slice(inc, inc + 6);
  57.         inc += 6;
  58.     }
  59.      
  60.     graphics.clear();
  61.     graphics.drawGraphicsData(igraph);
  62. }

After a few hours of trying to get a super optimized fp10 z-sorting demo happening, I gave up (for now) and decided to just let loose with something easy. The result is this 3D Bezier example...


Check out the swf...

Posted in 3D, Graphics, bezier | Tagged , , , | 3 Comments

Sierpiński Glitch Texture #3

By Zevan | August 21, 2009
CLICK HERE TO COPY
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...

Posted in BitmapData, Operators, Vector, pixel manipulation | Tagged , , | 2 Comments