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.
58 lines
2.0 KiB
58 lines
2.0 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> STARTING ANIMATIOn RIGHT AWAY PERF HIT IF ENABLED -->
|
|
</head>
|
|
<body>
|
|
<h1>Dust</h1>
|
|
<h2>AI Swarm Movement 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>
|
|
The trickiest portion of this iteration was animating the curved paths. I explored elliptical geometry,
|
|
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 smoothly change direction and rotation.
|
|
</p>
|
|
|
|
<div class='particles' id="animation1"></div>
|
|
|
|
|
|
<!--
|
|
|
|
|
|
// Another tricky part was the wall avoidance and vision grid.
|
|
|
|
The ultimate goal is to simulate particles that move in swarms and calculate their
|
|
position independently, similar to flocks of birds.
|
|
|
|
They should take into account disturbances, walls, individual initiative, and landing areas.
|
|
|
|
<h2>Animation 2</h2>
|
|
Goal: Scare a seahorse with a click. Move her to a safe distance away.
|
|
Key points:
|
|
- interval() used to create FPS
|
|
- last() used with takeWhile() to only update state store at end
|
|
- scan() re-emits on each emission. reduce() only emits after last emission (take()).
|
|
- CustomEvent can bridge streams
|
|
- State store passed between streams
|
|
- Random movement vector, collision detection -->
|
|
|
|
<script src='js/bundle.js'></script>
|
|
</body>
|
|
</html>
|
|
|