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.
90 lines
2.5 KiB
90 lines
2.5 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>Exhibit 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>
|
|
The last goal was to play around with flocking behaviors: cohesion, separation, and alignment.
|
|
Here's each of the three, with the vision grid visualized:
|
|
</p>
|
|
|
|
<p>
|
|
<h4>Exploration 3: Flocking patterns</h4>
|
|
</p>
|
|
|
|
<div class='outerContainer' id='3a'></div>
|
|
|
|
<p>
|
|
The exploration is now complete: arc-based movement, independent AIs, grid-based vision,
|
|
following patterns of cohesion, separation, alignment, with hazards, on a large scale:
|
|
</p>
|
|
|
|
<div class='outerContainer' id='3b'></div>
|
|
|
|
<script src='js/bundle.js'></script>
|
|
<script src='/core/js/ui.js'></script>
|
|
</body>
|
|
</html>
|
|
|