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.
67 lines
2.1 KiB
67 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src='/core/js/ui.js'></script>
|
|
</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>Have particle movement that feels calm and natural</li>
|
|
<li>Support large swarms of particles</li>
|
|
<li>Be able to evade obstacles</li>
|
|
</ul>
|
|
</blockquote>
|
|
|
|
<hr>
|
|
|
|
<p>
|
|
<h4>Exploration 1: Organic movement at 32fps</h4>
|
|
</p>
|
|
|
|
<p>
|
|
The trickiest portion of this iteration was animating the curved paths. Elliptical geometry was the initial goal,
|
|
but calculating arc length (to maintain a scalar speed) is quite difficult. Smoothstep cubic curves
|
|
were also an option, but maintaining consistent entry and exit angles could affect performance for large
|
|
groups. The current design uses circular paths that allow smooth changes in both direction and rotation.
|
|
</p>
|
|
|
|
<div class='outerContainer'>
|
|
<div id="animation1a" class='animationContainer'></div>
|
|
<div id="controls1a" class='controlsContainer'></div>
|
|
</div>
|
|
|
|
<p>
|
|
This method can handle quite a few particles.
|
|
</p>
|
|
|
|
<div class='outerContainer'>
|
|
<div id="animation1b" class='animationContainer'></div>
|
|
<div id="controls1b" class='controlsContainer'></div>
|
|
</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'>
|
|
<div id="animation2a" class='animationContainer'></div>
|
|
<div id="controls2a" class='controlsContainer'></div>
|
|
</div>
|
|
|
|
<script src='js/bundle.js'></script>
|
|
</body>
|
|
</html>
|
|
|