Sphere of Squares

Actionscript:
  1. [SWF(width = 600, height = 600, backgroundColor=0x000000)]
  2. var squareNum:int  = 1000;
  3. var hw:Number = stage.stageWidth / 2;
  4. var hh:Number = stage.stageHeight / 2;
  5. // verts defines a single square
  6. var verts:Vector.<Number> = Vector.<Number>([-20, 0, 0, 20, 0, 0, 20, 0, 40, -20, 0, 40, -20, 0, 0]);
  7. var cmds:Vector.<int> = Vector.<int>([1,2,2,2,2]);
  8. var tempVerts:Vector.<Number> = new Vector.<Number>();
  9. var newVerts:Vector.<Number> = new Vector.<Number>();
  10. var pVerts:Vector.<Number> = new Vector.<Number>(10 * squareNum);
  11. var uv:Vector.<Number> = new Vector.<Number>(15 * squareNum);
  12. var vectors:Shape = new Shape();
  13. var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  14. addChild(new Bitmap(canvas));
  15. var blurred:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x000000);
  16. var blur:BlurFilter = new BlurFilter(20,20,1);
  17.  
  18. var m:Matrix3D = new Matrix3D();
  19.  
  20. var radius:Number = 200;
  21. // duplicate the verts array a bunch of times
  22. // each time moving the square to a random place on the
  23. // circumference of a sphere
  24. for (var i:int = 0; i<squareNum; i++){
  25.     m.identity();
  26.     var s:Number = Math.random()*.5 + .5;
  27.     m.appendScale(s, s, s);
  28.     m.appendRotation(90,Vector3D.X_AXIS);
  29.     m.appendTranslation(0, 0, radius);
  30.     m.appendRotation(Math.random()*360,Vector3D.X_AXIS);
  31.     m.appendRotation(Math.random()*360,Vector3D.Y_AXIS);
  32.     m.appendRotation(Math.random()*360,Vector3D.Z_AXIS);
  33.     m.transformVectors(verts,tempVerts);
  34.     newVerts = newVerts.concat(tempVerts);
  35.     cmds = cmds.concat(Vector.<int>([1,2,2,2,2]));
  36. }
  37. newVerts.fixed = pVerts.fixed = uv.fixed = true;
  38. var dx:Number = 0, dy:Number = 0;
  39. var pnt:Point = new Point();
  40. addEventListener(Event.ENTER_FRAME, onLoop);
  41. function onLoop(evt:Event):void {
  42.        dx += (mouseX - dx) / 4;
  43.        dy += (mouseY - dy) / 4;
  44.        m.identity();
  45.        m.appendRotation(dx,Vector3D.Z_AXIS);
  46.        m.appendRotation(dy,Vector3D.X_AXIS);
  47.        m.appendTranslation(hw,hh, 0);
  48.        Utils3D.projectVectors(m, newVerts, pVerts, uv);
  49.        with(vectors.graphics){
  50.            clear();
  51.            beginFill(0xFFFFFF);
  52.            drawCircle(hw, hh, radius+10);
  53.            beginFill(0x000000);
  54.            drawPath(cmds, pVerts, GraphicsPathWinding.NON_ZERO);
  55.        }
  56.        canvas.fillRect(canvas.rect, 0x000000);
  57.        canvas.draw(vectors);
  58.        blurred.copyPixels(canvas, canvas.rect, pnt);
  59.        blurred.applyFilter(blurred,blurred.rect, pnt, blur);
  60.        canvas.draw(blurred, null, null, BlendMode.SCREEN);
  61. }

This snippet is similar to yesterdays post but the visual result is rather different. This one does a little more Matrix3D stuff resulting in a sphere made up entirely of squares. This is obscured by the size of the squares and the fact that they overlap and cut each other up. BitmapData a BlurFilter and a BlendMode give the entire thing a slight glow...


Have a look at the swf here...

This entry was posted in 3D, BitmapData, Vector and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

12 Comments

  1. Posted July 23, 2009 at 4:36 pm | Permalink

    That’s beautiful Zevan! I am amazed by your ability to create totally outstanding and different thing every day, how do you do that? It reminds me BIT-101’s calendar with experiments a few years ago.

  2. Posted July 23, 2009 at 4:54 pm | Permalink

    Thanks Og2t… to answer your question, whenever I have an idea for something I write it down - the result is that I always have a small list of things to try to create. Also, if I find myself coding something interesting during a day of commercial work, I’ll take a few minutes to turn it into a post.

    I could actually probably talk about bit-101 for a super long time - I’ve enjoyed that site for years… has always been really inspiring.

  3. Posted July 24, 2009 at 3:46 am | Permalink

    That. Is. Brilliant!!! That had to be the prettiest 3D example I’ve seen so far!

  4. Posted July 24, 2009 at 6:31 am | Permalink

    Thanks dVyper :)

  5. Posted July 30, 2009 at 4:22 am | Permalink

    yes, too bad bit101 burned out. and too bad I was not aware of actionsnippet.com all this time too :)

  6. Posted July 30, 2009 at 12:32 pm | Permalink

    I’m still a big fan of bit-101 even though it is mainly about iphone dev now… If you just discovered actionsnippet there’s lots of stuff for you to mess with, I think I’m nearing the 300th post ;)

  7. Posted July 30, 2009 at 2:58 pm | Permalink

    ever thought about uploading some of this to wonderfl.net?

  8. Posted July 30, 2009 at 3:43 pm | Permalink

    yeah, a few people have suggested it … and may just have to start doing that… I started working on a script that would autopost to wonderful, but never finished it… (not even sure its possible actually - never got far enough along with the script)…

  9. Posted July 31, 2009 at 3:39 am | Permalink

    open page, paste code, hit save. why would anyone need a script for that.

  10. Posted July 31, 2009 at 6:43 am | Permalink

    heh… you forget one important step - convert to document class ;)

  11. Posted July 31, 2009 at 7:09 am | Permalink

    I guess your right though, I should probably start posting there…. It bugs me that they don’t have a list of most recently added things independent of rank…

  12. Posted August 17, 2009 at 6:46 am | Permalink

    I went back here to let other readers know that bit101 did not burned out completely. I have unsubscribed from his main now iphone-centered blog, but added http://www.artfromcode.com/?feed=rss2 instead.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*