Dangling Question

[WILDmonkeyDESIGN]

Hey all, I am trying to figure something out and I know this community is packed with amazing people.

 

I am trying to make a page that has an item hanging from the top of the page on a string. A good example of it would be a fishing line with a fish on the hook. I figured out how to move the string randomly from left to right but I cant figure out how to make the string itself move like it has a weight on it. I have been trying to find a physics engine js to solve this but everything I have found uses canvas and I dont want to use canvas. How would you either fake the physics of the string movement with gsap or what physics engine would you use for something like this?

 

much love

[OSUblake]

A physics engine usually just calculates stuff for you. How stuff gets rendered is entirely up to you. The reason you see canvas being used is because it's very fast and has very little overhead. If you were to use SVG or HTML with a physics engine, there's a good chance that it might not run that well.

 

The simplest solution might be animating the control points on a curve. This thread is a good place to start.

 

 

 

[PointC]

No canvas??

 

I'm surprised @OSUblake didn't write up a 17 paragraph lecture about the awesomeness of canvas and post 29 of his demos as proof. ?

 

If you do want to see cool canvas demos, check out Blake's CodePen profile. His work is amazing and educational.

https://codepen.io/osublake/

 

Happy tweening.

 

PS @WILDmonkeyDESIGN Welcome to the forum and thanks for joining Club GreenSock.

 

 

[OSUblake]

I was showing @PointC that Coding Math has 4 videos on Verlet Integration, which is exactly what you want. 

 

This is the 4th video, which shows a weighted rope animation. It uses canvas, but feel free to substitute in whatever rendering method you like.

 

 

 

The source code for that episode.

https://github.com/bit101/CodingMath/tree/master/episode39

 

 

[WILDmonkeyDESIGN]

thank you for the help. I ended up not using gsap and instead I am using physics.js. Thanks again. If your interested in seeing it 

See the Pen Epegxv by joshofdevelopment (@joshofdevelopment) on CodePen.

 

[Carl]

You may need to update and save the pen. Not seeing anything... bunch of errors about not calling done()

 

[WILDmonkeyDESIGN]

im not getting errors but it is having problems. looks like you have to resize the window a pixel to get it to show.

[PointC]

Yeah - there's something weird going on with that demo. I saw the same errors @Carl was seeing, but looks like they're gone now. Resizing the window does make the banana appear, but depending on the new window size, it also disappears again when you're done resizing. That's in Chrome.

 

In FF I don't see the banana at all even when I resize the window. I only see the rope.

 

In Edge I see the banana and the rope on page load, but resizing the window makes them both disappear. 

 

 

[WILDmonkeyDESIGN]

think i fixed it. the height wasnt being set for some reason.

[Carl]

Looking good! Very nice.

[PointC]

Yep - that fixed it. Pretty neat. Thanks for sharing.