Bird-cloud/index.html at main · Wartets/Bird-cloud · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, interactive-widget=resizes-content">
	<meta name="theme-color" content="#111111">
	<meta name="msapplication-navbutton-color" content="#111111">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="apple-touch-icon" href="https://wartets.github.io/N-Body-Problem/image/browser-icon.png">
	<meta name="robots" content="index, follow">
	<meta name="description" content="Experience the beauty of nature's flocking behavior in the Bird-cloud simulation, based on the Boids model. Adjust parameters like speed and randomness to create dynamic bird flocks, crafted by Wartets (Colin Bossu).">
	<meta name="keywords" content="Boids model, bird flocking, simulation, interactive bird behavior, flocking patterns, randomness, speed, Wartets, Colin Bossu">

	<meta property="og:title" content="Bird-cloud: Flocking Simulation | Wartets">
	<meta property="og:description" content="Control bird flocking behavior with adjustable parameters in this interactive simulation based on the Boids algorithm. A fascinating creation by Wartets (Colin Bossu).">
	<meta property="og:image" content="https://wartets.github.io/Wartets/img/BirdCloud-card.png">
	<meta property="og:type" content="website">
	<meta property="og:url" content="https://wartets.github.io/Bird-cloud/">
	<title>Bird cloud</title>

	<link rel="icon" href="https://wartets.github.io/N-Body-Problem/image/browser-icon.png">

	<link rel="stylesheet" href="style.css">
</head>
<body>
	<canvas id="birdsCanvas"></canvas>

	<div id="controls-toggle">⚙️</div>
	<div id="controls-window">
		<h2>Settings</h2>
		<label>Bird Count: <span id="num-birds-label"></span></label>
		<input type="range" id="num-birds">

		<label>Max Speed: <span id="max-speed-label"></span></label>
		<input type="range" id="max-speed">

		<label>Max Force: <span id="max-force-label"></span></label>
		<input type="range" id="max-force">

		<label>Vision Radius: <span id="vision-radius-label"></span></label>
		<input type="range" id="vision-radius">

		<label>Avoidance Radius: <span id="avoid-radius-label"></span></label>
		<input type="range" id="avoid-radius">

		<label>Fatigue Threshold: <span id="max-fatigue-label"></span></label>
		<input type="range" id="max-fatigue">

		<label>Chaos Factor: <span id="misconduct-label"></span></label>
		<input type="range" id="misconduct">

		<label>Predator Force: <span id="predator-force-label"></span></label>
		<input type="range" id="predator-force">

		<div class="checkbox-container">
			<input type="checkbox" id="color-cohesion-checkbox" />
			<label for="color-cohesion-checkbox">Color Cohesion</label>
		</div>
	</div>

	<div id="readme-toggle">❓</div>
	<div id="readme-window">
		<h3>About Bird-cloud</h3>
		<p>This simulation is based on the <strong>Boids algorithm</strong>, mimicking the flocking behavior of birds.</p>

		<h4>The 3 Rules:</h4>
		<ul>
			<li><strong>Separation:</strong> Birds steer to avoid crowding local flockmates.</li>
			<li><strong>Alignment:</strong> Birds steer towards the average heading of local flockmates.</li>
			<li><strong>Cohesion:</strong> Birds steer to move towards the average position of local flockmates.</li>
		</ul>

		<h4>Interaction:</h4>
		<ul>
			<li><strong>Predator:</strong> The mouse cursor acts as a predator. Birds will actively flee from it.</li>
			<li><strong>Tracking:</strong> Click on a bird to visualize its individual path.</li>
		</ul>

		<h4>Controls:</h4>
		<p>Adjust the sliders in the settings (top right) to change the flock's physics.</p>
	</div>

	<a href="https://github.com/wartets/Bird-cloud/" target="_blank" rel="noopener noreferrer" id="wartets-link">@Wartets</a>

	<script src="js/script.js"></script>
</body>
</html>