flock sprinkle

mallsoft · Oct 20, 2024 · fb362dd · fb362dd
1 parent a102fad
commit fb362dd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 71 deletions.
diff --git a/src/lib/components/visuals/Bees/Flocker.svelte b/src/lib/components/visuals/Bees/Flocker.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { flocInit, flockDraw, flockStep } from './flock';
-  import { Vec } from './vec';
 
   let frame: number = 0;
   let canvas: HTMLCanvasElement;
   let ctx: CanvasRenderingContext2D;
-  let pointer: Vec;
 
   const fitCanvas = () => {
     canvas.width = window.innerWidth;
@@ -27,7 +25,7 @@
   };
 
   const animationLoop = () => {
-    flockStep({ pointer });
+    flockStep();
     flockDraw(ctx);
 
     frame = requestAnimationFrame(animationLoop);
@@ -37,7 +35,7 @@
     ctx = canvas.getContext('2d')!;
     console.assert(!!ctx, 'No canvas 2d context');
     fitCanvas();
-    flocInit();
+    flocInit({ initialFlockSize: 20 });
 
     frame = requestAnimationFrame(animationLoop);
     return () => {
@@ -46,12 +44,7 @@
   });
 </script>
 
-<svelte:window
-  on:resize={handleResize}
-  on:mousemove={({ clientX, clientY }) => {
-    pointer = new Vec(clientX, clientY);
-  }}
-/>
+<svelte:window on:resize={handleResize} />
 
 <div>
   <canvas bind:this={canvas} />

diff --git a/src/lib/components/visuals/Bees/bee.ts b/src/lib/components/visuals/Bees/bee.ts
@@ -4,17 +4,16 @@ import { Vec } from './vec';
 export class Bee {
   pos: Vec = new Vec(0, 0);
   dir: Vec = new Vec(0, 0);
-  debug: boolean = false;
   private hunting: Bee | null = null;
   private speed: number = 0;
-  private historic: CircularBuffer<Vec> = new CircularBuffer(Math.floor(Math.random() * 100) + 5);
+  private historic: CircularBuffer<Vec> = new CircularBuffer(Math.floor(Math.random() * 300) + 5);
 
   private randSpeed() {
     this.speed = Math.random() + 1;
     if (Math.random() < 0.25) {
       this.speed = Math.random() * 3 + 1;
-      if (Math.random() < 0.5) {
-        this.speed = Math.random() * 6 + 1;
+      if (Math.random() < 0.03) {
+        this.speed = Math.random() * 8 + 1;
       }
     }
   }
@@ -32,8 +31,7 @@ export class Bee {
 
   private turn(target: Vec, factor: number) {
     const dir = this.pos.clone().setDir(this.pos.dirTo(target)).mult(factor);
-    this.dir.add(dir).normalize();
-    return this;
+    return this.dir.add(dir);
   }
 
   // private transpose(x: number, y: number) {
@@ -76,23 +74,6 @@ export class Bee {
 
     const max = Math.min(window.innerWidth / 2, window.innerHeight / 2);
 
-    if (this.debug) {
-      const lines = JSON.stringify(
-        {
-          position: { x: this.pos.x.toFixed(3), y: this.pos.y.toFixed(3) },
-          direction: { x: this.dir.x.toFixed(3), y: this.dir.y.toFixed(3) },
-          chasing: { x: this.hunting?.pos.x.toFixed(3), y: this.hunting?.pos.y.toFixed(3) },
-          speed: this.speed.toFixed(3)
-        },
-        null,
-        2
-      ).split('\n');
-
-      lines.forEach((line, i) => {
-        ctx.fillText(line, this.pos.x, this.pos.y + i * 15);
-      });
-    }
-
     if (this.historic.length > 1) {
       ctx.beginPath();
       for (let i = 1; i < this.historic.length - 1; i++) {
@@ -111,32 +92,11 @@ export class Bee {
     }
   }
 
-  step({
-    avgHeading,
-    avgCenter,
-    flock,
-    pointer
-  }: {
-    avgHeading: Vec;
-    avgCenter: Vec;
-    flock: Bee[];
-    pointer: Vec;
-  }) {
+  step({ avgHeading, avgCenter, flock }: { avgHeading: Vec; avgCenter: Vec; flock: Bee[] }) {
     this.pos.add(this.dir.clone().mult(this.speed));
-
+    this.hunt(flock, 0.09);
+    this.dir.add(avgHeading, 0.03).normalize();
+    this.turn(avgCenter, 0.05);
     this.wrap();
-
-    this.hunt(flock, 0.05);
-
-    this.dir.add(avgHeading, 0.06);
-
-    this.turn(avgCenter, 0.04);
-
-    if (pointer?.magnitude > 1) {
-      this.turn(pointer, 10 / (this.pos.dist(pointer) + 1));
-      pointer.mult(0.99);
-    }
-
-    this.dir.normalize();
   }
 }
diff --git a/src/lib/components/visuals/Bees/flock.ts b/src/lib/components/visuals/Bees/flock.ts
@@ -1,14 +1,7 @@
 import { Vec } from './vec';
 import { Bee } from './bee';
 
-const FLOCK_SIZE = 100;
-let flock: Array<Bee> = [];
-
-type StepParam = {
-  pointer?: { x: number; y: number };
-};
-
-const flockStep = ({ pointer }: StepParam) => {
+const flockStep = () => {
   const avgHeading = new Vec(0, 0);
   const avgCenter = new Vec(0, 0);
   for (const b of flock) {
@@ -19,13 +12,13 @@ const flockStep = ({ pointer }: StepParam) => {
   avgCenter.mult(1 / flock.length);
 
   for (const b of flock) {
-    b.step({ avgHeading, avgCenter, flock, pointer });
+    b.step({ avgHeading, avgCenter, flock });
   }
 };
 
 const flockDraw = (ctx: CanvasRenderingContext2D) => {
   ctx.lineCap = 'round';
-  ctx.globalAlpha = 0.4;
+  ctx.globalAlpha = 0.25;
   // ctx.lineWidth = 5;
   ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('---c-a2');
   ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('---c-c1');
@@ -36,10 +29,10 @@ const flockDraw = (ctx: CanvasRenderingContext2D) => {
   }
 };
 
-const flocInit = () => {
-  flock = Array.from({ length: FLOCK_SIZE }, () => new Bee());
+let flock: Array<Bee> = [];
 
-  flock[0].debug = true;
+const flocInit = ({ initialFlockSize }: { initialFlockSize: number }) => {
+  flock = Array.from({ length: initialFlockSize }, () => new Bee());
 
   for (const b of flock) {
     b.respawn();

diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+  import Flocker from '$lib/components/visuals/Bees/Flocker.svelte';
+</script>
+
+<Flocker />