Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jdnichollsc

Create random curve path in canvas (road)

Recommended Posts

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  :mrgreen:

 

Regards, Nicholls

post-33749-0-42597600-1423191000_thumb.png

Link to comment
Share on other sites

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

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

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.
×