Cohesion coming together (heh).

js/animation.js

@@ -46,8 +46,7 @@ Animation.prototype.subscribeCount = function(count) {
 Animation.prototype.addHazards = function() {
     const bounds = this.container.getBoundingClientRect();
 
-    // const n = Random.num(1, 3);
-    const n = 3
+    const n = Random.num(1, 3);
     for (let i = 0; i < n; i++) {
         const w = Random.num(50, 200);
         const h = Random.num(50, 200);

js/animation3a.js

@@ -5,11 +5,12 @@ export default function(destroy$) {
     const id = '3a';
     const config = {
         id,
-        maxCount: 10,
+        count: 5,
+        maxCount: 1000,
         showAlignmentControl: true,
         showCohesionControl: true,
         showSeparationControl: true,
-        showVisionGridControl: true
+        // showVisionGridControl: true
     };
 
     const observables = Controls(destroy$, config);

js/arc.js

@@ -13,6 +13,7 @@ const Arc = {
             prevEndX: 0,
             prevEndY: 0,
             radius: Random.num(100, 200),
+            speed: 0,
             theta: Random.num(RAD.t90, RAD.t360)
         };
 
@@ -32,9 +33,9 @@ const Arc = {
         return arc;
     },
 
-    step: function(arc, bounds, speed) {
+    step: function(arc, bounds) {
         // Ensure constant velocity and theta between 0 and 2π.
-        const delta = speed / arc.radius;
+        const delta = arc.speed / arc.radius;
         arc.length -= delta;
 
         arc.theta += (arc.clockwise ? -delta : +delta);
@@ -99,6 +100,11 @@ const Arc = {
         return arc;
     },
 
+    changeSpeed: function(arc, newSpeed) {
+        arc.speed = newSpeed * 1;
+        return arc;
+    },
+
     reverse: function(arc) {
         arc.clockwise = !arc.clockwise;
 
@@ -113,32 +119,44 @@ const Arc = {
         return arc;
     },
 
+    match: function(arc, arcToMatch) {
+
+    },
+
     follow: function(arc, arcToFollow) {
-        if (arc.clockwise !== arcToFollow.clockwise) {
-            arc = Arc.reverse(arc);
-        }
+        arc = (arc.clockwise !== arcToFollow.clockwise ? Arc.reverse(arc) : arc);
 
-        if (Math.abs(arc.theta - arcToFollow.theta) > 0.2) {
-            arc = Arc.changeRadius(arc, 50);
-        } else {
-            arc = Arc.changeRadius(arc, arcToFollow.radius);
-        }
+        const prevD = Math.pow(
+            Math.pow(arcToFollow.endX - arc.prevEndX, 2) +
+            Math.pow(arcToFollow.endY - arc.prevEndY, 2)
+        , 0.5);
 
-        return arc;
-    },
+        const currD = Math.pow(
+            Math.pow(arcToFollow.endX - arc.endX, 2) +
+             Math.pow(arcToFollow.endY - arc.endY, 2)
+        , 0.5);
+
+        // "How much of movement is in the correct direction"
+        const ratio = (prevD - currD) / arc.speed;
 
-    goto: function (arc, x, y, speed) {
-        const prevD = Math.pow(Math.pow(x - arc.prevEndX, 2) + Math.pow(y - arc.prevEndY, 2), 0.5);
-        const currD = Math.pow(Math.pow(x - arc.endX, 2) + Math.pow(y - arc.endY, 2), 0.5);
-        const ratio = (prevD - currD) / speed;
+        // TODO adjust speed
+        // TODO turn in the correct direction
 
-        if (currD < 10) {
-            throw new Error(`Arc end of (${arc.endX},${arc.endY}) is within 50px of (${x},${y})`);
+        if (currD < 20) {
+        // if (Math.abs(arc.centerX - arcToFollow.centerX) < 10 && Math.abs(arc.centerY - arcToFollow.centerX) < 10) {
+            arc = Arc.changeRadius(arc, arcToFollow.radius);
+            if (arc.speed > arcToFollow.speed) {
+                arc = Arc.changeSpeed(arc, arc.speed - 1);
+            }
         } else if (ratio < 0.8) {
             // arc = (ratio < 0 ? Arc.reverse(arc) : arc);
             arc = Arc.changeRadius(arc, 20);
         } else {
             arc = Arc.changeRadius(arc, 400);
+
+            if (arc.speed < (arcToFollow.speed + 2)) {
+                arc = Arc.changeSpeed(arc, arc.speed + 1);
+            }
         }
 
         return arc;

js/index.js

@@ -28,8 +28,9 @@ window.addEventListener('load', () => {
 // TODO abs positioning on controls elements so order doesn't matter
 // TODO BehaviorSubject listener on bounds change
 // TODO are vision grid nodes removed properly
-// TODO overlapping grid points
 // TODO grid touches
+// TODO start with n particles doesn't update slider
+// TODO leader not quite right, if 2 particles, sometimes ignored
 
 // TODO ANIM1ab free movement
 

js/particle.js

@@ -14,7 +14,6 @@ function Particle(parent, bounds, globalGrid, observables) {
         randomize: true,
         showArc: false,
         showVision: false,
-        speed: 4,
         visionRadius: 50
     };
 
@@ -39,6 +38,7 @@ function Particle(parent, bounds, globalGrid, observables) {
     this.isLeader = false;
 
     this.arc = Arc.create(bounds, this.grids.global);
+    this.arc.length = 3;
 
     // If starting in a hazard, recurse.
     while (this.grids.global.getPoint({ x: this.arc.endX, y: this.arc.endY, type: ENTITIES.HAZARD}) !== undefined) {
@@ -96,21 +96,14 @@ Particle.prototype.subscribeNextFrame = function() {
         type: ENTITIES.PARTICLE
     });
 
-    if (this.nodes === undefined) {
-        console.warn('no nodes in', this.id);
-        return;
-    }
-
-    // this.arc = Arc.goto(this.arc, 200, 200, this.config.speed)
-
-    this.arc = Arc.step(this.arc, this.config.bounds, this.config.speed);
-
     if (this.leader !== null) {
         this.arc = Arc.follow(this.arc, this.leader.arc);
     } else if (this.arc.length <= 0 && this.config.randomize) {
         this.arc = Arc.randomize(this.arc);
     }
 
+    this.arc = Arc.step(this.arc, this.config.bounds);
+
     this.grids.vision = updateVisionGrid(this.arc, this.config, this.grids);
     const { hazards, particles } = look(this.arc, this.grids);
 
@@ -133,10 +126,9 @@ Particle.prototype.subscribeNextFrame = function() {
 }
 
 Particle.prototype.subscribeSpeed = function(value) {
-    this.config.speed = value;
+    Arc.changeSpeed(this.arc, value);
 }
 
-
 Particle.prototype.subscribeCircle = function(show) {
     if (show === false) {
         this.nodes.container.removeChild(this.nodes.circle);