-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (88 loc) · 3.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flocking Simulation</title>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" type="image/x-icon" href="flocking.ico" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
</head>
<body>
<section>
<main>
<script src="boid.js"></script>
<script src="sketch.js"></script>
<h1>Flocking Simulation Using Boids</h1>
<div id="sketch-div"></div>
<div id="labels"></div>
<div id="sliders">
<span id="alignment"></span><span id="cohesion"></span
><span id="separation"></span><span id="perception_radius"></span>
</div>
<div id="checkBoxes"></div>
<div id="buttons"></div>
</main>
</section>
<section id="text">
<h1>What are Boids?</h1>
<p>
Boids is a term short for a bird-like-objects and is used in reference
to simple flocking algorithms. A Boid has 3 main traits that determine
how it moves in reference to other Boids: coherence/cohesion,
separation/avoidance, and alignment.
</p>
<h2>Cohesion:</h2>
<p>
Cohesion/Coherence is the property of how Boids group to a center of
mass (average position of all Boids). A lower cohesion value will result
in Boids moving to the center of mass slower, while a higher cohesion
value speeds up this process. The end result of Cohesion is one large
group of Boids with no outliers.
</p>
<h2>Separation:</h2>
<p>
Separation/Avoidance is the property of how Boids stay away from one
another. While cohesion groups Boids together into one mass separation
creates empty space between each Boid to allow for easy recognition of
individual Boids. A lower separation value will result in less empty
space between Boids, while a higher separation value will result in more
empty space. Separation is not a strict boundary. Boids will not be
blocked from crashing into each other or entering the empty space set by
separation. Instead the Boids’ velocities will change to move away from
each other in the instance that they are too close.
</p>
<h2>Alignment:</h2>
<p>
Alignment is the property that allows Boids to steer near the local
heading of the group. This is similar to cohesion as it groups boids in
a similar direction, however it utilizes the visual range of each boid
to determine the direction its nearest neighbors are moving in. A higher
visual range and alignment value will result in the speeding up of this
process while a lower visual range and alignment value will make it
occur more slowly. The end result of this process is Boid group members
moving in a similar direction.
</p>
<p>
For more about Boids read the original paper detailing Boids and their
behaviors published by Craig Reynolds in 1987<a
href="http://www.cs.toronto.edu/~dt/siggraph97-course/cwr87/"
>HERE</a
>
or watch the original simulation created by Craig Reynolds
<a href="https://www.youtube.com/watch?v=bqtqltqcQhw">HERE.</a>
</p>
</section>
<section>
<footer>
<a href="https://github.com/sammygrey">@sammygrey</a>2020,
<a href="https://sammygrey.github.io/flocking-simulation/"
>github repository,</a
>
made with
<a href="https://p5js.org/"
><img src="p5.png" width="50px" height="auto"
/></a>
</footer>
</section>
</body>
</html>