Category Archives: BitmapData

3D Shape

By Zevan | November 26, 2008
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. var centerX:Number = 200, centerY:Number = 200, zpos:Number, xpos:Number, ypos:Number, depth:Number;
  3. var rotX:Number = 0, rotY:Number = 0, px:Number, py:Number, pz:Number;
  4. var cosx:Number, cosy:Number, sinx:Number, siny:Number;
  5.  
  6. var canvas:BitmapData = new BitmapData(400,400,true,0xFF000000);
  7. addChild(new Bitmap(canvas));
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10.  
  11. function onLoop(evt:Event):void {
  12.     canvas.fillRect(canvas.rect, 0xFF000000);
  13.      rotX += (mouseX / 50 - rotX)/12;
  14.      rotY += (mouseY / 50 - rotY)/12;
  15.      
  16.      cosx = Math.cos(rotX);
  17.      cosy = Math.cos(rotY);
  18.      sinx = Math.sin(rotX);
  19.      siny = Math.sin(rotY);
  20.      for (var a:Number =0; a <6.28; a+=.1){
  21.           for (var b:Number =0; b <6.28; b+=.05){
  22.               px = 100 * Math.cos(a) * Math.cos(b) * Math.cos(b);
  23.               py = 100 * Math.sin(a) * Math.cos(b)
  24.               pz = 100 * Math.sin(b);
  25.               zpos= pz*cosx - px*sinx  ;
  26.               xpos= pz*sinx +px*cosx  ;
  27.               ypos= py*cosy - zpos*siny  ;
  28.               zpos= py*siny+ zpos*cosy ;
  29.               depth = 1/((zpos/340)+1);
  30.               canvas.setPixel((xpos * depth) + centerX, (ypos * depth) + centerY, 0xFFFFFF);
  31.           }
  32.      }
  33. }

Renders a rotating 3D shape.

Also posted in setPixel | Tagged , , | 5 Comments

10,000 Transparent Sprites

By Zevan | November 21, 2008
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2.  
  3. var imageNum:int = 10000;
  4. var point:Point = new Point(0,0);
  5. var s:Sprite = new Sprite();
  6. s.graphics.beginFill(0xCCCCCC);
  7. s.graphics.lineStyle(0,0x000000);
  8. s.graphics.drawCircle(3,3,3);
  9. s.alpha = .1;
  10.  
  11. var nested:Sprite = new Sprite();
  12. nested.addChild(s);
  13. var image:BitmapData = new BitmapData(s.width, s.height, true, 0x00000000);
  14. image.draw(nested);
  15.  
  16. var canvas:BitmapData = new BitmapData(400,400, true, 0xFFFFFFFF);
  17. addChild(new Bitmap(canvas));
  18.  
  19. var xPos:Array = new Array();
  20. var yPos:Array = new Array();
  21. for (var i:int = 0; i<imageNum; i++) {
  22.     xPos.push(Math.random()*400);
  23.     yPos.push(Math.random()*400);
  24. }
  25.  
  26. addEventListener(Event.ENTER_FRAME, onLoop);
  27. function onLoop(evt:Event):void {
  28.     canvas.fillRect(new Rectangle(0,0,400,400), 0xFFFFFFFF);
  29.     var div:Number;
  30.     for (var i:int = 0; i<imageNum; i++) {
  31.         div  = (i / 100)+2;
  32.         xPos[i] += (mouseX - xPos[i])/div;
  33.         yPos[i] += (mouseY - yPos[i])/div;
  34.         point.x = xPos[i];
  35.         point.y = yPos[i];
  36.         canvas.copyPixels(image, image.rect, point, null, null, true);
  37.     }
  38. }

This is from my other blog but I figured it was worth posting here. It draws 10'000 transparent circles that each follow the mouse at different speeds. This is achieved using copyPixels().

Also posted in motion | Tagged , , | 2 Comments

Alphabet with Base36 and Binary

By Zevan | November 13, 2008
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData=new BitmapData(280,100,false,0xefefef);
  2. addChild(new Bitmap(canvas));
  3.  
  4. // pixel alphbet in base36
  5. var alphabet:Array=["", "67erkgi", "e3j6dss", "75rue4u", "c5ltok8", "75s2tji", "75s2tjk", "75rugj2", "95yfnf6", "21blls4", "10nt5xo", "973it1u", "85aef4u", "59lu6nl", "cnz0hbn", "67ej51o", "67eq49c", "67ej53e", "67eq7gy", "66978m4", "6ywdqpw", "95y780c", "53b00as", "8nmdpyi", "5374thm", "53avnus", "6xsfdam"];
  6.  
  7. function drawBase36(num:String, xp:int, yp:int):void {
  8.     // convert base36 to binary
  9.     num=parseInt(num,36).toString(2);
  10.     while (num.length <35) {
  11.         num="0"+num;
  12.     }
  13.     // draw letter
  14.     for (var i:int= 0; i<35; i++) {
  15.         if (num.charAt(i)=="1") {
  16.             canvas.setPixel(i % 5 + xp, int(i / 5) + yp, 0x000000);
  17.         }
  18.     }
  19. }
  20.  
  21. // draw the entire alphabet
  22. for (var i:int = 0; i<alphabet.length; i++) {
  23.     drawBase36(alphabet[i], i * 10,10);
  24. }
  25.  
  26. // draw some words
  27. var words:Array=[0,1,3,20,9,15,14,19,14,9,16,16,5,20,0,9,19,0,3,15,4,5];
  28. for (i = 0; i<words.length; i++) {
  29.     drawBase36(alphabet[words[i]], i * 10,30);
  30. }

I had lots of fun writing this. If you run it in your timeline it will draw this:


... along with the message stored in this array [0,1,3,20,9,15,14,19,14,9,16,16,5,20,0,9,19,0,3,15,4,5].

Binary can be used for representing small images. For every 0 draw white for every 1 draw black. So when the base36 numbers are converted to binary, the 1's and 0's are used to draw each letter.

An interesting side note is that counting in binary to some very high numbers will enumerate all possible two color images at a given size. There are tons of projects related to this... here is one I found with a quick google search: every icon

I also found the wikipedia entry on base36 to be interesting. Apparently base36 can be called hexatridecimal, sexatrigesimal, hexatrigesimal or alphadecimal.

Also posted in pixel manipulation, strings | Tagged , , , , | 2 Comments

setPixel() Cubic Bezier

By Zevan | October 30, 2008
CLICK HERE TO COPY
Actionscript:
  1. var canvas:BitmapData=new BitmapData(280,280,false,0x000000);
  2. addChild(new Bitmap(canvas, PixelSnapping.AUTO, true));
  3.  
  4. var color:uint;
  5.  
  6. // anchor x1, anchor y1,
  7. // control-handle x2, control-handle y2,
  8. // anchor x3, anchor y3, control-handle x4,
  9. // control-handle y4, [resolution incremental value between 0-1]
  10. function cubicBezier(x1:Number, y1:Number, x2:Number, y2:Number,
  11.                           x3:Number, y3:Number, x4:Number, y4:Number, resolution:Number=.03):void {
  12.    
  13.     var b:Number,pre1:Number,pre2:Number,pre3:Number,pre4:Number;
  14.     for (var a = 0; a <1; a+=resolution) {
  15.         b=1-a;
  16.         pre1=(a*a*a);
  17.         pre2=3*(a*a)*b;
  18.         pre3=3*a*(b*b);
  19.         pre4=(b*b*b);
  20.         canvas.setPixel(pre1*x1 + pre2*x2 + pre3*x4 + pre4*x3 ,
  21.                          pre1*y1 + pre2*y2 + pre3*y4 + pre4*y3, color);
  22.     }
  23. }
  24.  
  25. // draw a few
  26.  
  27. color = 0xFFFFFF;
  28.  
  29. cubicBezier(100,100,
  30.                     150, 50,
  31.                     200, 100,
  32.                     150, 150);
  33.  
  34. color = 0xFF0000;
  35.  
  36. cubicBezier(10,10,
  37.                     150, 10,
  38.                     200, 200,
  39.                     250, 150,
  40.                 .01);
  41. /*
  42. WARNING: This code was written for fun. Use at your own risk.
  43. */

This draws cubic bezier curves with setPixel. I'm pretty sure I picked up the original math from somewhere on the processing forums in '03 or '04...

Also posted in bezier, setPixel | Tagged | Leave a comment