-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-temp-1.html
409 lines (395 loc) · 22 KB
/
index-temp-1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self-Driving Car Project</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="homepage/style.css" rel="stylesheet">
<link href="homepage/parts.css" rel="stylesheet">
</head>
<body class="dark-mode y mandatory-scroll-snapping">
<nav class="navbar navbar-expand-lg navbar-light glass">
<div class="navbar-brand text-gradient">
<a href="index-temp-1.html">Self-Driving Car Project </a>
<small>By <a href="https://www.linkedin.com/in/pery-mimon-11302a32/">Pery Mimon</a> learn from <a
href="https://radufromfinland.com/">Radu</a></small>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#2d-car-simulation">2D Simulation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3d-car-simulation">3D Simulation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#modules-and-architecture">Modules</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#research-playgrounds">Research Playgrounds</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-information">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-5 glass roundness" id="Self-Driving Car Project">
<h1>Self-Driving Car Project</h1>
<p>
The main objective of this project is to develop a fundamental self-driving car simulation from scratch. We utilize HTML, CSS, and JavaScript to create an environment in which a virtual car navigates autonomously, using simulated sensors and simple decision-making logic. This project aims to introduce learners to key concepts such as sensor fusion, pathfinding, and basic machine learning techniques for autonomous vehicles.
</p>
<ul class="feature-grid">
<li class="card">
<img src="homepage/images/2d-car-simulator.webp" alt="2D Simulation" class="feature-image">
<h4><a>2D Car Simulation</a></h4>
<p>Train and test a car in a 2D environment, including a World Editor, single car training, and testing in a
big city environment.</p>
<ul class="list">
<li>
<a href="integrated/training-page/training.html" target="_blank">Basic training a car</a>
</li>
<li>
Use <a href="integrated/world-editor-page/world-editor.html" target="_blank">World Editor</a> to build a road
and let cars learn how to navigate <a href="bigCity.html">there</a>
</li>
<br>
<a href="#2d-car-simulation" target="_blank">more...</a>
</ul>
</li>
<li class="card">
<img src="homepage/images/3d-car-simulator.webp" alt="3D Simulation" class="feature-image">
<h4><a href="#3d-car-simulation">3D Car Simulation</a></h4>
<p>Explore more complex simulations with 3D environments, including keyboard controls, camera-based
controls, and phone sensor integration.</p>
<ul class="list">
<li>
<a href="./race3d.html" target="_blank">Race 3D - keyboard</a>
</li>
<li>
<a href="race3dCamera.html" target="_blank">Race 3D - camera control</a>
</li>
<li>
<a href="race3dPhone.html" target="_blank">Race 3D - phone control (developing)</a>
</li>
<br>
<a href="#3d-car-simulation">more...</a>
</ul>
</li>
<li class="card">
<img src="homepage/images/research.webp" alt="Research Playgrounds" class="feature-image">
<h4><a href="#research-playgrounds">Research Playgrounds</a></h4>
<p>Experiment with various aspects of the project, such as audio, marker detection, phone controls, and
segment intersection calculations.</p>
<ul class="list">
<li>
<a href="./researching/segment-intersection-playground.html" target="_blank">segment
intersection</a>
</li>
<li>
<a href="./researching/audio-playground.html" target="_blank">web audio</a>
</li>
<li>
<a href="./researching/marker-detector.html" target="_blank">blue marker detector</a>
</li>
<br>
<a href="#research-playgrounds">more...</a>
</ul>
</li>
<li class="card">
<img src="homepage/images/modules-and-architecture=2.webp" alt="Modular Architecture" class="feature-image">
<h4><a href="#modules-and-architecture">Modular Architecture</a></h4>
<p>The project is organized into different modules, each responsible for specific functionalities,
making the system flexible and extensible.</p>
</li>
</ul>
</div>
<!--<div class="container mt-5 glass roundness" id="2d-car-simulation">-->
<!-- <h1><a target="_blank">2D Car Simulation</a></h1>-->
<!-- <p>-->
<!-- The 2D Car Simulation is the first phase of the Self-Driving Car Project, focusing on training and testing a car-->
<!-- in a 2D environment. This phase includes three key components:-->
<!-- </p>-->
<!-- <h2><a href="./training.html">Training One Car</a></h2>-->
<!-- <p>-->
<!-- In this module, a single car is trained to navigate through a linear road. The focus is on basic navigation-->
<!-- skills, such as lane keeping and obstacle avoidance. The car is trained using a simple model, and the results-->
<!-- can be visualized in the environment created with the World Editor.-->
<!-- </p>-->
<!-- <h2><a href="./world-editor.html">World Editor</a></h2>-->
<!-- <p>-->
<!-- The World Editor allows you to design and customize driving environments. Users can create roads, intersections,-->
<!-- and other elements to simulate various driving conditions. The editor also supports importing data from-->
<!-- OpenStreetMap to generate realistic environments.-->
<!-- </p>-->
<!-- <h2><a href="bigCity.html">Big City</a></h2>-->
<!-- <p>-->
<!-- The Big City module takes the trained car and tests it in a more complex, custom-built city environment. This-->
<!-- module is designed to simulate urban driving conditions, including handling traffic lights, intersections, and-->
<!-- other common obstacles found in a city.-->
<!-- </p>-->
<!--</div>-->
<!--<div class="container mt-5 glass roundness" id="3d-car-simulation">-->
<!-- <h1>3D Car Simulation</h1>-->
<!-- <p>-->
<!-- The 3D Car Simulation is the second phase of the Self-Driving Car Project, focusing on a more complex and-->
<!-- immersive simulation in a 3D environment. This phase includes three key components:-->
<!-- </p>-->
<!-- <h2>Race 3D</h2>-->
<!-- <p>-->
<!-- The Race 3D module allows you to control the car in a 3D environment using keyboard inputs. This simulation-->
<!-- offers a more realistic driving experience, with challenges such as navigating turns, accelerating, and braking.-->
<!-- </p>-->
<!-- <h2>Race 3D Using Computer Camera</h2>-->
<!-- <p>-->
<!-- This module leverages simple mathematical algorithms to detect blue objects using a computer camera. The-->
<!-- detected objects are used to control the car in the 3D simulation, providing a unique way to interact with the-->
<!-- environment without traditional input devices.-->
<!-- </p>-->
<!-- <h2>Race 3D Using Sensors on Phone</h2>-->
<!-- <p>-->
<!-- Although still under development, this feature aims to use the sensors on a mobile phone (such as accelerometers-->
<!-- and gyroscopes) to control the car in the 3D environment. This method offers a novel way to interact with the-->
<!-- simulation using your mobile device.-->
<!-- </p>-->
<!--</div>-->
<div class="container mt-5 glass roundness" id="modules-and-architecture">
<h1>Modules and Architecture</h1>
<p>
The Self-Driving Car Project is organized into several modules, each responsible for different aspects of the
simulation. This modular architecture makes the project flexible and extensible, allowing for easier maintenance
and development.
</p>
<div class="card">
<h3><span class="text-gradient">Controls</span></h3>
<ul class="list">
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/controls/dummyControls.js"
target="_blank"><strong>dummyControls.js</strong></a> - Placeholder for basic, dummy controls used
for
testing.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/controls/keyboardControls.js"
target="_blank"><strong>keyboardControls.js</strong></a> - Handles car control via keyboard input.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/controls/phoneControls.js"
target="_blank"><strong>phoneControls.js</strong></a> - Manages controls using a phone's sensors.
</li>
</ul>
</div>
<div class="card">
<h3><span class="text-gradient">Editors</span></h3>
<ul class="list">
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/editors/crossEditor.js"
target="_blank"><strong>crossEditor.js</strong></a>
- Editor for managing cross sections in the world.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/editors/graphEditor.js"
target="_blank"><strong>graphEditor.js</strong></a>
- Graph editor for defining paths and connections.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/editors/lightEditor.js"
target="_blank"><strong>lightEditor.js</strong></a>
- Editor for managing traffic lights within the environment.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/editors/parkingEditor.js"
target="_blank"><strong>parkingEditor.js</strong></a> - Editor for setting up parking spots.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/editors/startEditor.js"
target="_blank"><strong>startEditor.js</strong></a>
- Defines starting points for the car in the simulation.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/editors/stopEditor.js"
target="_blank"><strong>stopEditor.js</strong></a> - Defines stopping points or end conditions for
the
simulation.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/editors/targetEditor.js"
target="_blank"><strong>targetEditor.js</strong></a> - Manages target locations or goals within the
world.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/editors/yieldEditor.js"
target="_blank"><strong>yieldEditor.js</strong></a>
- Editor for setting up yield signs and their behaviors.
</li>
</ul>
</div>
<div class="card">
<h3><span class="text-gradient">Items</span></h3>
<ul class="list">
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/items/building.js"
target="_blank"><strong>building.js</strong></a> - Represents buildings in the simulation
environment.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/items/car.js"
target="_blank"><strong>car.js</strong></a>
- Core module defining the car's behavior and properties.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/items/network.js"
target="_blank"><strong>neuralNetwork.js</strong></a> - Handles the network connections between various
nodes
in the environment.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/items/sensor.js"
target="_blank"><strong>sensor.js</strong></a> - Defines and manages the sensors attached to the car.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/items/tree.js"
target="_blank"><strong>tree.js</strong></a>
- Represents trees in the simulation environment.
</li>
</ul>
</div>
<div class="card">
<h3><span class="text-gradient">Markings</span></h3>
<ul class="list">
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/markings/cross.js"
target="_blank"><strong>cross.js</strong></a> - Manages crosswalks and similar markings on roads.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/markings/light.js"
target="_blank"><strong>light.js</strong></a> - Handles the visual and functional aspects of traffic
lights.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/markings/parking.js"
target="_blank"><strong>parking.js</strong></a> - Manages parking spot markings.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/markings/start.js"
target="_blank"><strong>start.js</strong></a> - Defines starting line or position markings.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/markings/stop.js"
target="_blank"><strong>stop.js</strong></a> - Defines stop line or position markings.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/markings/target.js"
target="_blank"><strong>target.js</strong></a> - Manages target or goal markings.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/markings/yield.js"
target="_blank"><strong>yield.js</strong></a> - Handles yield sign markings.
</li>
</ul>
</div>
<div class="card">
<h3><span class="text-gradient">Math</span></h3>
<ul class="list">
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/math/graph.js"
target="_blank"><strong>graph.js</strong></a>
- Core graph algorithms and utilities for pathfinding.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/math/markerDetector.js"
target="_blank"><strong>markerDetector.js</strong></a>
- Simple math-based marker detection module.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/math/osm.js"
target="_blank"><strong>osm.js</strong></a>
- Handles OpenStreetMap data integration.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/math/region.js"
target="_blank"><strong>region.js</strong></a>
- Manages regions within the world, likely for pathfinding or area-based logic.
</li>
</ul>
</div>
<div class="card">
<h3><span class="text-gradient">Primitives</span></h3>
<ul class="list">
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/primitives/envelope.js"
target="_blank"><strong>envelope.js</strong></a>
- Mathematical primitive for envelope shapes.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/primitives/point.js"
target="_blank"><strong>point.js</strong></a> - Basic point primitive, likely used in geometry
calculations.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/primitives/polygon.js"
target="_blank"><strong>polygon.js</strong></a> - Handles polygon shapes and their properties.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/primitives/segment.js"
target="_blank"><strong>segment.js</strong></a> - Defines segments, crucial for line intersection
calculations.
</li>
</ul>
</div>
<div class="card">
<h3><span class="text-gradient">Utils</span></h3>
<ul class="list">
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/utils/3d-utils.js"
target="_blank"><strong>3d-utils.js</strong></a> - Utilities for managing 3D aspects of the
simulation.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/utils/algebra-math-utils.js"
target="_blank"><strong>algebra-math-utils.js</strong></a> - General algebra and math utilities.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/utils/canvas-utils.js"
target="_blank"><strong>canvas-utils.js</strong></a> - Utilities for canvas drawing and manipulation.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/utils/codeflow-utils.js"
target="_blank"><strong>codeflow-utils.js</strong></a> - Handles code flow logic, likely for
asynchronous
tasks.
</li>
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/utils/math-utils.js"
target="_blank"><strong>math-utils.js</strong></a> - General math utilities, used across different
modules.
</li>
</ul>
</div>
<div class="card">
<h3><span class="text-gradient">BrainVisualizer</span></h3>
<ul class="list">
<li><a href="https://github.com/perymimon/self-driving-car/blob/main/js/visualizer/miniMap.js"
target="_blank"><strong>miniMap.js</strong></a> - Handles the creation and display of a minimap.
</li>
</ul>
</div>
</div>
<!--<div class="container mt-5 glass roundness" id="research-playgrounds">-->
<!-- <h1>Research Playgrounds</h1>-->
<!-- <p>-->
<!-- Throughout the development of the Self-Driving Car Project, several research playgrounds were created to explore-->
<!-- and test different aspects of the simulation. These playgrounds helped in refining the modules and understanding-->
<!-- the complexities involved in the project.-->
<!-- </p>-->
<!-- <h2>Audio Playground</h2>-->
<!-- <p>-->
<!-- The <strong>audio-playground.html</strong> was used to experiment with various audio features. This includes-->
<!-- testing how sound can be integrated into the simulation, manipulating audio signals, and exploring sound-->
<!-- recognition techniques.-->
<!-- </p>-->
<!-- <h2>Marker Detector</h2>-->
<!-- <p>-->
<!-- The <strong>marker-detector.html</strong> playground focused on developing simple mathematical algorithms to-->
<!-- detect markers, specifically using color-based detection. This was crucial in implementing features like Race 3D-->
<!-- Using Computer Camera, where blue objects are detected to control the car.-->
<!-- </p>-->
<!-- <h2>Phone Controller</h2>-->
<!-- <p>-->
<!-- The <strong>phone-controler.html</strong> was used to explore controlling the simulation using a mobile phone's-->
<!-- sensors, such as accelerometers and gyroscopes. This research was fundamental in developing the Race 3D Using-->
<!-- Sensors on Phone feature.-->
<!-- </p>-->
<!-- <h2>Segment Intersection Playground</h2>-->
<!-- <p>-->
<!-- The <strong>segment-intersection-playground.html</strong> was dedicated to visualizing and understanding segment-->
<!-- intersection calculations. This is particularly important for pathfinding algorithms and determining how-->
<!-- different paths interact in the simulation environment.-->
<!-- </p>-->
<!--</div>-->
<div class="container mt-5 glass roundness" id="contact-information">
<h1>Contact Information</h1>
<p>
If you have any questions about the Self-Driving Car Project or would like to discuss the math concepts
demonstrated here, feel free to reach out.
</p>
<p>
You can contact me via email: <strong><a href="mailto:[email protected]">[email protected]</a></strong>
</p>
<p>
Or connect with me on LinkedIn: <strong><a href="https://www.linkedin.com/in/pery-mimon-11302a32/"
target="_blank">LinkedIn Profile</a></strong>
</p>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>-->
</body>
</html>