Flowing Leaves (optical illusion)

Saw this optical illusion today... figured I'd make a snippet to create a few variations on the illusion...

Actionscript:
1. [SWF( backgroundColor=0x2E7999, width=780, height = 600) ]
2.
3. var leafNum:Number = 375;
4. var spacing:Number = 12;
5. var cols:Number = 25;
6. var hh:Number = stage.stageHeight / 2;
7. var hw:Number = stage.stageWidth / 2;
8.
9. for (var i:Number = 0; i<leafNum; i++){
10.     var leaf:Shape = makeLeaf();
11.     leaf.scaleX = leaf.scaleY = 0.25;
12.     leaf.rotation = 90;
13.     leaf.x = 50 + (i % cols) * (leaf.width + spacing);
14.     leaf.y = 40 + int(i / cols) * (leaf.height + spacing);
15.     var dx:Number = leaf.x - hw;
16.     var dy:Number = leaf.y - hh;
17.     leaf.rotation = Math.sqrt(dx * dx + dy * dy);
18. }
19.
20. function makeLeaf():Shape{
21.     var leaf:Shape = Shape(addChild(new Shape()));
22.     leaf.graphics.beginFill(0x9DC4D4);
23.     scaleYcircle(leaf.graphics, 50, .65, false);
24.     leaf.graphics.endFill();
25.     leaf.graphics.lineStyle(2, 0x003366, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
26.     scaleYcircle(leaf.graphics, 50, .65);
27.     leaf.graphics.lineStyle(2, 0xFFFFFF, 1, false, "none", CapsStyle.SQUARE, JointStyle.MITER);
28.     scaleYcircle(leaf.graphics, -50, .65);
29.     return leaf;
30. }
31.
32.
33. // original circle function by senocular (www.senocular.com) from here http://www.actionscript.org/forums/showthread.php3?s=&threadid=30328
34. // circle that can be scaled on the y axis
35. function scaleYcircle(g:Graphics, r:Number, s:Number = 1, isHalf:Boolean=true):void {
36.
37.     var c1:Number = r * (Math.SQRT2 - 1);
38.     var c2:Number = r * Math.SQRT2 / 2;
39.     var rs:Number = r * s, c1s:Number = c1 * s, c2s:Number = c2 * s;
40.     var x_r:Number =  -r, y_r:Number = -rs, x_c2:Number =  -c2;
41.     var y_c2:Number =  -c2s, x_c1:Number =  -c1, y_c1:Number =  -c1s
42.     g.moveTo(r, 0), g.curveTo(r, c1s, c2, c2s);
43.     g.curveTo(c1, rs, 0, rs), g.curveTo(x_c1,rs, x_c2, c2s);
44.     g.curveTo(x_r, c1s, x_r, 0);
45.     if (!isHalf){
46.      g.curveTo(x_r,y_c1,x_c2,y_c2);
47.      g.curveTo(x_c1,y_r,0,y_r), g.curveTo(c1,y_r,c2,y_c2);
48.      g.curveTo(r,y_c1,r,0);
49.     }
50. }

This entry was posted in Graphics, Math, Vector, misc, motion, pixel manipulation and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

5 Comments

1. Posted October 20, 2009 at 4:07 am | Permalink

That’s awesome. I thought I was drunk!

2. DieTapete
Posted October 21, 2009 at 2:37 am | Permalink

Did you put it on WonderFL? I can’t find a link. Pasting is actually pretty hard because you have the line numbers in your code..

3. Posted October 21, 2009 at 5:45 am | Permalink

Hey DieTapete

Pasting isn’t hard if you click the “Click Here To Copy” button at the top of each snippet

4. Pablo
Posted October 22, 2009 at 12:05 pm | Permalink

i´m trying to find a way to use a shape.. any shape, even a movie clip, as a brush and use it to pain… can you point me in the right direction?… how can u do that… thanks.

5. Posted October 26, 2009 at 6:15 am | Permalink

here you go:

http://actionsnippet.com/?p=414