Mr Grass, The grass movement algorithm

date: 25 Nov, 2008, actionscript: 3 FP9, complexity: complexity level 4 of 5complexity level 4 of 5complexity level 4 of 5complexity level 4 of 5complexity level 4 of 5, feedback (votes): users score 4.98 of 5 (335 votes)users score 4.98 of 5 (335 votes)users score 4.98 of 5 (335 votes)users score 4.98 of 5 (335 votes)users score 4.98 of 5 (335 votes)

Hi guys, one day in my way back from USA to UK, I was in a plane having really bad problems for sleeping and then after trying many things to make my flight shorter I decided to take my wife's notebook (while she sleeps) and write some actionscript during 2 hours and a half of battery, using it with the lowest LCD brightness level possible, by luck I copied the latest Open source Flex SDK 3 on my pen drive before boarding and her computer got at least notepad working fine.

In that moment I was with the idea of publishing all experiments I've done so far in a website but I had no clue about how this web site should look like, so it was here when the grass header came to my mind and then once it was live some people came with some questions and ideas that make me feel that I should share the source code of it with those flash developers who are working with games, interactive interfaces and crazy flash applications.

Well, it was always tricky for everybody making things looking natural, especially animations based on nature themes, they are hard to achieve, so it was a kind of a challenge for me working on this grass. Here I've learned a bit more about drawing in a canvas (bitmap area) and the eternal fighting against performance. Drawing on flash using .graphics is powerful but it is a bit slow and could affect badly your flash application specially when using gradients, filters and complex shapes with curves simultaneously.

On this project I am using 3 layers of different grass groups; each of them is using a Blur filter independently and also different scale responding to the mouse position, each group contents 167 leaves (500 in total) that are being drawn dynamically on each frame when there is any mouse interaction. Each leave has 2 different gradients fill applied, one is the face up to the light and the other one is its shadow or darker side, also each of these has to responds differently to the mouse depending of its shape and nature stiffness. I've been thinking and thinking in the best way for doing it, I tried many different prototypes but at the end the best approach for having 100% control of each canvas leave was making then based of the class Shape (flash.display.Shape) due that in this way I don't have to redraw the whole area when only some leaves are being animated.

The performance of the whole animation (500 leaves at time) is quite light; the expensive thing is the drawing API, as I said per each leave it needs to draw 2 different gradients, one for the leave shape and other for the leave shadow plus the curves of its shape. On my computer it is taking up to 25% of my CPU when drawing all at the same time.

Windows XP processes performance

When I move all leaves it takes about 25% of my cpu time in average

Windows XP CPU graph performance

Unfortunately I'm still working on the source code (cleaning up, commenting and making it nicer), also I'm breaking the code into steps in order to make it easier to follow and swallow but the version I did on the plane in notepad is here if you want to take a look, all you need is download the Open Source Flex SDK and that's all! (no Flash IDE needed, nor flex builder needed).. By the way the compiled swf file is quite big, it is 2.74 KB, lol! All you need to compile it is:

Windows XP command line

Click around on the flash-swf below to understand a bit more how it behaves, it shows the lines shape without blur filters nor gradients fill. The circle on top of each leave represents it movement limits.

download sourcecode

date: 05 Aug 2010 - 03:59:44, published by ghozt
hi Is there any way i can get this in a .fla for AS2 ? Thanks, btw it is awesome. Well done!
date: 01 Aug 2010 - 10:23:06, published by Kaien
Nice Job!
date: 28 Jun 2010 - 13:00:56, published by Samar
Awesome animation. Great concept i appreciate it. Thanks.
date: 30 May 2010 - 03:46:14, published by wanluqman
Nice & beautiful code, thanks for sharing. Bookmarked
date: 15 May 2010 - 19:39:07, published by Edward
date: 07 May 2010 - 19:06:16, published by Max
Yo man ! Respect for the work and ideas, it's very stimulating ! As Juan I'm not that old with AS3 but I appreciate seing this. thanks
date: 01 May 2010 - 17:29:24, published by Juan
I really like your tutorials, and I appreciate the hard work man. I am a programmer and I just recently start working with actionscript 3.0. THANKS
date: 24 Apr 2010 - 21:41:30
wow !! might use as my header too
date: 07 Mar 2010 - 22:17:43, published by apachebiggfoot
clever way of achieving a realistic illusion...i hope to read more from you soon!!!
date: 26 Feb 2010 - 19:31:44, published by pratish
hayy it is a flash file? where is the swf file? its effect was tooo good
date: 06 Feb 2010 - 12:06:26, published by pinkninja
Wooow!! dude, it looks quite cool, very smooth, I love your page header by the way :)