SlideShare a Scribd company logo
1 of 6
Car simulator initial plan.
Sharon Xiao Liu.
2024/03/19.
Contents.
1. General plan.
2. First version of the simulator.
3. Possible JavaScript functions required.
4. Mathematical equations.
General plan.
• The car simulator, will be programmed in JavaScript.
• It will have a windscreen view, side window views, and rear window view.
• It will have mirror views:
oSide mirror views.
oWindscreen mirror view.
• It will have indicator light switches.
• It will have a gearstick, steering wheel, and foot pedals.
• It can be turn-based, like an Interactive Fiction game. Or, it can be played at
different speeds. It could respond to a script, which programs the drive.
• The purpose of this simulator, is to teach people how to drive. (You can make
one, too.)
Features of the first version of the simulator.
• There is going to be, a road with a left turn.
• There is going to be a turn-based simulation.
• There will be a bird's eye view, of the road
with the left turn.
• There will be a clutch pedal, gearstick and
steering wheel.
• The car is going to go along in units, along the
road, and it is going to be steered.
• The simulator will crash, if you get an
instruction wrong.
Possible JavaScript functions (or web
programming functions) required.
• Use Scalable Vector Graphics, with JavaScript, for
the bird's eye view.
o Draw a rectangle, with <rect>.
o Use the rotate() and translate()
transformations, with <rect>.
o Use document.getElementById() , to
access SVG tags.
o Use .setAttribute() method, to change the
SVG tags.
• With a turn-based simulation, there is no need
to smoothly animate, the path of the car.
• Use a HTML form, for the car controls.
o The clutch pedal is a toggle button.
o The gearstick is a form control, which has a
dropdown menu.
o The steering wheel has a 12:1 steering ratio.
(Wikipedia says, this is a common ratio.)
• The car wheel turn, is inputted, and the
steering wheel angle, is calculated.
• Dashboard.
o The speed of the car, is displayed. (This affects
the translations.)
Equations, for the first version of the car
simulator.
• Speed = distance/time.
• Steering wheel angle = 12*car
wheel angle.

More Related Content

Similar to 20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.

Similar to 20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator. (20)

Self-Driving Car to Drive Autonomously using Image Processing and Deep Learning
Self-Driving Car to Drive Autonomously using Image Processing and Deep LearningSelf-Driving Car to Drive Autonomously using Image Processing and Deep Learning
Self-Driving Car to Drive Autonomously using Image Processing and Deep Learning
 
Automatic Plowing System
Automatic Plowing SystemAutomatic Plowing System
Automatic Plowing System
 
3 CG_U1_P2_PPT_3 OpenGL.pptx
3 CG_U1_P2_PPT_3 OpenGL.pptx3 CG_U1_P2_PPT_3 OpenGL.pptx
3 CG_U1_P2_PPT_3 OpenGL.pptx
 
Synergis University 2014 - Inventor Performance Optimization
Synergis University 2014 - Inventor Performance OptimizationSynergis University 2014 - Inventor Performance Optimization
Synergis University 2014 - Inventor Performance Optimization
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular Animations
 
AWS Stockholm Meetup June 2019 - Cybercom DeepRacer story
AWS Stockholm Meetup June 2019 - Cybercom DeepRacer storyAWS Stockholm Meetup June 2019 - Cybercom DeepRacer story
AWS Stockholm Meetup June 2019 - Cybercom DeepRacer story
 
AWS Finland Meetup June 2019 - DeepRacer story
AWS Finland Meetup June 2019 - DeepRacer storyAWS Finland Meetup June 2019 - DeepRacer story
AWS Finland Meetup June 2019 - DeepRacer story
 
Simulation of robotic positions and programming
Simulation of robotic positions and programmingSimulation of robotic positions and programming
Simulation of robotic positions and programming
 
Firefox WebGL developer tools
Firefox WebGL developer toolsFirefox WebGL developer tools
Firefox WebGL developer tools
 
Web development basics (Part-3)
Web development basics (Part-3)Web development basics (Part-3)
Web development basics (Part-3)
 
What is the Hero Class in Flutter Development.pptx
What is the Hero Class in Flutter Development.pptxWhat is the Hero Class in Flutter Development.pptx
What is the Hero Class in Flutter Development.pptx
 
frontend-161011205424 (1).pdf
frontend-161011205424 (1).pdffrontend-161011205424 (1).pdf
frontend-161011205424 (1).pdf
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Autocad portfolio 2016
Autocad portfolio 2016Autocad portfolio 2016
Autocad portfolio 2016
 
Project Report
Project ReportProject Report
Project Report
 
FormulaPi Programming Challenge Autonomous Cars
FormulaPi Programming Challenge Autonomous CarsFormulaPi Programming Challenge Autonomous Cars
FormulaPi Programming Challenge Autonomous Cars
 
“Accident Reconstruction” by Aleksis Liekna from Scope Technologies at Auto f...
“Accident Reconstruction” by Aleksis Liekna from Scope Technologies at Auto f...“Accident Reconstruction” by Aleksis Liekna from Scope Technologies at Auto f...
“Accident Reconstruction” by Aleksis Liekna from Scope Technologies at Auto f...
 
Performance and Optmization - a technical talk at Frontend London
Performance and Optmization - a technical talk at Frontend LondonPerformance and Optmization - a technical talk at Frontend London
Performance and Optmization - a technical talk at Frontend London
 
From website to mobile app - a journey
From website to mobile app - a journeyFrom website to mobile app - a journey
From website to mobile app - a journey
 
Angular js 1.3 basic tutorial
Angular js 1.3 basic tutorialAngular js 1.3 basic tutorial
Angular js 1.3 basic tutorial
 

More from Sharon Liu

SL CV 20240312.docx . Sharon Xiao Liu's Curriculum Vitae.
SL CV 20240312.docx . Sharon Xiao Liu's Curriculum Vitae.SL CV 20240312.docx . Sharon Xiao Liu's Curriculum Vitae.
SL CV 20240312.docx . Sharon Xiao Liu's Curriculum Vitae.
Sharon Liu
 

More from Sharon Liu (20)

20240507 Prototyping Recycling Aluminium.docx
20240507 Prototyping Recycling Aluminium.docx20240507 Prototyping Recycling Aluminium.docx
20240507 Prototyping Recycling Aluminium.docx
 
20240408 Bending Backwards to the Second Step Up.docx
20240408 Bending Backwards to the Second Step Up.docx20240408 Bending Backwards to the Second Step Up.docx
20240408 Bending Backwards to the Second Step Up.docx
 
20240315 ACMJ Diagrams Set 2.docx . With light, motor, coloured light, and se...
20240315 ACMJ Diagrams Set 2.docx . With light, motor, coloured light, and se...20240315 ACMJ Diagrams Set 2.docx . With light, motor, coloured light, and se...
20240315 ACMJ Diagrams Set 2.docx . With light, motor, coloured light, and se...
 
SL CV 20240312.docx . Sharon Xiao Liu's Curriculum Vitae.
SL CV 20240312.docx . Sharon Xiao Liu's Curriculum Vitae.SL CV 20240312.docx . Sharon Xiao Liu's Curriculum Vitae.
SL CV 20240312.docx . Sharon Xiao Liu's Curriculum Vitae.
 
20240308 Jumping from the Fifth step up.docx
20240308 Jumping from the Fifth step up.docx20240308 Jumping from the Fifth step up.docx
20240308 Jumping from the Fifth step up.docx
 
20240206 Rotated Torus and Full Rotated Sphere 45 degrees down 45 left.docx
20240206 Rotated Torus and Full Rotated Sphere 45 degrees down 45 left.docx20240206 Rotated Torus and Full Rotated Sphere 45 degrees down 45 left.docx
20240206 Rotated Torus and Full Rotated Sphere 45 degrees down 45 left.docx
 
20231218 Plan for Two-Footed Jump on Ice.docx
20231218 Plan for Two-Footed Jump on Ice.docx20231218 Plan for Two-Footed Jump on Ice.docx
20231218 Plan for Two-Footed Jump on Ice.docx
 
20231130 Ice skating Unsupported.docx
20231130 Ice skating Unsupported.docx20231130 Ice skating Unsupported.docx
20231130 Ice skating Unsupported.docx
 
20231102 Plan for Ice Skating.docx
20231102 Plan for Ice Skating.docx20231102 Plan for Ice Skating.docx
20231102 Plan for Ice Skating.docx
 
20231017 xy view of Rotated 45 degrees down and 45 left Sphere.docx
20231017 xy view of Rotated 45 degrees down and 45 left Sphere.docx20231017 xy view of Rotated 45 degrees down and 45 left Sphere.docx
20231017 xy view of Rotated 45 degrees down and 45 left Sphere.docx
 
20231006 Sphere rotated 45 degrees down.docx
20231006 Sphere rotated 45 degrees down.docx20231006 Sphere rotated 45 degrees down.docx
20231006 Sphere rotated 45 degrees down.docx
 
20230904 Recycling Clay.docx
20230904 Recycling Clay.docx20230904 Recycling Clay.docx
20230904 Recycling Clay.docx
 
20230831 a of the equator - Rotated sphere.docx
20230831 a of the equator - Rotated sphere.docx20230831 a of the equator - Rotated sphere.docx
20230831 a of the equator - Rotated sphere.docx
 
20230829 Rotated Ellipse.docx
20230829 Rotated Ellipse.docx20230829 Rotated Ellipse.docx
20230829 Rotated Ellipse.docx
 
20230819 Recall Tests.pptx
20230819 Recall Tests.pptx20230819 Recall Tests.pptx
20230819 Recall Tests.pptx
 
20230810 Radial Plot of an Ellipse.docx
20230810 Radial Plot of an Ellipse.docx20230810 Radial Plot of an Ellipse.docx
20230810 Radial Plot of an Ellipse.docx
 
20230809 South Pole of the Rotated Sphere.docx
20230809 South Pole of the Rotated Sphere.docx20230809 South Pole of the Rotated Sphere.docx
20230809 South Pole of the Rotated Sphere.docx
 
20230804 Rotated Sphere with new North Pole.docx
20230804 Rotated Sphere with new North Pole.docx20230804 Rotated Sphere with new North Pole.docx
20230804 Rotated Sphere with new North Pole.docx
 
20230802 Horizontal Sphere.docx
20230802 Horizontal Sphere.docx20230802 Horizontal Sphere.docx
20230802 Horizontal Sphere.docx
 
20230727 Upright Sphere from North Pole.docx
20230727 Upright Sphere from North Pole.docx20230727 Upright Sphere from North Pole.docx
20230727 Upright Sphere from North Pole.docx
 

Recently uploaded

introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
VishalKumarJha10
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
 

Recently uploaded (20)

8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 202410 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
Exploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdfExploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdf
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
 
%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare%in Harare+277-882-255-28 abortion pills for sale in Harare
%in Harare+277-882-255-28 abortion pills for sale in Harare
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 

20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.

  • 1. Car simulator initial plan. Sharon Xiao Liu. 2024/03/19.
  • 2. Contents. 1. General plan. 2. First version of the simulator. 3. Possible JavaScript functions required. 4. Mathematical equations.
  • 3. General plan. • The car simulator, will be programmed in JavaScript. • It will have a windscreen view, side window views, and rear window view. • It will have mirror views: oSide mirror views. oWindscreen mirror view. • It will have indicator light switches. • It will have a gearstick, steering wheel, and foot pedals. • It can be turn-based, like an Interactive Fiction game. Or, it can be played at different speeds. It could respond to a script, which programs the drive. • The purpose of this simulator, is to teach people how to drive. (You can make one, too.)
  • 4. Features of the first version of the simulator. • There is going to be, a road with a left turn. • There is going to be a turn-based simulation. • There will be a bird's eye view, of the road with the left turn. • There will be a clutch pedal, gearstick and steering wheel. • The car is going to go along in units, along the road, and it is going to be steered. • The simulator will crash, if you get an instruction wrong.
  • 5. Possible JavaScript functions (or web programming functions) required. • Use Scalable Vector Graphics, with JavaScript, for the bird's eye view. o Draw a rectangle, with <rect>. o Use the rotate() and translate() transformations, with <rect>. o Use document.getElementById() , to access SVG tags. o Use .setAttribute() method, to change the SVG tags. • With a turn-based simulation, there is no need to smoothly animate, the path of the car. • Use a HTML form, for the car controls. o The clutch pedal is a toggle button. o The gearstick is a form control, which has a dropdown menu. o The steering wheel has a 12:1 steering ratio. (Wikipedia says, this is a common ratio.) • The car wheel turn, is inputted, and the steering wheel angle, is calculated. • Dashboard. o The speed of the car, is displayed. (This affects the translations.)
  • 6. Equations, for the first version of the car simulator. • Speed = distance/time. • Steering wheel angle = 12*car wheel angle.