Bug where mouse effect increasing over time

[JonoUWE]

 

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

I've forked Blake Bowen's amazing procedural grass pen to add a mouse movement effect, which I've got working but it's got a bug where the effect the mouse has increases over time, so it starts too subtle, goes through a sweet spot of looking natural but quickly goes past that to being too strong an effect which looks way too jittery to be natural. I've been trying lots of different stuff but no joy. I logged a few values for things like the currentSpeedMultiplier and the targetSpeedMultiplier but they seem to remain stable over time. If anyone else can spot the cause of this I would love to know!

See the Pen yLdBodK by mrjonoces (@mrjonoces) on CodePen

[Rodrigo]

Hi,

 

Blake's demos are not the simplest ones to follow and modify/enhance. There is a lot of code there and honestly I don't have time to dig into it and check where to look for. Maybe you can point us where to look exactly in order to check what could be the problem and how to solve it.

 

Happy Tweening!

[JonoUWE]

Hey Rodrigo. Yes I appreciate it's a lot of code, I should have narrowed it down a little more. I'm pretty sure it's due to time in the 'Grass update function' section. Resetting time stops the issue but has the effect of visually resetting the scene which doesn't work. I also tried reducing other factors as time progresses which had a big improvement, but I got called away from that computer in a rush before I got a chance to push the changes and update the pen. I'll do that on Monday when I'm next at work

[JonoUWE]

Here's the updated pen, which definitely works better now, but does eventually suffer the same issues.  

See the Pen WNqNOLq by mrjonoces (@mrjonoces) on CodePen

[Cassie]

I took a little look, but I'm afraid that, as Rodrigo mentioned, Blake's pens are pretty complex. It would take me at least a few solid hours to just get to grips with what's happening here, and even then I'm not sure I'd be able to help.

 

I'm just dropping this note here to manage expectations. This is quite a bit beyond the help we offer in these free forms, maybe someone will drop by and be interested by the challenge, but apologies in advance if you don't get a solution.

We do offer paid consulting if that's something you'd be interested in.

 

[JonoUWE]

Hey Cassie. Totally get that, it's taken me ages to get my head around the basics of it soI'm not expecting anyone else to invest much time on it, so no apologies necessary.  

[Cassie]

💚 If you take another look and feel like you can narrow it down a little more hit us up.

e.g. I can help with SVG path Syntax, some people here might be able to help with what a specific bit of math is doing, most people here can help with GSAP properties/behaviour

[JonoUWE]

Thanks Cassie. In writing out my breakdown of what I know it struck me that I just need to eliminate time from the equation completely. This means the grass doesn't naturally sway without any mouse interaction but that's not crucial so I can jettison it. Now it's working nicely with no speeding up!

 

See the Pen OJeJQmb by mrjonoces (@mrjonoces) on CodePen

[Rodrigo]

Nice work!

 

From my time looking at Blake's demos over a few years I can guarantee you that there is a method that takes care of the grass wind-like motion, which seems to be the update method. Of course you'll have to go through the math of it to see how he's modifying the bezier paths in order to achieve that. Maybe on mouse interaction prevent that update method and use a modified version of it that takes into account the mouse movement. That would be my first crack at it but I can't guarantee you that it would make it work perfectly though, just an idea as Cassie mentions.

 

Happy Tweening!