First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Alex Nino | Website: http://www.yoambulante.com/

Mr Grass, the grass movement algorithm

Hi guys, one day in my way back from US to UK, I was in a plane with really hard problems for sleeping and then after trying many things to make the flight shorter I decided to take my wife's notebook (while she sleeps) and write some action script during 2 hours and a half of battery using it with the LCD in the lowest 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 after 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, not 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 CPU graph performance

download source code

Click around on the flash-swf below to understand a bit more how it behaves

» Level Intermediate

Added: 2010-02-17
Rating: 9 Votes: 6
» Author
Flash programmer working with flash for about 10 years.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.