Draw the quadtree

src/main.ts

@@ -25,20 +25,20 @@ function particles(color: string, n: number) {
   );
 }
 
-// this.rule(particle, neighbors, "green", "green", -0.32 * accel);
-// this.rule(particle, neighbors, "green", "red", -0.17 * accel);
-// this.rule(particle, neighbors, "green", "yellow", 0.34 * accel);
-// this.rule(particle, neighbors, "red", "red", -0.1 * accel);
-// this.rule(particle, neighbors, "red", "green", -0.34 * accel);
-// this.rule(particle, neighbors, "yellow", "yellow", 0.15 * accel);
-// this.rule(particle, neighbors, "yellow", "green", -0.2 * accel);
-
 let quadtree = new Quadtree<particlelife.Position>(bounds);
 
 const colors = ["green", "red", "yellow", "white"];
 const n = 500;
 const searchSize = 80;
-const stepSize = 1;
+const stepSize = 100;
+const rules = colors
+  .map((color) =>
+    colors.map(
+      (other) =>
+        [color, other, Math.random() * 2 - 1] as [string, string, number]
+    )
+  )
+  .flat();
 
 const world = new ECS.World();
 for (const color of colors) {
@@ -47,21 +47,10 @@ for (const color of colors) {
 world
   .register(new particlelife.GraphicsSystem())
   .register(
-    new particlelife.ParticleLifeSystem(
-      colors
-        .map((color) =>
-          colors.map(
-            (other) =>
-              [color, other, Math.random() * 2 - 1] as [string, string, number]
-          )
-        )
-        .flat(),
-      quadtree,
-      searchSize,
-      stepSize
-    )
+    new particlelife.ParticleLifeSystem(rules, quadtree, searchSize, stepSize)
   )
   .register(new particlelife.MovementSystem(bounds, quadtree))
+  .register(new particlelife.QuadtreeRendererSystem(app.stage, quadtree))
   .run();
 
 document.body.appendChild(app.view as any);

src/particlelife/systems.ts

@@ -1,8 +1,41 @@
-import { Rectangle } from "pixi.js";
+import { Container, Graphics, Rectangle } from "pixi.js";
 import * as ECS from "../ecs";
 import * as components from "./components";
 import { Quadtree } from "../quadtree";
 
+export class QuadtreeRendererSystem extends ECS.System {
+  graphics: Graphics;
+
+  constructor(
+    readonly stage: Container,
+    readonly quadtree: Quadtree<components.Position>
+  ) {
+    super();
+
+    this.graphics = new Graphics();
+    this.stage.addChild(this.graphics);
+  }
+
+  update() {
+    this.graphics.clear();
+    this.graphics.lineStyle(1, 0xffffff);
+
+    const queue = [this.quadtree];
+    while (queue.length > 0) {
+      const qt = queue.pop()!;
+      this.graphics.drawRect(
+        qt?.bounds.x,
+        qt?.bounds.y,
+        qt?.bounds.width,
+        qt?.bounds.height
+      );
+      if (qt.nodes) {
+        queue.push(...qt.nodes);
+      }
+    }
+  }
+}
+
 export class GraphicsSystem extends ECS.System {
   queries = {
     Drawable: new ECS.Query([components.Position, components.Graphics]),
@@ -66,7 +99,7 @@ export class ParticleLifeSystem extends ECS.System {
     readonly rules: [string, string, number][],
     readonly quadtree?: Quadtree<components.Position>,
     readonly searchSize = 30,
-    readonly simulationMultiplier: number = 1
+    readonly stepSize: number = 1
   ) {
     super();
   }
@@ -107,7 +140,7 @@ export class ParticleLifeSystem extends ECS.System {
   update(world: ECS.World, elapsed: number) {
     const particles = this.queries.Particle.execute(world);
 
-    const accel = this.simulationMultiplier; //* elapsed / 1000;
+    const accel = this.stepSize; //* elapsed / 1000;
 
     if (!this.quadtree) {
       particles.sort(([_a, [a]], [_b, [b]]) => a.state.x - b.state.x);

src/quadtree/index.ts

@@ -26,9 +26,9 @@ export class Quadtree<T extends Entity> {
 
   constructor(
     readonly bounds: Bounds,
-    readonly level = 0,
-    readonly maxN = 5,
-    readonly maxLevel = 8
+    readonly maxN = 10,
+    readonly maxLevel = 10,
+    readonly level = 0
   ) {}
 
   clear() {
@@ -84,27 +84,27 @@ export class Quadtree<T extends Entity> {
     this.nodes = [
       new Quadtree(
         rect(x + hw, y, hw, hh),
-        this.level + 1,
         this.maxN,
-        this.maxLevel
+        this.maxLevel,
+        this.level + 1
       ),
       new Quadtree(
         rect(x, y, hw, hh),
-        this.level + 1,
         this.maxN,
-        this.maxLevel
+        this.maxLevel,
+        this.level + 1
       ),
       new Quadtree(
         rect(x, y + hh, hw, hh),
-        this.level + 1,
         this.maxN,
-        this.maxLevel
+        this.maxLevel,
+        this.level + 1
       ),
       new Quadtree(
         rect(x + hw, y + hh, hw, hh),
-        this.level + 1,
         this.maxN,
-        this.maxLevel
+        this.maxLevel,
+        this.level + 1
       ),
     ];
     for (const p of this.entities) {