Wind / Rustling Grass animation

[[email protected]]

Hey animators! I was trying to figure out how to show wind or how to animate wind. This is the best I could come up with. Can you let me know if you have any ideas or criticisms for improvement! Thank you.

 

https://stackblitz.com/edit/stackblitz-starters-chxr4y43?file=app%2FRustlingGrass.tsx

[mvaneijgen]

Hey, looks good already! 

 

I was thinking of dusting of some Studio Ghibli movies and seeing how they animate wind streaks, currently all your streaks do the same animation, I would build in some more randomness, have them animate longer out or in, do a loop or nothing and maybe have them animate in phases. Currently they are totally random and it 'feels' a bit much. 

 

I'd done a similar thing where I'd drawn water currents (see demo below, currently the overlay map is broken) and I'd just drawn all the paths by hand and because everything is a different length and has some more variation I found that looked the best in my case. 

 

See the Pen eYwJMWM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

This is what is looks like without the animation

 

See the Pen jEWZpPG?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

 

Hope it helps and happy tweening! 

[[email protected]]

This is why post and share on this forum. I wouldn't have even thought to draw out the lines of the wind and then draw over them.

I really like your suggestions about how to improve the wind and the Studio Ghibli movies. I love their movies. Okay I will come back to this later when I have time to code.
Also btw-- your water currents looks good!

[Rodrigo]

Hi,

 

Along with @mvaneijgen's great advice, you could check this demo by @OSUblake and perhaps borrow some logic from it:

See the Pen JYpOOK by osublake (@osublake) on CodePen.

 

Happy Tweening!