Dear Greensock Pros,
We are developing a Formular 1 Race Game. The game is mostly of strategic nature but as a visualisation we also want to show the final races in a very plain and 2Dish style like shown in the codepen.
We would like to pass an array of objects to GSAP-Module with all the data of the 18 participating drivers:
id
name
avg time (this player will need for one round based on his settings)
pitstops (array of lap numbers in which the players plans to do pitstops)
pitstop delay (s)
probability of accident
probability of technical problems
All the GSAP has to do now is to animate those 18 dots along the SVG track according to the avg time every player needs for each round, which should have a little fluctuation, maybe 2%, each round. We dont have to show a realistic movement (slower in curves and faster on straights) but if that can be done easily it would look nicer. The dynamically drawn course color based on speed as shown in the pen is NOT neccessary. A plain black track would do just fine.
If one of the two events (accident or technical problems) happen the car slows down and comes to a halt.
On rounds stated as pitstop rounds, the car should follow a second SVG track which is identical to the first one, but has a pitstop-lane instead (compare: http://internet-agentur-bodensee.com/intern/pm/f1/trackItaly.html). The car will slow down on the pitstop lane and stop there for the players pitstop delay time. Afterwards it will resume the race.
After a predefined number of rounds (48 to 62) the reace is over.
Meanwhile the script should fill another array with the race times of each player. Thats it...
I am looking forward to your proposal and will be glad to answer questions if there are any.
Greez
Daniel