Jump to content
Search Community

Create random curve path in canvas (road)

jdnichollsc test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi jdnichollsc,

 

Thanks for posting your question. Unfortunately, the image doesn't give us much to go off of in terms of offering a solution to your problem.

It seems you have a few things to figure out before we can really advise on the animation part.

 

GSAP has a BezierPlugin which allows you to plot animations along a Bezier curve (cubic or quadratic). It does not draw / render the paths, in this case your road.

 

Once you have generated the anchor and control points for the road, and rendered the path to the canvas, then I think we would be better suited to help out. 

 

Just as a little proof-of-concept, this demo here:

http://codepen.io/GreenSock/pen/Kajpu

 

Generates some random Bezier curves and then has little creatures follow the curves. The animation is done by our BezierPlugin.

This demo uses KineticJS for all the canvas stuff (object creation and rendering). Kinetic was a very powerful and easy to use canvas library, but it is no longer supported by its author so I would have to recommend that you do not use it :(

  • Like 2
Link to comment
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.
×
×
  • Create New...