Scribd
Upload
109 views

F1 Track Simulator

This document outlines the design of an F1 track simulator. It will show the real-time location of cars racing at the Indianapolis Motor Speedway on a web page. SVG paths and JavaScript will be used to render the scaled track layout and animate the movement and rotation of cars based on their reported distances traveled. Key track dimensions are converted to pixel values using an optimum scale factor. Cars are rendered as rotating bounding boxes containing images that follow the SVG path as their position updates.

Uploaded by

Chathura Widanage
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
109 views

F1 Track Simulator

This document outlines the design of an F1 track simulator. It will show the real-time location of cars racing at the Indianapolis Motor Speedway on a web page. SVG paths and JavaScript will be used to render the scaled track layout and animate the movement and rotation of cars based on their reported distances traveled. Key track dimensions are converted to pixel values using an optimum scale factor. Cars are rendered as rotating bounding boxes containing images that follow the SVG path as their position updates.

Uploaded by

Chathura Widanage
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

F1 Track Simulator

Design Document

Requirement in brief
● F1 cars report location in real time during a race at Indianapolis Motor Speedway.
● A web page should be developed to show a simulation of the race, based on the
location reported by the cars.

Technologies Used
● HTML / CSS3 / Javascript(ES6)
● Svg.js​ library

Rendering the track

Following dimensions of Indianapolis Motor Speedway were obtained from ​wikipedia​.

Region Number Distance Width Banking

(miles / km) (feet / meters)

Long straightaways 2 0.625 / 1.006 50 / 15.2 0°


Short straightaways 2 0.125 / 0.201 50 / 15.2 0°

Turns 4 0.250 / 0.402 60 / 18.3 9°12'

Total/Average 2.500 / 4.023 54 / 16.5 3°3'

Lengths were converted to meters and following formula was used to determine the optimum
scale to draw the track on the user’s display.

lP c1,P c2 = Length of long straight way + (radius of arc * 2)

lP c2,P c3 = Length of short straight way + (radius of arc * 2)

scale = min ( widthOf Screen in pixels heightOf Screen in pixels


lP c1,P c2 , lP c2,P c3 )
Once the scale is determined, all dimensions in above table were converted to pixel values by
multiplying by the scale.

Pixel coordinates of P​x points


​ and P​cy​ points of above diagram were determined based on the
scaled pixel lengths of the track.

Track was drawn as a SVG path as follows.

M${x1} ${y1} L${x2} ${y2} Q ${xc2} ${yc2} ${x3} ${y3} L${x4} ${y4}
Q ${xc3} ${yc3} ${x5} ${y5} L${x6} ${y6} Q ${xc4} ${yc4} ${x7} ${y7}
L${x8} ${y8} Q ${xc1} ${yc1} ${x1} ${y1}

Stroke of width 5 x scale was applied to the path along with a texture of a road.

Rendering Cars
Cars are rendered on the track as two components(bounding box and the image of the car,
where bounding box is the parent of image).
√2 * (widthOf Car ) , which allows car to rotate around
2
Length of the bounding box was set at
center without overflowing.

Bounding box always keep it’s center coincided with the center of the track while image inside
(car) rotates around center whenever car should be rotated(just to create a visual effect when
taking turns). This makes, corners smoother and prevents car from leaving the track when
taking turns.

Moving Cars
Movement of car on track
A pixel point array was created for SVG path drawn by taking 1 pixel as the smallest distance
where 0​th​ index of the array corresponds to the start of the track.

[(P0​x,​P0​y​), (P1​x,​P1​y​), (P2​x,​P2​y​), .... , (Pn​x,​Pn​y​)]

A car in the track always belongs to an element of the above array. When the actual distance
travelled by a car(measure from start) is reported, the intended index of the path array can be
determined by simply multiplying actual distance by the scale.

Once intended position in the array is determined, bounding box of the car is moved from
starting element to the intended element of the array(path) using a timer(Changing the center of
the bounding box to the corresponding coordinate of the array element). This creates an
animated moving effect of the car along the track.

Rotation

Distance(in pexels) from the start of the track to the end of each segment(S​n​) (P​n​ - P​n+1​) was
calculated.
s1 = length of long straight way
s2 = s1 + length of a turn
s3 = s2 + length of short straight way
.
.
s8 = s7 + length of a turn

On each animated frame(On each transition of bounding box from one element to another in
pixel points array), following algorithm is used to determine the corresponding rotation of the
car.

current distance of the car f rom center(d) = current index of the array

if(d < s​1​)


car.rotate(360)
else if(d < s​2​)
car.rotate((d - s​1​) / length of an arc * 90deg)
else if(d < s​3​)
car.rotate(90)
else if(d < s​4​)
car.rotate(90 + (d - s​3​)/length of an arc * 90deg)
.
.
else if(car is on a straight runway)
car.rotate(by the corresponding multiple of 90deg)
else if(car is on an arc [d < s​n​])
car.rotate(multiple of 90 from last straight runway + (d - s​n-1​) * 90)

***

Demo https://chathurawidanage.github.io/f1-track-si
mulation/index.html

Source https://github.com/chathurawidanage/f1-track-si
mulation

You might also like