Goto algo work.

js/animation.js

@@ -0,0 +1,77 @@
+import Rx, { Observable } from 'rxjs';
+import Grid from './grid';
+import Particle from './particle';
+import Controls from './controls';
+import { CONTROLS, ENTITIES } from './enums';
+
+function Animation() {
+
+    // TODO remove bottom padding from Disqus
+    // TODO fix "hangup" small radius evade bug
+    // TODO don't load simulation until requested
+    // TODO sort out particle nextframe
+
+    // TODO ANIM1ab free movement
+
+    // TODO ANIM3a streamline updateLeader
+    // TODO ANIM3b separation
+    // TODO ANIM3c alignment
+};
+
+Animation.prototype.destroy = function() {
+
+}
+
+Animation.prototype.subscriber = function({ key, value }) {
+    switch(key) {
+        case CONTROLS.ANIMATING: this.updateAnimating(value); break;
+        case CONTROLS.COUNT: this.updateCount(value); break;
+        case CONTROLS.SPEED: this.updateSpeed(value); break;
+    }
+}
+
+Animation.prototype.nextFrame = function() {
+    this.particles.forEach(p => {
+        const prevX = p.arc.endX;
+        const prevY = p.arc.endY;
+
+        p.nextFrame();
+
+        this.grid.deletePoint({ x: prevX, y: prevY, type: ENTITIES.PARTICLE });
+        this.grid.setPoint({ x: p.arc.endX, y: p.arc.endY, type: ENTITIES.PARTICLE }, p);
+    });
+}
+
+Animation.prototype.updateAnimating = function(isAnimating) {
+    this.options.animating = isAnimating;
+
+    if (isAnimating) {
+        const fps$ = Rx.Observable.interval(1000 / 32)
+            .takeWhile(_ => this.options.animating);
+
+        fps$.subscribe(this.nextFrame.bind(this));
+    }
+}
+
+Animation.prototype.updateCount = function(count) {
+    const bounds = this.container.getBoundingClientRect();
+
+    while (this.particles.length > count) {
+        const p = this.particles.pop();
+        this.grid.deletePoint({ x: p.arc.endX, y: p.arc.endY, type: ENTITIES.PARTICLE });
+        p.remove();
+    }
+
+    while (this.particles.length < count) {
+        const p = new Particle(this.container, bounds, this.options, this.grid);
+        this.grid.setPoint({ x: p.arc.endX, y: p.arc.endY, type: ENTITIES.PARTICLE }, p);
+        this.particles.push(p);
+    }
+}
+
+Animation.prototype.updateSpeed = function(value) {
+    this.options.speed = value;
+    this.particles.forEach(p => p.updateConfig({ speed: value }));
+}
+
+export default Animation;

js/animation3a.js

@@ -6,7 +6,6 @@ import { CONTROLS, ENTITIES } from './enums';
 
 function Animation3a() {
     this.options = {
-        cohesion: true,
         count: 400,
         maxCount: 1000,
         showVisionGrid: false,
@@ -24,19 +23,7 @@ function Animation3a() {
 
     controls.mount().subscribe(this.subscriber.bind(this));
 
-    this.updateAnimating(this.options.animating);
     this.updateCount(this.options.count);
-
-    // TODO remove bottom padding from Disqus
-    // TODO fix "hangup" small radius evade bug
-    // TODO don't load simulation until requested
-    // TODO sort out particle nextframe
-
-    // TODO ANIM1ab free movement
-
-    // TODO ANIM3a streamline updateLeader
-    // TODO ANIM3b separation
-    // TODO ANIM3c alignment
 };
 
 Animation3a.prototype.subscriber = function({ key, value }) {

js/arc.js

@@ -10,6 +10,8 @@ const Arc = {
             endX: 0,
             endY: 0,
             length: Random.num(RAD.t90, RAD.t360),
+            prevEndX: 0,
+            prevEndY: 0,
             radius: Random.num(100, 200),
             theta: Random.num(RAD.t90, RAD.t360)
         };
@@ -41,6 +43,9 @@ const Arc = {
         arc.cosTheta = Math.cos(arc.theta);
         arc.sinTheta = Math.sin(arc.theta);
 
+        arc.prevEndX = arc.endX;
+        arc.prevEndY = arc.endY;
+
         arc.endX = arc.centerX + arc.radius * arc.cosTheta;
         arc.endY = arc.centerY - arc.radius * arc.sinTheta;
 
@@ -122,6 +127,23 @@ const Arc = {
         return arc;
     },
 
+    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;
+
+        if (currD < 10) {
+            throw new Error(`Arc end of (${arc.endX},${arc.endY}) is within 50px of (${x},${y})`);
+        } else if (ratio < 0.8) {
+            // arc = (ratio < 0 ? Arc.reverse(arc) : arc);
+            arc = Arc.changeRadius(arc, 20);
+        } else {
+            arc = Arc.changeRadius(arc, 400);
+        }
+
+        return arc;
+    },
+
     evade: function(arc) {
         arc = Arc.changeRadius(arc, 20);
         arc.length = 1;

js/index.js

@@ -1,10 +1,10 @@
 import Rx, { Observable } from 'rxjs';
 import Controls from './controls';
-// import Animation1a from './animation1a';
+import Animation1a from './animation1a';
-// import Animation1b from './animation1b';
+import Animation1b from './animation1b';
 import Animation2a from './animation2a';
 import Animation2b from './animation2b';
-// import Animation3a from './animation3a';
+import Animation3a from './animation3a';
 
 require('../css/reset.scss');
 require('../css/index.scss');
@@ -12,9 +12,9 @@ require('../css/particle.scss');
 require('../css/controls.scss');
 
 window.addEventListener('load', () => {
-    // new Animation1a();
+    new Animation1a();
     // new Animation1b();
-    new Animation2a();
+    // new Animation2a();
-    new Animation2b();
+    // new Animation2b();
     // new Animation3a();
 });

js/particle.js

@@ -7,7 +7,7 @@ import Random from './random';
 
 function Particle(parent, bounds, config, globalGrid) {
     this.config = Object.assign({}, {
-        behavior: BEHAVIOR.FREE,
+        behavior: BEHAVIOR.COHESION,
         bounds,
         color: Random.color(),
         gridSize: 5,
@@ -40,8 +40,19 @@ function Particle(parent, bounds, config, globalGrid) {
     this.isLeader = false;
 
     this.arc = Arc.create(bounds, this.grids.global);
+    console.error('starting', this.arc)
     this.updateConfig(this.config);
     this.nextFrame(globalGrid);
+
+
+    const point = document.createElement('div');
+    point.style.height = '10px'
+    point.style.width = '10px'
+    point.style.background = 'red'
+    point.style.position = 'absolute'
+    point.style.left = '200px'
+    point.style.top = '200px'
+    this.nodes.parent.appendChild(point);
 };
 
 // ===== PROTOTYPE =====
@@ -53,22 +64,24 @@ Particle.prototype.remove = function() {
 }
 
 Particle.prototype.nextFrame = function() {
-    this.arc = Arc.step(this.arc, this.config.bounds, this.config.speed);
+    this.arc = Arc.goto(this.arc, 200, 200, 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.grids.vision = updateVisionGrid(this.arc, this.config, this.grids);
-    const { hazards, particles } = look(this.arc, this.grids);
 
-    if (hazards.length > 0) {
+    this.arc = Arc.step(this.arc, this.config.bounds, this.config.speed);
-        this.arc = Arc.evade(this.arc);
-    }
 
-    this.updateLeader(particles);
+    // 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.grids.vision = updateVisionGrid(this.arc, this.config, this.grids);
+    // const { hazards, particles } = look(this.arc, this.grids);
+    //
+    // if (hazards.length > 0) {
+    //     this.arc = Arc.evade(this.arc);
+    // }
+    //
+    // this.updateLeader(particles);
 
     repaintContainer(this.nodes.container, this.arc);
     repaintBody(this.nodes.body, this.arc, this.isLeader);