Share Posted April 5 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 Link to post Share on other sites
Share Posted April 5 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 2 Link to post Share on other sites
Share Posted April 5 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 2 Link to post Share on other sites
Author Share Posted April 7 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
Author Share Posted April 7 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
Share Posted April 7 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 3 Link to post Share on other sites
Share Posted April 7 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. 1 4 Link to post Share on other sites
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now