I showed this experiment at FitC Toronto, then forgot to post it until today.
I've been experimenting on and off with grass simulations in ActionScript 3 (ex1 , ex2) for a little over a year. I recently rewrote the logic to draw the grass and wanted to build out a new experiment to use it. (I'll be posting a bit about the drawing mechanism in the next day or two)
The result was cutByTheWind, which you can see below. I tried to do something that was more cinematic than most of the pieces I've built to date, and had some form of open ended narrative. This isn't really my usual forte, but I'm fairly happy with the results. It is very CPU intensive, so don't be surprised to hear your fans start up.
Special thanks to Keith and his lovely wife for translating the title into Japanese.
Even after more than a decade of working with Flash, I'm still amazed by the visual complexity you can create in such a tiny file (~5kb in this case).
Comments (21)
Wow, great work!
Posted by: JTtheGeek at May 28, 2008 04:39 PMURL:
Beautiful stuff. The hair is a nice touch. I think it would look better without the rising dots though.
Posted by: Danny Miller at May 28, 2008 05:08 PMURL: http://k2xl.com
Thanks. You probably already guessed, but the hair is actually just modified grass attached upside down. The rising dots were a late addition, inspired by anime - I'm not even certain what they are, but they seem to be ubiquitous in scenes like this. :)
Posted by: Grant Skinner at May 28, 2008 05:41 PMURL: http://gskinner.com/blog/
I think the dots are (supposed to be?) birds. Very nice, Grant.
Posted by: Eric at May 28, 2008 07:18 PMURL: http://www.maploop.com/blog/
This is very beautiful in my opinion. I grew in Northern England and it reminds me of there for some reason. Sort of like Wuthering Heights.
Posted by: Mike Brunt at May 28, 2008 08:41 PMURL: http://www.cfwhisperer.com
I think the dots represent flowers. The grasses would probably be flowering, and as the wind blew, it would float up and waft away. Personally, I love the effect, I think it "organics" it up slightly. See the url link.
Posted by: Jeff Small at May 28, 2008 09:05 PMURL: http://www.bionicear-europe.com/UserFiles/Image/Neutral/Girl-blowing-flowers.jpg
pretty real. I notice that at the first zoom, it ran pretty slow on my Core 2 Duo 1.6GHz, but the 2nd zoom sped the animation up as the filter seems to stop working.
Posted by: Tangent at May 28, 2008 11:26 PMURL:
woow ! really nice
Posted by: gally at May 29, 2008 12:55 AMURL:
Absolutely amazing. For the record, I never saw "dots", I saw birds.
Posted by: Jason at May 29, 2008 07:22 AMURL:
Amazing and inspiring! This is the best rendered work I've seen in flash.
Posted by: britg at May 29, 2008 07:39 AMURL: http://britg.com
This is really slick. And I thought using AS3 for my DataGrids/etc. was cool. Hahaha. I'm curious - how many lines of code does something like this take to write?
Posted by: Eric at May 29, 2008 07:46 AMURL:
Thanks for the feedback everyone.
Eric - Excluding my Rnd class, it is a little under 200 lines of code.
Posted by: Grant Skinner at May 29, 2008 08:42 AMURL: http://gskinner.com/blog/
Fantastic Grant,
Are the grass blades all draw with the drawing API?
When I tried something similar (a tentacle monster) the speed was absolutely terrible.
Are there any optimization tricks you're willing to share? :)
Peter
Posted by: Peter Organa at May 29, 2008 10:17 AMURL: http://blog.organa.ca
Hey Grant. I love this effect. Do you have any particular algorithms or sources you could release to show how this all takes place? I'm guessing it's just a randomized perlin noise effect with some blur filters on top, but would be keen to see exactly how you did this.
Andrew
Posted by: Andrew Odri at May 29, 2008 10:34 AMURL: http://www.affirmix.com/
The dots would be cherry blossoms. It's always cherry blossoms in the most dramatic samurai scenes.
Posted by: MrWiL at May 29, 2008 10:37 AMURL:
Peter,
Yes, all the grass is drawn with the drawing API. In terms of optimization - nothing really specific other than reducing the number of curves (only 2 curveTo's and 1 lineTo per blade in this case), and avoiding strokes. I'll be releasing some code samples (probably tomorrow) that would be great for tentacle monsters. :)
Andrew,
A quick overview:
The grass is drawn using the drawing API, based on a bunch of random values, and some perlin noise for trending (which gives the nice "tufts"). It has a blur and a glow filter applied to it to give it more of a cinematic feel.
The "film grain" is simply noise scaled to 500% with smoothing on.
The clouds are two layers of perlin noise faded towards the bottom by applying a dynamically drawn linear gradient. They have different vertical sizes and move at different speeds to create some depth (essentially parallax).
Wind is achieved with two sets of perlin noise, one which defines global wind, and one that provides for breezes that ripple across the grass. This wind is also applied to the "dots", which are just circles drawn with the drawing API.
You can see visual explanations of some of these concepts in my session notes for "My Favourite Things" at gskinner.com/talks
Posted by: Grant Skinner at May 29, 2008 11:24 AMURL: http://gskinner.com/blog/
MrWil,
Works for me. I have a soft spot for cherry blossoms.
Posted by: Grant Skinner at May 29, 2008 11:29 AMhttp://incomplet.gskinner.com/index2.html#sakura2
URL: http://gskinner.com/blog/
awesome, really nice!. Yeah flash is still amazing even after all these years. Then again, in the right hands even a chainsaw can make things of great beauty... don't give too much of the credit to Flash : ).
Posted by: Robin Debreuil at May 30, 2008 12:32 AMURL: http://blog.debreuil.com
This is awesome.
Posted by: Rafael at May 30, 2008 06:44 PMGrant, why is very slow when you zoom in? It will have any impact if you also apply random color (shades of green, for example)????
Thanks.
URL: http://rafaelcalderon.com
any chance of seeing the code for this, or at least part of it? I've been trying to do a similar effect and am getting pretty slow results once my blades of grass go over 200 blades.
Posted by: Justin at July 6, 2008 08:41 AMURL:
Awesome. I am totally going to try this in 3d with conical versions of the grass objects.
Posted by: Anthony Pace at July 8, 2008 08:57 AMURL: