First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
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
(10 being the highest)
» 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!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.