Add buttons

src/game/swarm/agent.ts

@@ -46,14 +46,6 @@ export class Agent {
     update(canvas: Canvas, delta: DOMHighResTimeStamp) {
         const nextPos = this.pos.add(this.dir);
         const navigations = [];
-        /**if (nextPos.y >= canvas.height - padding || nextPos.y < padding) {
-            this.vel.y *= -1;
-            nextPos.y = clamp(nextPos.y, padding, canvas.height - padding);
-        }
-        if (nextPos.x >= canvas.width - padding || nextPos.x < padding) {
-            this.vel.x *= -1;
-            nextPos.x = clamp(nextPos.x, padding, canvas.width - padding);
-        }*/
         navigations.push(this.stayInBounds(nextPos));
         navigations.push(this.doNotBumpIntoFlock(nextPos));
         navigations.push(this.keepFlockClose(nextPos));
@@ -181,15 +173,20 @@ export class Agent {
     }
 
     /**render({ctx}: Canvas) {
-        const satisfaction = this.satisfaction();
+
-        const dissatisfaction = 255 - satisfaction;
-        fillCircle(ctx, this.pos, particleSize, `rgb(${dissatisfaction}, 0, ${satisfaction})`);
-        strokeLine(ctx, this.pos, this.pos.add(this.dir.scale(30)));
     }*/
 
     render({ctx}: Canvas) {
-        const color = navigationColorMap[this.lastNavigation.type];
+        if (this.swarm.renderStyle === 'satisfaction') {
-        fillCircle(ctx, this.pos, particleSize, color);
+            const satisfaction = this.satisfaction();
-        strokeLine(ctx, this.pos, this.pos.add(this.dir.scale(30)));
+            const dissatisfaction = 255 - satisfaction;
+            fillCircle(ctx, this.pos, particleSize, `rgb(${dissatisfaction}, 0, ${satisfaction})`);
+            strokeLine(ctx, this.pos, this.pos.add(this.dir.scale(30)));
+        } else {
+            const color = navigationColorMap[this.lastNavigation.type];
+            fillCircle(ctx, this.pos, particleSize, color);
+            strokeLine(ctx, this.pos, this.pos.add(this.dir.scale(30)));
+        }
+
     }
 }

src/game/swarm/swarm.ts

@@ -1,23 +1,28 @@
 import { Canvas } from "@/canvas";
 import { GameObject } from "@/common/gameobject";
 import { Rect } from "@/common/rect";
+import { Vec } from "@/common/vec";
 import { Agent } from "@/game/swarm/agent";
+import Button from "@/ui/button";
 
-const numAgents = 100;
+let numAgents = 20;
 
 export class Swarm extends GameObject {
     rect: Rect;
     agents: Agent[];
+    renderStyle: 'satisfaction'|'navigationMode' = 'navigationMode';
     constructor(canvas: Canvas) {
         super();
         this.rect = new Rect(0, 0, canvas.width, canvas.height);
         this.agents = [];
         this.init();
+        this.initUI(canvas);
         // @ts-ignore
         window.swarm = this;
     }
 
     init() {
+        this.agents = [];
         const rectInTheMiddle = this.rect.translate(this.rect.tl.scale(0.25)).scale(0.5);
         const cols = Math.floor(Math.sqrt(numAgents));
         const rows = Math.floor(numAgents / cols);
@@ -30,6 +35,25 @@ export class Swarm extends GameObject {
         }
     }
 
+    initUI(canvas: Canvas) {
+        const buttonSize = new Vec(100, 40);
+        const buttons = [
+            new Button("Reset", Rect.bySize(new Vec(10, 10), buttonSize), () => this.init()),
+            new Button("Toggle Colors", Rect.bySize(new Vec(110, 10), buttonSize), () => {
+                this.renderStyle = this.renderStyle === 'satisfaction' ? 'navigationMode' : 'satisfaction';
+            }),
+            new Button("Less Agents", Rect.bySize(new Vec(10, 60), buttonSize), () => {
+                numAgents -= Math.max(1, numAgents / 10);
+                this.init();
+            }),
+            new Button("More Agents", Rect.bySize(new Vec(110, 60), buttonSize), () => {
+                numAgents += Math.max(1, numAgents / 10);
+                this.init();
+            }),
+        ]
+        buttons.forEach(b => canvas.add(b, Canvas.LAYER_UI));
+    }
+
     update(canvas: Canvas, delta: DOMHighResTimeStamp) {
         // simulation seems to be breaking when browser goes to sleep
         delta = Math.min(delta, 10);

src/ui/colors.ts

@@ -3,19 +3,19 @@ export class Colors {
      * @link https://coolors.co/cb997e-ddbea9-ffe8d6-b7b7a4-a5a58d-6b705c
      */
     static get BG(): Color {
-        return '#cb997eff';
+        return '#252521';
     }
 
     static get BG_ACTIVE(): Color {
-        return '#ddbea9ff';
+        return '#26453b';
     }
 
     static get BG_HOVER(): Color {
-        return '#ffe8d6ff';
+        return '#284347';
     }
 
     static get TEXT(): Color {
-        return '#b7b7a4ff';
+        return '#d3d3d3';
     }
 
     static get TEXT_MUTED(): Color {