forked from fafl/genetic-lander
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (59 loc) · 2.54 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
<html>
<head>
<title>Lander</title>
<style>
body {
font-family: Helvetica;
}
#explanation {
width: 400px;
float: left;
}
#controls {
float: left;
margin: 0 0 0 20px;
padding: 0 10px 20px 10px;
background-color: #eeeeee;
}
#controls div div {
margin: 10px 0 5px 0
}
</style>
</head>
<body>
<div>
<svg id="canvas"></svg>
</div>
<div id="explanation">
<h2>Visualisation of a genetic algorithm</h2>
<p>Here you can see how the path of a moon lander is optimized using a genetic algorithm.</p>
<p>When you press "run 1x", 200 landers are created with random commands and fly through the level. Each line is the path of one lander. When you press the button again, the best landers are selected and used to create new landers.</p>
<p>When you press "run a lot", this happens automatically. You can observe how the landers slowly get better. On the javascript console you can see how the score of the best lander increases from 0 to 100 when they reach the landing zone and to 200 when they do so within safe speeds. Above 200 they get more points for consuming less fuel.<p>
<p>The landers change color based on the score they achieve. In the beginning they are red or yellow, after a safe path was found they appear green.</p>
<p>The code is <a href="https://github.com/fafl/genetic-lander">on github</a>. Inspiration came from this <a href="https://www.codingame.com/training/expert/mars-lander-episode-3">Codingame challenge</a>.</p>
</div>
<div id="controls">
<div>
<div>Controls</div>
<button id="run1">run 1x</button>
<button id="run">run a lot</button>
<button id="pause">pause</button>
</div>
<div>
<div>Select level</div>
<select id="levelselect"></select>
</div>
<!--
<div>
<div>Number of landers</div>
<select id="numberoflanders"></select>
</div>
<div>
<div>Mutation chance</div>
<select id="mutationchance"></select>
</div>
-->
</div>
<script data-main="main" src="libs/require.js"></script>
</body>
</html>