Category Archives: BitmapData

3D Hypocycloid Shape

By Zevan | April 21, 2009
CLICK HERE TO COPY
Actionscript:
  1. var matrix:Matrix3D = new Matrix3D();
  2. var verts:Vector.<Number> = new Vector.<Number>();
  3. var pVerts:Vector.<Number> = new Vector.<Number>();
  4. var uvts:Vector.<Number> = new Vector.<Number>();
  5. const TWO_PI:Number=Math.PI * 2;
  6. var step:Number=.05;
  7.  
  8. var brush:BitmapData = new BitmapData(3, 2, true, 0x41FFFFFF);
  9. var n:Number=8;
  10. var xp:Number=0,yp:Number=0,a:Number=12,t:Number=0;
  11. for (var i:Number = 0; i<TWO_PI; i+=step) {
  12.     for (var j:Number = 0; j<TWO_PI; j+=step) {
  13.         // unoptimized for readability
  14.     var cosi:Number = a/n * ((n - 1) * Math.cos(i) + Math.cos(Math.abs((n - 1) * i)));
  15.     var sini:Number = a/n * ((n - 1) * Math.sin(i) - Math.sin(Math.abs((n - 1) * i)));
  16.     var cosj:Number = a/n * ((n - 1) * Math.cos(j) + Math.cos(Math.abs((n - 1) * j)));
  17.     var sinj:Number = a/n * ((n - 1) * Math.sin(j) - Math.sin(Math.abs((n - 1) * j)));
  18.         verts.push(cosi * cosj);
  19.         verts.push(sini * cosj);
  20.         verts.push(a * sinj);
  21.         pVerts.push(0),pVerts.push(0);
  22.         uvts.push(0),uvts.push(0),uvts.push(0);
  23.     }
  24. }
  25. var canvas:BitmapData=new BitmapData(400,400,false,0x000000);
  26. addChild(new Bitmap(canvas));
  27. var dx:Number=0;
  28. var dy:Number=0;
  29. addEventListener(Event.ENTER_FRAME, onLoop);
  30. function onLoop(evt:Event):void {
  31.     dx += (mouseX - dx)/4;
  32.     dy += (mouseY - dy)/4;
  33.     matrix.identity();
  34.     matrix.appendRotation(dy,Vector3D.X_AXIS);
  35.     matrix.appendRotation(dx,Vector3D.Y_AXIS);
  36.     matrix.appendTranslation(200, 200, 0);
  37.     Utils3D.projectVectors(matrix, verts, pVerts, uvts);
  38.     canvas.lock();
  39.     canvas.fillRect(canvas.rect, 0x000000);
  40.     var p = new Point();
  41.     for (var i:int = 0; i<pVerts.length; i+=2) {
  42.         p.x = pVerts[i];
  43.         p.y = pVerts[i + 1];
  44.         canvas.copyPixels(brush, brush.rect, p, null, null, true);
  45.     }
  46.     canvas.unlock();
  47. }

Taking the Hypocycloid stuff from yesterday into 3D...

Also posted in 3D, Math | Tagged , | 6 Comments

Utils3D.projectVectors() & 100,000 pixels

By Zevan | April 12, 2009
CLICK HERE TO COPY
Actionscript:
  1. var matrix:Matrix3D = new Matrix3D();
  2.  
  3. const PARTICLE_NUM:int = 100000;
  4. var verts:Vector.<Number> = new Vector.<Number>();
  5. var pVerts:Vector.<Number> = new Vector.<Number>();
  6. var uvts:Vector.<Number> = new Vector.<Number>();
  7.  
  8. for (var i:int = 0; i<PARTICLE_NUM; i++){
  9.     verts.push(Math.random()*250 - 125);
  10.     verts.push(Math.random()*250 - 125);
  11.     verts.push(Math.random()*250 - 125);
  12.    
  13.     pVerts.push(0), pVerts.push(0);
  14.     uvts.push(0), uvts.push(0), uvts.push(0);
  15. }
  16.  
  17. var canvas:BitmapData = new BitmapData(400,400,false, 0x000000);
  18. addChild(new Bitmap(canvas));
  19. var dx:Number=0;
  20. var dy:Number=0;
  21.  
  22. addEventListener(Event.ENTER_FRAME, onLoop);
  23. function onLoop(evt:Event):void {
  24.  
  25.     dx += (mouseX - dx)/4;
  26.     dy += (mouseY - dy)/4;
  27.    
  28.     matrix.identity();
  29.     matrix.appendRotation(dy,Vector3D.X_AXIS);
  30.     matrix.appendRotation(dx,Vector3D.Y_AXIS);
  31.     matrix.appendTranslation(200, 200, 0);
  32.    
  33.     Utils3D.projectVectors(matrix, verts, pVerts, uvts);
  34.    
  35.     canvas.lock();
  36.     canvas.fillRect(canvas.rect, 0x000000);
  37.         var leng:int = pVerts.length;
  38.     for (var i:int = 0; i<leng; i+=2){
  39.         canvas.setPixel( pVerts[i], pVerts[i + 1], 0xFFFFFF);
  40.     }
  41.     canvas.unlock();
  42. }

The above shows an easy way to use Utils3D.projectVectors() to move some pixels around in 3D. Since the 3D math is done behind the scenes by the flash player it runs quite fast...

Also posted in 3D, Vector, matrix, setPixel | Tagged , | 3 Comments

Tooth Curve (modified Bicuspid)

By Zevan | April 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData=new BitmapData(400,400,false,0xCCCCCC);
  2. addChild(new Bitmap(canvas));
  3.  
  4. var a:Number=-1.21;
  5. var r:Rectangle=new Rectangle(0,0,3,5);
  6. var halfWidth:Number=canvas.width/2;
  7. var halfHeight:Number=canvas.height/2;
  8.  
  9. render();
  10.  
  11. function render():void{
  12.     for (var x:Number = -2; x<=2; x+=.05) {
  13.         for (var y:Number = -2; y<=2; y+=.05) {
  14.    
  15.             // equation from : http://en.wikipedia.org/wiki/Bicuspid_curve
  16.             //(x^2 - a^2) * (x - a)^2 + (y^2 - a^2) * (y^2 - a^2) = 0
  17.    
  18.             // unpoptimized:
  19.             // var e:Number = (x*x - a*a) * (x-a)*(x-a) + (y*y-a*a) * (y*y-a*a);  
  20.             // optimized:
  21.             var x_a:Number=x-a;
  22.             // factoring: x^2 - a^2 = (x + a) * (x - a)
  23.             var y2_a2:Number =  (y + a) * (y - a);
  24.             var e:Number = (x + a) * x_a * x_a * x_a +  y2_a2 * y2_a2;
  25.    
  26.             // tolerance beetween .7 & -.1;
  27.             if (e<.7&&e>-.1) {
  28.                 r.x=halfWidth+y*50;
  29.                 r.y=halfHeight-x*100;
  30.                 canvas.fillRect(r, 0x000000);
  31.             }
  32.         }
  33.     }
  34. }

I've been looking for a single math equation to draw a tooth for sometime.... today I stumbled upon this... and realized it could probably be changed to look more like a tooth.

This snippet will draw this:

I'm using a graphing method here that allows me to use the Cartesian form of the equation and not the parameteric... I'll explain a bit more about this in a later post.

Also posted in Math | Tagged , | 1 Comment

BitmapData Snapshot Grid

By Zevan | April 4, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600,height=650)]
  2. var canvas:BitmapData=Bitmap(addChild(new Bitmap(new BitmapData(600,300,false,0xCCCCCC),"auto",true))).bitmapData;
  3. var stills:BitmapData=Bitmap(addChild(new Bitmap(new BitmapData(600,380,false,0xAAAAAA),"auto",true))).bitmapData;
  4. getChildAt(1).y=300;
  5.  
  6. var c:Shape = new Shape();
  7. var m:Matrix = new Matrix();
  8. m.createGradientBox(40, 40, 0, 0, 0);
  9. c.graphics.beginGradientFill(GradientType.RADIAL, [0xCC0000, 0xCC0000],  [1, 0], [0, 255], m);
  10. c.graphics.drawCircle(20,20,20);
  11.  
  12. addEventListener(Event.ENTER_FRAME, onLoop);
  13. function onLoop(evt:Event):void {
  14.     c.x=mouseX-c.width/2;
  15.     c.y=mouseY-c.height/2;
  16.     canvas.draw(c, c.transform.matrix);
  17. }
  18.  
  19. var spacing:Number = 10;
  20. var cols:Number = 4;
  21. var max:Number = cols * cols;
  22. var size:Number = 1/(canvas.width/((canvas.width / cols) - spacing));
  23. var st:Matrix = new Matrix();
  24. st.scale(size, size);
  25. var w:Number = canvas.width * st.d  + spacing;
  26. var h:Number = canvas.height * st.d + spacing;
  27. var timer:Timer=new Timer(500);
  28. timer.start();
  29. timer.addEventListener(TimerEvent.TIMER, onCapture);
  30. function onCapture(evt:TimerEvent):void {
  31.     var inc:int = timer.currentCount - 1;
  32.     st.tx = (inc% cols) * w+ spacing / 2;
  33.     st.ty = int(inc / cols) * h + spacing;
  34.     stills.draw(canvas, st);
  35.     if (timer.currentCount==max) {
  36.         timer.reset();
  37.         timer.start();
  38.     }
  39. }

Take snapshots of a given BitmapData and arrange them in a grid. I wrote this snippet quickly in response to a question so it could probably use a little clean up...

You'll need to move your mouse over the large canvas bitmap (drawing to it) to see anything...

Posted in BitmapData | Tagged , | Leave a comment