Jump to content
GRAY GHOST

Morphing Wind Motion

Recommended Posts

I'm attempting to make the blades of grass sway back and forth and was wondering if that's doable. I've tried using MorphSVG, but found the results to be pretty terrible in regards to the motion created even when adjusting shapeIndex values both positive and negative. I don't have a demo ATM just curious on others thoughts based on the image attached. Achieving this life like motion is pretty difficult for me currently so would love to learn a bit more how to achieve this.

post-33809-0-70732300-1445534979_thumb.png

Share this post


Link to post
Share on other sites

It's no easy feat, that's for sure. To be truly life-like, you'd need to isolate each point (literally, every anchor and control point) in the artwork and animate it independently, probably on various offset sine waves. I used a technique like that for the flapping cape on the GreenSock logo at http://greensock.com/morphSVG/ but it's not for the faint-of-heart. I wish I had time to explain every line of code and walk you through it, but like I said it's pretty complex. 

 

Another technique would be to simply take the artwork into Illustrator (or whatever) and move the blades of grass manually and create several "keyframes" of sorts and then use MorphSVGPlugin to morph inbetween them. Only yoyo-ing between two keyframes probably won't look realistic though (which isn't the fault of MorphSVGPlugin - it's just that you're trying to emulate a certain dynamic that's ruled by complex physics). 

 

Again, I wish I had a super-simple solution for you :(

 

If you're curious about the flappy cape, you can look at the waveSVG() function in the codepen: http://codepen.io/GreenSock/pen/WQjRXE?editors=001

  • Like 4

Share this post


Link to post
Share on other sites

You're not going to get life like motion out of those little nubs. I would separate each blade and rotate them with a stagger. You could add a little morphing bend in there. That grass reminds of the seaweed in this demo. Gently push along the top of the seaweed and you can see the rotational behavior I'm talking about.

 

http://www.goodboydigital.com/pixijs/storm/

 

Here's some inspiration for you. Its based on a demo from an old canvas library I used to use. It's not doing a sine wave like the cape, so it's a little easier to do, but there is still some trig involved.

 

SVG Procedural Grass.

 

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

  • Like 4

Share this post


Link to post
Share on other sites

Thanks! Creating that isn't as hard as it looks. Each blade of grass is just two Bezier curves that are offset at the base, and meet at the end. On each frame render, the anchor point for the tip of each blade is rotated, creating the sway effect.

 

Here's a reduced version, broken down into variables for two different blades. There's really only 4 different calculations that take place in the update function. The rest of the code is just setting the coordinates for the curves, which is pretty easy to understand if you know how to manually create the path string of a Cubic Bezier curve ex "M0,0 C300,600..."

 

See the Pen OyEgop?editors=001 by osublake (@osublake) on CodePen

  • Like 5

Share this post


Link to post
Share on other sites

Thanks for that.  Between these examples and the link to the flour sack demo you posted elsewhere on this forum, I can see a bright future for jscript based animation.

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.