Add tension to the line

[Unmilon 0 Likes (Newbie)]

I want to add tension in the rope as the sprite travels through. Can you suggest, how can I achieve this?

See the Pen MWJoZgW?editors=1111 by UNMILON (@UNMILON) on CodePen

[OSUblake 14,327 Likes (Superhero)]

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

 

 

 

 

[OSUblake 14,327 Likes (Superhero)]

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

 

 

[Unmilon 0 Likes (Newbie)]

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?

[OSUblake 14,327 Likes (Superhero)]

Are you going to use PixiJS or SVG?

[Unmilon 0 Likes (Newbie)]

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

[OSUblake 14,327 Likes (Superhero)]

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

 

 

[PointC 12,007 Likes (Superhero)]

Fancy.

[OSUblake 14,327 Likes (Superhero)]

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.

 

 

[Unmilon 0 Likes (Newbie)]

Wow...

Thanks for the suggestions.🙂