Unmilon Posted April 5, 2021 Share Posted April 5, 2021 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 comment Share on other sites More sharing options...
OSUblake Posted April 5, 2021 Share Posted April 5, 2021 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 comment Share on other sites More sharing options...
OSUblake Posted April 5, 2021 Share Posted April 5, 2021 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 comment Share on other sites More sharing options...
Unmilon Posted April 7, 2021 Author Share Posted April 7, 2021 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 comment Share on other sites More sharing options...
OSUblake Posted April 7, 2021 Share Posted April 7, 2021 Are you going to use PixiJS or SVG? Link to comment Share on other sites More sharing options...
Unmilon Posted April 7, 2021 Author Share Posted April 7, 2021 I was thinking of using the initial route as an SVG and while updating the animation I want to use PIXI. Link to comment Share on other sites More sharing options...
OSUblake Posted April 7, 2021 Share Posted April 7, 2021 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 comment Share on other sites More sharing options...
PointC Posted April 7, 2021 Share Posted April 7, 2021 Fancy. 4 Link to comment Share on other sites More sharing options...
OSUblake Posted April 7, 2021 Share Posted April 7, 2021 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 comment Share on other sites More sharing options...
Unmilon Posted April 8, 2021 Author Share Posted April 8, 2021 Wow... Thanks for the suggestions.🙂 Link to comment Share on other sites More sharing options...
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