Category Archives: BitmapData

Gumdrop Torus

By Zevan | August 7, 2009
CLICK HERE TO COPY
Actionscript:
  1. var matrix:Matrix3D = new Matrix3D();
  2.  
  3. var verts:Vector.<Number> = new Vector.<Number>();
  4. var pVerts:Vector.<Number> = new Vector.<Number>();
  5. var uvts:Vector.<Number> = new Vector.<Number>();
  6.  
  7. for (var i:Number = -2; i<2; i+=.04){
  8.     for (var j:Number = -2; j<2; j+=.04){
  9.         for (var k:Number = -2; k<2; k+=.04){
  10. // equation from: http://local.wasp.uwa.edu.au/~pbourke/geometry/gumdrop/
  11.             var yz:Number = j * j + k * k;
  12.              var s:Number = 4 * (Math.pow(i,4) + Math.pow(yz,2))
  13.              + 17 * i * i *(yz) - 20 * (yz + i * i) + 17;
  14.             if (s <0 && s> -0.5){
  15.                 verts.push(i * 60);
  16.                 verts.push(j * 60);
  17.                 verts.push(k * 60);
  18.                 pVerts.push(0), pVerts.push(0);
  19.                 uvts.push(0), uvts.push(0), uvts.push(0);
  20.              }
  21.         }
  22.     }
  23. }
  24.  
  25. var tVerts:Vector.<Number> = new Vector.<Number>();
  26. matrix.appendRotation(90, Vector3D.X_AXIS);
  27. matrix.appendRotation(45, Vector3D.Y_AXIS);
  28. matrix.appendScale(1.7, 1.7, 1.7);
  29. matrix.transformVectors(verts, tVerts);
  30.  
  31. var p:Point = new Point();
  32. var brush:BitmapData=new BitmapData(3,3,true,0x41FFFFFF);
  33. var canvas:BitmapData = new BitmapData(500,500,false, 0x000000);
  34. addChild(new Bitmap(canvas));
  35. var dx:Number=0;
  36. var dy:Number=0;
  37. addEventListener(Event.ENTER_FRAME, onLoop);
  38. function onLoop(evt:Event):void {
  39.     dx += (mouseX - dx)/4;
  40.     dy += (mouseY - dy)/4;
  41.     matrix.identity();
  42.     matrix.appendRotation(dy,Vector3D.X_AXIS);
  43.     matrix.appendRotation(dx,Vector3D.Y_AXIS);
  44.     matrix.appendTranslation(250, 250, 0);
  45.     Utils3D.projectVectors(matrix, tVerts, pVerts, uvts);
  46.     canvas.lock();
  47.     canvas.fillRect(canvas.rect, 0x000000);
  48.     var inc:int = 0;
  49.     for (var i:int = 0; i<pVerts.length; i+=2){
  50.      
  51.         p.x = pVerts[i];
  52.         p.y = pVerts[i+1];
  53.         canvas.copyPixels(brush, brush.rect, p, null, null, true);
  54.     }
  55.     canvas.unlock();
  56. }

Felt like revisiting implicit surface plotting today...

Have a look at the swf over at wonderfl.net

Also posted in 3D, Math | Tagged , , | Leave a comment

base32 Twitter Coordinates

By Zevan | August 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 800, height=700, frameRate=30, backgroundColor=0x000000)]
  2. var canvas:BitmapData = new BitmapData(1000,800,false, 0x000000);
  3. addChild(new Bitmap(canvas));
  4.  
  5. var coords:String ="";
  6. var index:int = 0;
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8.  
  9. var s:Shape = new Shape();
  10. with (s.graphics) beginFill(0xFFFFFF, 0.3), drawCircle(4,4,4)
  11. var brush:BitmapData = new BitmapData(10,10, true, 0x00000000);
  12. brush.draw(s);
  13.  
  14. var pnt:Point = new Point();
  15. function onLoop(evt:Event):void {
  16.      if (coords.length> 0){
  17.          for (var i:int = 0; i<100;i++){
  18.              if (index <coords.length){
  19.                  pnt.x+= 0.2;
  20.                  pnt.y = parseInt(coords.substr(index,3), 32) / 2;
  21.                  index+=3;
  22.                  canvas.copyPixels(brush, brush.rect, pnt, null, null, true);
  23.              }else{
  24.                 break;
  25.                 removeEventListener(Event.ENTER_FRAME, onLoop);
  26.              }
  27.          }
  28.      }
  29. }
  30.  
  31. var loader:URLLoader = new URLLoader();
  32. var req:URLRequest = new URLRequest("http://search.twitter.com/search.atom");
  33. var vars:URLVariables = new URLVariables();
  34. vars.q = "as3, flash";
  35. vars.rpp = "100";
  36. vars.page = 1;
  37. vars.lang = "en";
  38. req.data = vars;
  39. req.method = URLRequestMethod.POST;
  40. loader.load(req);
  41. loader.addEventListener(Event.COMPLETE, onLoaded);
  42. function onLoaded(evt:Event):void{
  43.     var searchData:XML = new XML(loader.data);
  44.     var atom:Namespace = searchData.namespace("");
  45.     default xml namespace = atom;
  46.     var titles:String = "";
  47.     for each(var entry:XML in searchData.entry){
  48.         titles += entry.title.toString();
  49.     }
  50.     var index:int = 0;
  51.     var words:Array = titles.split(" ");
  52.     words.sort();
  53.     for (var i:int = 0; i<words.length; i++){
  54.         if (words[i].match(/RT|\@|\#|http/g).length == 0){
  55.             var word:String = words[i].replace(/[\W]/g, "");
  56.             if (word.length> 1){
  57.                 coords += word + " ";
  58.             }
  59.         }
  60.     }
  61. }

This snippet does a twitter search and sorts the results alphabetically. It then reads through the results 3 characters at a time - each set of 3 characters is converted to base32 and then used a y coordinate on a plot.

In order for the swf to be worth looking at, I think I'd need to add an input field. I may do that later... but for now here are a few stills:

Also posted in external data, string manipulation, strings | Tagged , , , | 2 Comments

Twitter Texture Alphabet

By Zevan | August 4, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 1000, height=800, frameRate=60)]
  2.  
  3. // if you don't have flex you'll need to embed this font in your library
  4. [Embed(source="/Library/Fonts/Verdana.ttf", fontFamily="Verdana")]
  5. var Verdana:Class;
  6.  
  7. var canvas:BitmapData = new BitmapData(1000,800,false, 0xFFFFFF);
  8. addChild(new Bitmap(canvas));
  9. var overlay:BitmapData = new BitmapData(1000,800,true, 0x01FFFFFF);
  10.  
  11.  
  12. var txt:TextField = TextField(addChild(new TextField()));
  13. with (txt){
  14.     defaultTextFormat = new TextFormat("Verdana", 10);
  15.     embedFonts = true;
  16.     width = stage.stageWidth-20;
  17.     height = stage.stageHeight-20;
  18.     multiline = true;
  19.     wordWrap = true;
  20.     text ="";
  21.     textColor = 0x444444;
  22.     selectable = false;
  23.     x = y = 10;
  24.     text = "loading...";
  25. }
  26.  
  27.  
  28. var selectWords:Array = [];
  29. var currFirstLetter:String="";
  30. var prevFirstLetter:String="";
  31. var index:int = 0;
  32. var anchorX:Number = 0, anchorY:Number = 0, theta:Number, radius:Number;
  33. addEventListener(Event.ENTER_FRAME, onLoop);
  34. function onLoop(evt:Event):void {
  35.      canvas.copyPixels(overlay, overlay.rect, new Point(0,0), null, null, true);
  36.      var leng:int = selectWords.length;
  37.      if (leng> 0){
  38.          var word:String = selectWords[index % leng];
  39.          trace(word);
  40.          currFirstLetter = word.charAt(0);
  41.          if (currFirstLetter != prevFirstLetter){
  42.              anchorX = Math.random() * (stage.stageWidth - 200) + 100
  43.              anchorY = Math.random() * (stage.stageHeight - 200) + 100;
  44.              theta = Math.random() * Math.PI * 2;
  45.              radius = 50 + Math.random() * 100;
  46.              txt.textColor = [0,0xFFFFFF,0xCCCCCC,0x666666][int(Math.random()*4)];
  47.          }else{
  48.              txt.x = anchorX + radius * Math.cos(theta);
  49.              txt.y = anchorY + radius * Math.sin(theta);
  50.              theta += Math.random() * .1;
  51.              radius += 3;
  52.              txt.scaleX = txt.scaleY = 1 + Math.random();
  53.              if (int(Math.random()*30) == 1) txt.scaleX = txt.scaleY = 1 + Math.random()*10;
  54.              txt.rotation = theta / Math.PI * 180;
  55.              txt.text = word;
  56.              canvas.draw(txt, txt.transform.matrix);
  57.          }
  58.          prevFirstLetter = currFirstLetter;
  59.          index++;
  60.      }
  61. }
  62.  
  63. var loader:URLLoader = new URLLoader();
  64. var req:URLRequest = new URLRequest("http://search.twitter.com/search.atom");
  65. var vars:URLVariables = new URLVariables();
  66. vars.q = "alphabet";
  67. // results per page
  68. vars.rpp = "100";
  69. vars.page = 1;
  70. vars.lang = "en";
  71.  
  72. req.data = vars;
  73. req.method = URLRequestMethod.POST;
  74. loader.load(req);
  75. loader.addEventListener(Event.COMPLETE, onLoaded);                                 
  76. function onLoaded(evt:Event):void{
  77.     var searchData:XML = new XML(loader.data);
  78.     var atom:Namespace = searchData.namespace("");
  79.     default xml namespace = atom;
  80.     var titles:String = "";
  81.     for each(var entry:XML in searchData.entry){
  82.         titles += entry.title.toString();
  83.     }
  84.     var index:int = 0;
  85.     var words:Array = titles.split(" ");
  86.     for (var i:int = 0; i<words.length; i++){
  87.         // exclude a few things
  88.         if (words[i].match(/RT|\@|\#|http/g).length == 0){
  89.             selectWords[index++] = words[i].replace(/\s|\r|\n|\"/g, "");
  90.         }
  91.     }
  92.     selectWords.sort();
  93.     txt.text =""
  94.        removeChild(txt);
  95. }

This snippet draws a texture using a twitter search for the word "alphabet". The results are arranged alphabetically and used to draw a texture.


Have a look at the swf:

Also posted in external data, string manipulation, strings | Tagged , , , | 2 Comments

Perlin Outlines

By Zevan | July 31, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height=600, backgroundColor=0xCCCCCC, frameRate=24)]
  2. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
  3. var blur:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
  4. addChild(new Bitmap(canvas, "auto", true));
  5.  
  6. var w:int = canvas.width
  7. var hw:int = w / 2;
  8. var size:int = w * w;
  9. var seed:Number = Math.random()*100;
  10. var pnt:Point = new Point();
  11. var dy:Number = 0, dx:Number = 0;
  12. var blr:BlurFilter = new BlurFilter(10,10,1);
  13. addEventListener(Event.ENTER_FRAME, onLoop);
  14. function onLoop(evt:Event):void {
  15.    
  16.     dx += (mouseX - dx) / 4;
  17.     dy += (mouseY - dy) / 4;
  18.     canvas.lock();
  19.     canvas.perlinNoise(hw,hw,2,seed,false, false, 1, true, [new Point(dx, dy), new Point(-dx, -dy)]);
  20.     var pix:Vector.<uint> = canvas.getVector(canvas.rect);
  21.     for (var i:int = 0; i<size; i++){
  22.         var col:uint = 255 - pix[i] <<4 & 0x00FF00;
  23.         pix[i] = col <<8 | col | col>> 8;
  24.     }
  25.     canvas.setVector(canvas.rect, pix);
  26.     blur.copyPixels(canvas, canvas.rect, pnt);
  27.     blur.applyFilter(blur, blur.rect, pnt, blr);
  28.     canvas.draw(blur, null, null, BlendMode.DIFFERENCE);
  29.     canvas.draw(canvas, null, null, BlendMode.INVERT);
  30.     canvas.unlock();
  31. }

This is actually an optimized variation on some recent posts that made use of perlin noise. You can get a wide range of effects by changing just the BlendMode values alone.... I particularly like this combination of BlendModes because it reminds me a bit of a terrain map...

Have a look at the swf...

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