# 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.

• ActionSnippet is on Twitter