Create random curve path in canvas (road)

[jdnichollsc 2 Likes (Newbie)]

How can I create a randomly road with GSAP? My idea is that a car moves for him in a canvas element (With Phaser Framework)

 

When the car is off the road I want this stalling. Sorry for my bad english 

 

Regards, Nicholls

[Carl 11,326 Likes (Superhero)]

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

[jenfreddy 0 Likes (Newbie)]

I am new to coding , the discussion is a great help. I am currently using the html5 chart available online for my projects.