index.html

@@ -18,7 +18,7 @@
             <li>Move in organic, natural arcs, with no sudden pivots or swerves</li>
             <li>Support large swarms of particles</li>
             <li>Be able to evade obstacles</li>
-            <li>Simulate cohesive flocking behavior</li>
+            <li>Exhibit flocking behavior</li>
         </ul>
     </blockquote>
 
@@ -67,35 +67,22 @@
     <div class='outerContainer' id='2b'></div>
 
     <p>
-        <h4>Exploration 3: Cohesive Flocking Behavior</h4>
+        The last goal was to play around with flocking behaviors: cohesion, separation, and alignment.
+        Here's each of the three, with the vision grid visualized:
     </p>
 
     <p>
-        Using the vision grid and the circular geometry, particles determine and follow a leader. At the start of the animation,
-        there are no leaders. When particles see each other, one of them is chosen as a leader.  The others follow. If other particles
-        see a leader, they follow it.
-    </p>
-
-    <p>
-        Each particle recalls its previous location, and compares it to their current location to see if they're moving
-        towards the leader or not.  Each frame iterates the particle closer to its leader.  The leader(s) continue
-        moving freely.
+        <h4>Exploration 3: Flocking patterns</h4>
     </p>
 
     <div class='outerContainer' id='3a'></div>
 
-    <p>
-        On a larger scale, the particles are starting to take on a personality.
-    </p>
-
-    <div class='outerContainer' id='3b'></div>
-
     <p>
         The exploration is now complete: arc-based movement, independent AIs, grid-based vision,
-        hazards, and cohesive flocking behavior, on a large scale:
+        following patterns of cohesion, separation, alignment, with hazards, on a large scale:
     </p>
 
-    <div class='outerContainer' id='3c'></div>
+    <div class='outerContainer' id='3b'></div>
 
     <script src='js/bundle.js'></script>
     <script src='/core/js/ui.js'></script>

js/animation.js

@@ -3,15 +3,14 @@ import Grid from './grid';
 import Particle from './particle';
 import Controls from './controls';
 import Random from './random';
-import { BEHAVIOR, CONTROLS, ENTITIES } from './enums';
+import { CONTROLS, ENTITIES } from './enums';
 
-function Animation(observables, id, behavior) {
+function Animation(observables, id, showHazards) {
     this.id = id;
     this.observables = observables;
     this.particles = [];
     this.grid = new Grid();
     this.fpsInterval = null;
-    this.behavior = behavior || BEHAVIOR.FREE;
 
     this.container = document.createElement('div');
     this.container.className = 'animationContainer';
@@ -39,14 +38,15 @@ Animation.prototype.subscribeCount = function(count) {
     }
 
     while (this.particles.length < count) {
-        const p = new Particle(this.container, bounds, this.grid, this.observables, this.behavior);
+        const p = new Particle(this.container, bounds, this.grid, this.observables);
         this.particles.push(p);
     }
 }
 
-Animation.prototype.addHazards = function(n) {
+Animation.prototype.addHazards = function() {
     const bounds = this.container.getBoundingClientRect();
 
+    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/animation1b.js

@@ -5,7 +5,6 @@ export default function(destroy$) {
     const id = '1b';
     const config = {
         id,
-        count: 200,
         maxCount: 1000
     };
 

js/animation2a.js

@@ -10,5 +10,5 @@ export default function(destroy$) {
     };
 
     const observables = Controls(destroy$, config);
-    (new Animation(observables, id, true)).addHazards(2);
+    (new Animation(observables, id, true)).addHazards();
 }

js/animation2b.js

@@ -5,10 +5,9 @@ export default function(destroy$) {
     const id = '2b';
     const config = {
         id,
-        count: 200,
         maxCount: 1000
     };
 
     const observables = Controls(destroy$, config);
-    new Animation(observables, id).addHazards(2);
+    new Animation(observables, id).addHazards();
 }

js/animation3a.js

@@ -1,15 +1,18 @@
 import Animation from './animation';
 import Controls from './controls';
-import { BEHAVIOR } from './enums';
 
 export default function(destroy$) {
     const id = '3a';
     const config = {
         id,
-        maxCount: 10,
-        showVisionGridControl: true
+        count: 5,
+        maxCount: 1000,
+        showAlignmentControl: true,
+        showCohesionControl: true,
+        showSeparationControl: true,
+        // showVisionGridControl: true
     };
 
     const observables = Controls(destroy$, config);
-    new Animation(observables, id, BEHAVIOR.COHESION).addHazards();
+    new Animation(observables, id);
 }

js/animation3b.js

@@ -1,15 +1,16 @@
 import Animation from './animation';
 import Controls from './controls';
-import { BEHAVIOR } from './enums';
 
 export default function(destroy$) {
     const id = '3b';
     const config = {
         id,
-        count: 200,
-        maxCount: 1000
+        maxCount: 10,
+        showAlignmentControl: true,
+        showCohesionControl: true,
+        showSeparationControl: true
     };
 
     const observables = Controls(destroy$, config);
-    new Animation(observables, id, BEHAVIOR.COHESION);
+    new Animation(observables, id).addHazards();
 }

js/animation3c.js

@@ -1,15 +0,0 @@
-import Animation from './animation';
-import Controls from './controls';
-import { BEHAVIOR } from './enums';
-
-export default function(destroy$) {
-    const id = '3c';
-    const config = {
-        id,
-        count: 200,
-        maxCount: 1000
-    };
-
-    const observables = Controls(destroy$, config);
-    new Animation(observables, id, BEHAVIOR.COHESION).addHazards(1);
-}

js/arc.js

@@ -1,13 +1,8 @@
 import { ENTITIES, RAD } from './enums';
 import Random from './random';
 
-// "How much of movement is in the correct direction"
-const rigidity = 0.9;
-// "How close to the leader is enough"
-const sensitivity = 30;
-
 const Arc = {
-    create: function(bounds) {
+    create: function(bounds, grid) {
         let arc = {
             centerX: Random.num(0, bounds.width),
             centerY: Random.num(0, bounds.height),
@@ -30,6 +25,11 @@ const Arc = {
 
         arc = Arc.overflow(arc, bounds);
 
+        // If starting in a hazard, recurse.
+        // if (grid.getPoint({ x: arc.endX, y: arc.endY, type: ENTITIES.HAZARD })) {
+        //     arc = Arc.create(bounds, grid);
+        // }
+
         return arc;
     },
 
@@ -50,6 +50,7 @@ const Arc = {
         arc.endX = arc.centerX + arc.radius * arc.cosTheta;
         arc.endY = arc.centerY - arc.radius * arc.sinTheta;
 
+        // Overflow.
         arc = Arc.overflow(arc, bounds);
 
         return arc;
@@ -118,7 +119,13 @@ const Arc = {
         return arc;
     },
 
+    match: function(arc, arcToMatch) {
+
+    },
+
     follow: function(arc, arcToFollow) {
+        arc = (arc.clockwise !== arcToFollow.clockwise ? Arc.reverse(arc) : arc);
+
         const prevD = Math.pow(
             Math.pow(arcToFollow.endX - arc.prevEndX, 2) +
             Math.pow(arcToFollow.endY - arc.prevEndY, 2)
@@ -129,30 +136,25 @@ const Arc = {
              Math.pow(arcToFollow.endY - arc.endY, 2)
         , 0.5);
 
-        const rigidityCoeff = (prevD - currD) / arc.speed;
+        // "How much of movement is in the correct direction"
+        const ratio = (prevD - currD) / arc.speed;
 
-        if (currD < sensitivity) {
-            arc = (arc.clockwise !== arcToFollow.clockwise ? Arc.reverse(arc) : arc);
-            arc = Arc.changeRadius(arc, arcToFollow.radius);
+        // TODO adjust speed
+        // TODO turn in the correct direction
 
+        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);
             }
-
-            if (arc.speed < arcToFollow.speed) {
-                arc = Arc.changeSpeed(arc, arc.speed + 1);
-            }
-
-        } else if (rigidityCoeff < rigidity) {
+        } else if (ratio < 0.8) {
+            // arc = (ratio < 0 ? Arc.reverse(arc) : arc);
             arc = Arc.changeRadius(arc, 20);
-
-            if (arc.speed > arcToFollow.speed) {
-                arc = Arc.changeSpeed(arc, arc.speed - 1);
-            }
         } else {
-            arc = Arc.changeRadius(arc, 4000);
+            arc = Arc.changeRadius(arc, 400);
 
-            if (arc.speed < arcToFollow.speed + 2) {
+            if (arc.speed < (arcToFollow.speed + 2)) {
                 arc = Arc.changeSpeed(arc, arc.speed + 1);
             }
         }
@@ -161,9 +163,8 @@ const Arc = {
     },
 
     evade: function(arc) {
-        // Randomness here mitigates sticking in corners and between walls.
-        arc = Arc.changeRadius(arc, Random.num(15, 30));
-        arc.length = 0.3;
+        arc = Arc.changeRadius(arc, 20);
+        arc.length = 1;
 
         return arc;
     }

js/controls.js

@@ -16,7 +16,7 @@ export default function(destroy$, {
 
     const observables = {
         fps$: new Rx.Subject(),
-        count$: createCountControl(container, count, maxCount),
+        count$: createCountControl(container, 0, maxCount),
         speed$: createSpeedControl(container),
         circle$: showCircleControl && createCircleControl(container),
         randomize$: showRandomizeControl && createRandomizeControl(container),
@@ -27,7 +27,10 @@ export default function(destroy$, {
     observables.animating$.subscribe((isAnimating) => {
         if (isAnimating === true) {
             destroy$.next(id);
-            observables.count$.next(count);
+
+            if (observables.count$.getValue() === 0) {
+                observables.count$.next(count);
+            }
         }
     });
 
@@ -77,7 +80,7 @@ function createCountControl(container, initialValue, max) {
     label.className = 'controls-range';
 
     const text = document.createElement('span');
-    // text.innerHTML = (initialValue == 1) ? '1 particle' : `${initialValue} particles`;
+    text.innerHTML = (initialValue == 1) ? '1 particle' : `${initialValue} particles`;
     text.className = 'controls-range-text';
 
     const slider = document.createElement('input');
@@ -99,7 +102,7 @@ function createCountControl(container, initialValue, max) {
     });
 
     count$.subscribe((value) => {
-        text.innerHTML = (value === 1) ? '1 particle' : `${value} particles`;
+        text.innerHTML = (value == 1) ? '1 particle' : `${value} particles`;
     });
 
     return count$;
@@ -116,7 +119,7 @@ function createSpeedControl(container) {
     const slider = document.createElement('input');
     slider.type = 'range';
     slider.min = 1;
-    slider.max = 10;
+    slider.max = 15;
     slider.value = 4;
     slider.className = 'controls-range-input';
 

js/index.js

@@ -5,7 +5,6 @@ import Animation2a from './animation2a';
 import Animation2b from './animation2b';
 import Animation3a from './animation3a';
 import Animation3b from './animation3b';
-import Animation3c from './animation3c';
 
 require('../css/reset.scss');
 require('../css/index.scss');
@@ -15,18 +14,26 @@ require('../css/controls.scss');
 window.addEventListener('load', () => {
     const destroy$ = new Rx.BehaviorSubject(null);
 
-    // window.addEventListener('blur', () => {
-    //     destroy$.next('all');
-    // });
-
     Animation1a(destroy$);
     Animation1b(destroy$);
     Animation2a(destroy$);
     Animation2b(destroy$);
     Animation3a(destroy$);
     Animation3b(destroy$);
-    Animation3c(destroy$);
 });
 
 // TODO remove bottom padding from Disqus
-// TODO TURN THE CORRECT DIRECTION - HUGE EFFICIENCY INCREASE
+// TODO fix "hangup" small radius evade bug
+// TODO sort out particle nextframe
+// 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 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
+
+// TODO ANIM3a streamline updateLeader
+// TODO ANIM3b separation
+// TODO ANIM3c alignment

js/particle.js

@@ -5,9 +5,9 @@ import Random from './random';
 
 // ===== Constructor =====
 
-function Particle(parent, bounds, globalGrid, observables, behavior) {
+function Particle(parent, bounds, globalGrid, observables) {
     this.config = {
-        behavior: behavior || BEHAVIOR.FREE,
+        behavior: BEHAVIOR.COHESION,
         bounds,
         color: Random.color(),
         gridSize: 5,
@@ -35,7 +35,7 @@ function Particle(parent, bounds, globalGrid, observables, behavior) {
     parent.appendChild(this.nodes.container);
 
     this.leader = null;
-    this.leaderTime = 0;
+    this.isLeader = false;
 
     this.arc = Arc.create(bounds, this.grids.global);
     this.arc.length = 3;
@@ -53,9 +53,9 @@ function Particle(parent, bounds, globalGrid, observables, behavior) {
 
     this.remove$ = new Rx.Subject();
 
-    const frames = observables.fps$.takeUntil(this.remove$);
-    frames.subscribe(this.subscribeFrameMove.bind(this));
-    frames.subscribe(this.subscribeFrameRepaint.bind(this));
+    observables.fps$
+        .takeUntil(this.remove$)
+        .subscribe(this.subscribeNextFrame.bind(this));
 
     observables.speed$
         .takeUntil(this.remove$)
@@ -89,7 +89,7 @@ Particle.prototype.remove = function() {
     delete this.nodes;
 }
 
-Particle.prototype.subscribeFrameMove = function(n) {
+Particle.prototype.subscribeNextFrame = function() {
     this.grids.global.deletePoint({
         x: this.arc.endX,
         y: this.arc.endY,
@@ -102,27 +102,25 @@ Particle.prototype.subscribeFrameMove = function(n) {
         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);
 
-    this.updateLeader(particles);
-
     if (hazards.length > 0) {
-        this.arc = Arc.evade(this.arc);
+        // this.arc = Arc.evade(this.arc);
     }
 
-    this.arc = Arc.step(this.arc, this.config.bounds);
+    this.updateLeader(particles);
 
     this.grids.global.setPoint({
         x: this.arc.endX,
         y: this.arc.endY,
         type: ENTITIES.PARTICLE
     }, this);
-}
 
-Particle.prototype.subscribeFrameRepaint = function(n) {
-    repaintContainer(this.nodes.container, this.arc, this.leaderTime);
-    repaintBody(this.nodes.body, this.arc, this.leaderTime);
+    repaintContainer(this.nodes.container, this.arc);
+    repaintBody(this.nodes.body, this.arc, this.isLeader);
     repaintCircle(this.nodes.circle, this.arc);
     repaintVisionGrid(this.nodes.visionGrid, this.arc, this.grids);
 }
@@ -159,47 +157,36 @@ Particle.prototype.updateLeader = function(particles) {
         return;
     }
 
-    // Head-to-head: particles see eachother but shouldn't both lead.
     if (this.leader === null && particles.length > 0) {
+        // Head-to-head: particles see eachother but shouldn't both lead.
         const candidates = particles
             .filter(v => v.leader ? (v.leader.id !== this.id) : true);
 
-        const leader = candidates.find(v => (v.leaderTime > 0)) || candidates[0];
+        const leader = candidates.find(v => v.isLeader) || candidates[0];
 
         if (leader !== undefined) {
-            leader.leaderTime = 1;
-            this.leaderTime = 0;
+            leader.isLeader = true;
             this.leader = leader;
         }
     }
 
     if (this.leader === null) {
-        if (this.leaderTime > 0) {
-            this.leaderTime++;
-        }
-
-        // Reset leader after a bit. (320 frames is 10 seconds)
-        if (this.leaderTime > 3000) {
-            this.leaderTime = 0;
-        }
-
-        // This particle may now be leading - break execution.
         return;
     }
 
-    // if (this.leader.nodes === undefined) {
-    if (this.leader.leaderTime === 0 && this.leader.leader === null) {
+    if (this.leader.nodes === undefined) {
         this.leader = null;
         return;
     }
 
-    this.leaderTime = 0;
-
-    // Visit next node to keep chains of leaders short.
     if (this.leader.leader !== null) {
         this.leader = this.leader.leader;
     }
 
+    if (this.isLeader) {
+        this.isLeader = false;
+    }
+
     // Beware of circular leadership, where a leader sees its tail.
     if (this.leader.id === this.id) {
         this.leader = null;
@@ -210,20 +197,16 @@ function look(arc, grids) {
     const { global, vision } = grids;
 
     return vision.reduce((acc, point) => {
-        point.touch = false;
-
         const x = arc.endX + point.x;
         const y = arc.endY + point.y;
         const p = global.getPoint({ x, y, type: ENTITIES.PARTICLE });
 
         if (p) {
             acc.particles.push(p);
-            point.touch = true;
         }
 
         if (global.getPoint({ x, y, type: ENTITIES.HAZARD })) {
             acc.hazards.push({ x, y });
-            point.touch = true;
         }
 
         return acc;
@@ -315,21 +298,19 @@ function updateVisionGrid(arc, config, grids) {
 }
 
 // ===== DOM RENDERING =====
-function repaintContainer(node, arc, leaderTime) {
+function repaintContainer(node, arc) {
     node.style.left = `${arc.endX}px`;
     node.style.top = `${arc.endY}px`;
-
-    // node.style.zIndex = (leaderTime > 0 ? 2000 : 2);
 }
 
-function repaintBody(node, arc, leaderTime) {
+function repaintBody(node, arc, isLeader) {
     const rad = arc.clockwise
         ? RAD.t180 - arc.theta
         : RAD.t360 - arc.theta;
 
     node.style.transform = `rotate(${rad + RAD.t45}rad)`;
 
-    // node.style.border = (leaderTime > 0 ? '3px dotted #fff' : '');
+    isLeader ? node.style.outline = '1px solid red' : node.style.outline = '';
 }
 
 function repaintCircle(node, arc) {
@@ -355,7 +336,7 @@ function repaintVisionGrid(nodes, arc, grids) {
         nodes[i].style.left = `${x}px`;
         nodes[i].style.top = `${y}px`;
 
-        nodes[i].style.border = (touch ? '1px solid red' : '0');
+        nodes[i].style.border = (touch ? '2px solid red' : '0');
     });
 }