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.
37 lines
1.2 KiB
37 lines
1.2 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>Studying AI movement along arcs with RxJs</h2>
|
|
<hr>
|
|
|
|
<div class="particles"></div>
|
|
|
|
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 1</h2>
|
|
Goal: Animate several seahorses over an interval.
|
|
Key points:
|
|
- range() used to create N divs
|
|
- interval() used to create FPS
|
|
|
|
<h2>Animation 2</h2>
|
|
Goal: Scare a seahorse with a click. Move her to a safe distance away.
|
|
Key points:
|
|
- 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>
|
|
|