Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Unmilon

Add tension to the line

Recommended Posts

Hey @Unmilon

 

Sounds a little complicated. I think I would start out by having the object follow a curved path. Basically the path of the tension, but not visible. Then on every update, I would redraw the rope to the center of the object with a quadratic bezier curve.

 

You can see how to calculate the 3 bezier points in this demo.

 

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

 

 

 

 

  • Like 2
Link to post
Share on other sites

An alternative to a quadratic bezier would be a catmull rom spline. It might look better as it allows more points. The function in this demo returns a series of cubic beziers.

 

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

 

 

  • Like 2
Link to post
Share on other sites

I was able to do till this point. 

See the Pen yLgzJxQ by UNMILON (@UNMILON) on CodePen

 

I have also tried adding points in the svg. But couldn't do. What should be my next steps?

Link to post
Share on other sites

Are you going to use PixiJS or SVG?

Link to post
Share on other sites

I was thinking of using the initial route as an SVG and while updating the animation I want to use PIXI.

Link to post
Share on other sites

How about this. You can replace the x,y animation with a motion path if you want, and it should still work the same.

 

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

 

 

  • Like 3
Link to post
Share on other sites

Fancy.

giphy.gif

  • Haha 4
Link to post
Share on other sites
33 minutes ago, PointC said:

Fancy.

 

I had to make it good. It's my Pixi comeback special. I haven't touched it in like over 6 months.

 

 

  • Like 1
  • Haha 4
Link to post
Share on other sites

Wow...

Thanks for the suggestions.🙂

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×