-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (120 loc) · 4.74 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/checkbox.css">
<link rel="stylesheet" href="css/input_range.css">
<title>Car AI</title>
</head>
<body>
<div id="canvas-container">
<div class="overlay">
<div>
<h1 id="generation-count">Generation: </h1>
<div class="p-1 bottom">
<ul>
<li>Press 'w' -> move mouse -> 'w' again to make a wall</li>
<li>Press 'd' on the wall to delete it</li>
</ul>
</div>
</div>
<div>
<div class="icon-n-settings-container">
<i class="fas fa-cog fa-2x icon" id="settings-icon"></i>
<div class="settings-container">
<div id="settings-container" class="visible">
<h2>Controls</h2>
<div class="checkbox-container">
<label class="checkbox-inner-container">Lock Camera
<input type="checkbox" id="lock-camera-box">
<span class="checkmark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-inner-container">Run n dont stop!
<input type="checkbox" id="run-dont-stop-box">
<span class="checkmark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-inner-container">Show sensors!
<input type="checkbox" id="show-sensors-box">
<span class="checkmark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-inner-container">Draw best Neural Network!
<input type="checkbox" id="show-neuralnetwork-box">
<span class="checkmark"></span>
</label>
</div>
<div class="flex mt-1">
<button class="btn" id="clear-racetrack-btn">Clear Racetrack</button>
<button class="btn" id="restart-btn">Restart</button>
</div>
<div class="flex mt-1">
<button class="btn green-bg" id="play-btn">Play</button>
<button class="btn red-bg" id="stop-btn">Stop</button>
</div>
</div>
<button class="btn hide-btn" id="show-settings-btn"> <i class="fa fa-angle-up fa-lg"></i></button>
</div>
</div>
<div class="icon-n-settings-container">
<i class="fas fa-dna fa-2x icon visible" id="simulation-icon"></i>
<div class="settings-container align-center rectangular-left-borders">
<div id="simulation-settings-container" class="">
<h2>Simulation settings</h2>
<div class="range-container">
<h4 class="range-text">Population</h4>
<input id="slider" type="range" min="0" max="50" value="0"/>
<h4 id="value" class="range-value range-text">0</h4>
</div>
<div class="range-container">
<h4 class="range-text">Sensors</h4>
<input id="slider" type="range" min="0" max="50" value="0"/>
<h4 id="value" class="range-value range-text">0</h4>
</div>
<div class="range-container">
<h4 class="range-text">Mutation Rate</h4>
<input id="slider" type="range" min="0" max="50" value="0"/>
<h4 id="value" class="range-value range-text">0</h4>
</div>
</div>
<button class="btn hide-btn" id="show-simulation-settings-btn"> <i class="fa fa-angle-up fa-lg"></i></button>
</div>
</div>
<div class="icon-n-settings-container">
<i class="fas fa-flag-checkered fa-2x icon visible" id="racetracks-icon"></i>
<div class="settings-container align-center rectangular-left-borders">
<div id="racetracks-container" class="">
<h2>Racetracks</h2>
<form id="save-racetrack-form">
<input type="text" name="racetrack" placeholder="racetrack name" required>
<input class="btn" type="submit" value="Save">
</form>
<ul id="racetracks-list">
</ul>
</div>
<button class="btn hide-btn" id="show-racetracks-btn"> <i class="fa fa-angle-up fa-lg"></i></button>
</div>
</div>
</div>
</div>
</div>
<script src="libraries/p5.js"></script>
<script src="libraries/p5.dom.js"></script>
<script src="libraries/p5.sound.js"></script>
<script src="libraries/nn.js"></script>
<script src="libraries/matrix.js"></script>
<script src="src/sketch.js"></script>
<script src="src/wall.js"></script>
<script src="src/car.js"></script>
<script src="src/ga.js"></script>
<script src="src/utils.js"></script>
</body>
</html>