-
Notifications
You must be signed in to change notification settings - Fork 35
/
Copy pathindex.html
146 lines (139 loc) · 5.64 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<html>
<head>
<title>Shoal - Autonomous agents + genetic algorithms in Javascript</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<script src="vendor/jquery.js"></script>
<script src="src/vector.js"></script>
<script src="src/food.js"></script>
<script src="src/fish.js"></script>
<script src="src/sea.js"></script>
<style>
body {
width: 100%;
height: 100%;
margin: 0px;
font-family: 'Open Sans', sans-serif;
}
#info{
font-family: arial;
font-size: 13px;
color: gray;
position: fixed;
top: 10px;
left: 10px;
display: inline-block;
}
#about{
position: fixed;
width: 1024;
left: 50%;
margin-left: -512px;
top: 50%;
margin-top: -200px;
opacity: 0;
transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
}
#header{
margin-bottom: 40px;
text-align: center;
cursor: default;
}
#autonomous-agents{
left: 0px;
}
#genetic-algorithms{
right: 0px;
}
.about-block{
position: absolute;
width: 500px;
}
.about-block span{
font-weight: bold;
cursor: default;
}
.about-block div{
font-size: 14px;
color: rgb(48, 48, 48);
text-align: justify;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor: default;
}
#cover{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: white;
opacity: 0;
transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
cursor: default;
}
.about #about{
opacity: 1;
}
.about #cover{
opacity: .9;
}
#about-button{
position: fixed;
font-weight: bold;
top: 10px;
left: 50%;
margin-left: -59px;
color: gray;
cursor: pointer;
}
#about-button:hover{
color: black;
}
#footer{
position: fixed;
bottom: 10px;
left: 50%;
margin-left: -150px;
font-size: 13px;
color: gray;
cursor: pointer;
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<div id="cover"></div>
<a href="https://github.com/cazala/shoal"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<span id="info"></span>
<span id="about-button">WHAT IS THIS?</span>
<div id="about">
<div id="header">This is a proof of concept to show an implementation of <i>autonomous agents</i> combined with <i>genetic algorithms</i>.</div>
<div id="autonomous-agents" class="about-block">
<span>Autonomous Agents</span>
<div>
<p><b>Limited ability to perceive the environment:</b> Every fish can only see things (other fish and food) within a restricted range.</p>
<p><b>Process information from environment and compute an action:</b> In this case the actions are computed as forces (vectors). If the environment tells the fish that there's a huge scary fish ahead, the action will be a force in the oposite direction, or if the fish sees food, a force will pull it towards it. There are social behaviors like shoaling/schooling that come from basic separation, alignment and cohesion forces. There are also evolutionary strategies, like the affinity for other fish of a similar color, promoting the generation of different races. All these forces are added-up at every time-step and result making the fish decide in which direction to swim.</p>
<p><b>No leader:</b> The fish are not commanded by a leader to display complex behaviors like shoaling/schooling , this intelligent and structured dynamics emerge from local interactions from the agents themselves.</p>
</div>
</div>
<div id="genetic-algorithms" class="about-block">
<span>Genetic Algorithms</span>
<div>
<p><b>Population:</b> The population of fish is randomly generated with random values for their DNA. The genotype of a fish consists basically on 2 variables (mass and hue), which then produce the phenotype of the fish (color, size, max speed, range of view, maturity threshold, bite size, etc).
<p><b>Selection:</b> Fish are born with a certain amount of energy that they will spend to move (swim), when they run out of it they die. They can eat food to gain energy, and also they can eat other fish that are smaller than them (less than half of their mass). The more energy they can collect, the longer they will live.</p>
<p><b>Reproduction:</b> Agents can spawn offsprings, they have to reach a certain age (it varies depending on the mass of the fish), once they do, they are able to mate, therefore perpetuating their genes. When they mate, the fertility threshold is increased again, and if the fish collects enough food to live longer it can mate several times, but the older the fish gets the more energy consumes to swim, so in the end every fish dies.</p>
<p><b>Crossover and Mutation:</b> The offsprings are a crossover of the genes of their parents (if one parent is big and the other one is small, the child will be medium sized, if one is red and the other one is blue, the child will be purple), but a really small fraction of the offsprings get mutated genes, introducing new features to the population.</p>
</div>
</div>
</div>
<span id="footer">click anywhere to <b>enter</b> behaviour inspector</span>
<canvas id="canvas"></canvas>
</body>
</html>