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.
47 lines
1.4 KiB
47 lines
1.4 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="controls">
|
|
Restart
|
|
Change direction
|
|
Change animation speed
|
|
Show movement circle
|
|
Show vision grid
|
|
Show touching points
|
|
Start / stop
|
|
</div>
|
|
|
|
<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>
|
|
|