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).
Wow, great work!
Beautiful stuff. The hair is a nice touch. I think it would look better without the rising dots though.
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. 🙂
I think the dots are (supposed to be?) birds. Very nice, Grant.
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.
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.
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.
woow ! really nice
Absolutely amazing. For the record, I never saw “dots”, I saw birds.
Amazing and inspiring! This is the best rendered work I’ve seen in flash.
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?
Thanks for the feedback everyone.
Eric – Excluding my Rnd class, it is a little under 200 lines of code.
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
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
The dots would be cherry blossoms. It’s always cherry blossoms in the most dramatic samurai scenes.
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
MrWil,
Works for me. I have a soft spot for cherry blossoms.
http://incomplet.gskinner.com/index2.html#sakura2
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 : ).
This is awesome.
Grant, 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.
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.
Awesome. I am totally going to try this in 3d with conical versions of the grass objects.
ow man awesome effect 🙂
Looks nice!
I’m trying to do something similar, only in 2d (field from top). Could you please share the code or just elaborate a bit more on the approach? I checked out your slides on “My Favorite Things” but am still not getting it.
Any further hints will be highly appreciated, thanks!
This is amazing.