You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
3.1 KiB
103 lines
3.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<h1>Dust</h1>
|
|
<h2>AI Swarms with RxJs</h2>
|
|
<hr>
|
|
|
|
<h3>Project Goal</h3>
|
|
|
|
<blockquote>
|
|
Explore the RxJs API by managing moving particle systems. The systems should:
|
|
<ul>
|
|
<li>Use self-aware AI, not a global AI</li>
|
|
<li>Move in organic, natural arcs, with no sudden pivots or swerves</li>
|
|
<li>Support large swarms of particles</li>
|
|
<li>Be able to evade obstacles</li>
|
|
<li>Simulate cohesive flocking behavior</li>
|
|
</ul>
|
|
</blockquote>
|
|
|
|
<hr>
|
|
|
|
<p>
|
|
<h4>Exploration 1: Organic movement at 32fps</h4>
|
|
</p>
|
|
|
|
<p>
|
|
The trickiest portion of this iteration (and perhaps the whole project) was animating the curved paths:
|
|
</p>
|
|
|
|
|
|
<ul>
|
|
<li>Elliptical geometry was the initial goal, but calculating arc length (to maintain a scalar speed) is quite difficult.</li>
|
|
<li>Smoothstep cubic curves were also an option, but maintaining consistent entry and exit angles could affect performance for large
|
|
groups.</li>
|
|
<p>
|
|
The current design uses circular paths that allow smooth changes in both direction and rotation.
|
|
</p>
|
|
|
|
<div class='outerContainer' id='1a'></div>
|
|
|
|
<p>
|
|
This method can handle quite a few particles.
|
|
</p>
|
|
|
|
<div class='outerContainer' id='1b'></div>
|
|
|
|
<p>
|
|
<h4>Exploration 2: Grid-based vision</h4>
|
|
</p>
|
|
|
|
<p>
|
|
The next goal was to explore a grid-based vision system. Each particle owns a vision grid, which is compared
|
|
against the global grid to detect collisions. Here's a small scale system, with the vision grid visualized:
|
|
</p>
|
|
|
|
<div class='outerContainer' id='2a'></div>
|
|
|
|
<p>
|
|
Here's a large scale system.
|
|
</p>
|
|
|
|
<div class='outerContainer' id='2b'></div>
|
|
|
|
<p>
|
|
<h4>Exploration 3: Cohesive Flocking Behavior</h4>
|
|
</p>
|
|
|
|
<p>
|
|
Using the vision grid and the circular geometry, particles determine and follow a leader. At the start of the animation,
|
|
there are no leaders. When particles see each other, one of them is chosen as a leader. The others follow. If other particles
|
|
see a leader, they follow it.
|
|
</p>
|
|
|
|
<p>
|
|
Each particle recalls its previous location, and compares it to their current location to see if they're moving
|
|
towards the leader or not. Each frame iterates the particle closer to its leader. The leader(s) continue
|
|
moving freely.
|
|
</p>
|
|
|
|
<div class='outerContainer' id='3a'></div>
|
|
|
|
<p>
|
|
On a larger scale, the particles are starting to take on a personality.
|
|
</p>
|
|
|
|
<div class='outerContainer' id='3b'></div>
|
|
|
|
<p>
|
|
The exploration is now complete: arc-based movement, independent AIs, grid-based vision,
|
|
hazards, and cohesive flocking behavior, on a large scale:
|
|
</p>
|
|
|
|
<div class='outerContainer' id='3c'></div>
|
|
|
|
<script src='js/bundle.js'></script>
|
|
<script src='/core/js/ui.js'></script>
|
|
</body>
|
|
</html>
|
|
|