-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (77 loc) · 2.52 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Steering AI</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<!-- <style type="text/css">
#steer {
width: 100px;
}
</style> -->
</head>
<body>
<div class="box">
<img src="logo.png" alt="logo" id="logo" />
<div class="title-container">
<h1>Steering AI</h1>
<p>
The car will steer itself to pass through all the
checkpoints calculating its path in real time,
<strong>to add more checkpoints</strong>, simply
<strong>click anywhere on the canvas.</strong>
<br />
The car might move through the checkpoints in any order
</p>
</div>
<!-- <div class="pull-left text-center" style="margin-top: 50px">
<input type="checkbox" id="within-walls" />
<span style="font-size: 1.4em"
>Force the car to stay within the boundaries</span
>
<br />
<span class="col-xs-4 col-xs-offset-4"
>Note that this will result in a weird behavior especially when
the car tries to pass through checkpoints near the edge as it
will try to wander around them until it finds the appropriate
angle to pass through them so that it does not leave the
boundary</span
>
</div>
<div
id="cnv"
class="pull-left col-xs-4 col-xs-offset-4"
style="margin-top: 30px"
></div> -->
<div class="canvas-container">
<div id="cnv"></div>
<h4 id="checkpoint-count">Checkpoints Passed:</h4>
</div>
</div>
<!-- <div>
Steering Capability
<input id="steer" style="width: 150px" type="range" min="0.01" max="0.5" step="0.01" value="0.1">
</div>
<div>
Max speed
<input id="speed" style="width: 150px" type="range" min="1" max="10" step="0.5" value="3">
</div> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.min.js"></script>
<script src="vehicle.js"></script>
<script src="food.js"></script>
<script src="sketch.js"></script>
<script src="main.js"></script>
</body>
</html>