Animation 2b.

index.html

@@ -63,6 +63,15 @@
         <div id="controls2a" class='controlsContainer'></div>
     </div>
 
+    <p>
+        Here's a large scale system.
+    </p>
+
+    <div class='outerContainer'>
+        <div id="animation2b" class='animationContainer'></div>
+        <div id="controls2b" class='controlsContainer'></div>
+    </div>
+
     <script src='js/bundle.js'></script>
 </body>
 </html>

js/animation1b.js

@@ -8,7 +8,6 @@ function Animation1b() {
     this.options = {
         count: 1,
         maxCount: 1000,
-        randomize: false,
         speed: 8
     };
 

js/animation2a.js

@@ -8,8 +8,6 @@ function Animation2a() {
     this.options = {
         count: 1,
         maxCount: 10,
-        randomize: true,
-        showMovementCircle: false,
         showVisionGrid: true,
         speed: 4
     };
@@ -29,14 +27,6 @@ function Animation2a() {
 
     this.updateAnimating(this.options.animating);
     this.updateCount(this.options.count);
-
-    // TODO X dimension modified by core UI, maybe recalc grid in animation start?
-    // TODO remove bottom padding from Disqus
-
-    // TODO ANIM2a randomize hazards
-    // TODO ANIM2b perf Scale vision grid to 1000 particles
-
-    // TODO ANIM3 flocking
 };
 
 Animation2a.prototype.subscriber = function({ key, value }) {

js/animation2b.js

@@ -0,0 +1,122 @@
+import Rx, { Observable } from 'rxjs';
+import Particle from './particle';
+import Store from './store';
+import Controls from './controls';
+import { CONTROLS } from './enums';
+
+function Animation2b() {
+    this.options = {
+        count: 1,
+        maxCount: 1000,
+        speed: 4
+    };
+
+    this.container = document.getElementById('animation2b');
+    this.bounds = this.container.getBoundingClientRect();
+
+    this.particles = [];
+    this.globalGrid = createGlobalGrid(this.container, this.bounds);
+
+    const controls = new Controls(
+        document.getElementById('controls2b'),
+        this.options
+    );
+
+    controls.mount().subscribe(this.subscriber.bind(this));
+
+    this.updateAnimating(this.options.animating);
+    this.updateCount(this.options.count);
+
+    // TODO X dimension modified by core UI, maybe recalc grid in animation start?
+    // TODO remove bottom padding from Disqus
+    // TODO ANIM2ab randomize hazards
+    // TODO fix "hangup" small radius evade bug
+
+    // TODO ANIM2b perf Scale vision grid to 1000 particles
+
+    // TODO ANIM3 flocking
+};
+
+Animation2b.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;
+    }
+}
+
+Animation2b.prototype.nextFrame = function() {
+    this.particles.forEach(p => p.nextFrame());
+}
+
+Animation2b.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));
+    }
+}
+
+Animation2b.prototype.updateCount = function(count) {
+    while (this.particles.length > count) {
+        delete this.particles.pop().remove();
+    }
+
+    while (this.particles.length < count) {
+        const p = new Particle(this.container, this.bounds, this.options, this.globalGrid);
+        this.particles.push(p);
+    }
+}
+
+Animation2b.prototype.updateSpeed = function(value) {
+    this.options.speed = value;
+    this.particles.forEach(p => p.updateConfig({ speed: value }));
+}
+
+function createGlobalGrid(container, bounds) {
+    const grid = {};
+    const gridSize = 5;
+
+    const hazards = [
+        { x: 100, y: 100, w: 200, h: 200 },
+        { x: 600, y: 200, w: 200, h: 200 },
+    ];
+
+    return hazards.reduce((acc, { x, y, w, h }) => {
+        const div = document.createElement('div');
+        div.className = 'hazard';
+        div.style.left = `${x}px`;
+        div.style.top = `${y}px`;
+        div.style.height = `${h}px`;
+        div.style.width = `${w}px`;
+        container.appendChild(div);
+
+        for (let i = x; i <= (x + w); i += gridSize) {
+            for (let j = y; j <= (y + h); j += gridSize) {
+                if (acc[i] === undefined) {
+                    acc[i] = {};
+                }
+
+                if (acc[i][j] !== undefined) {
+                    continue;
+                }
+
+                const dot = document.createElement('dot');
+                dot.className = 'hazard-dot';
+                dot.style.left = `${i - x}px`;
+                dot.style.top = `${j - y}px`;
+                div.appendChild(dot);
+
+                acc[i][j] = true;
+            }
+        }
+
+
+        return acc;
+    }, {});
+}
+
+export default Animation2b;

js/index.js

@@ -3,6 +3,7 @@ import Controls from './controls';
 import Animation1a from './animation1a';
 import Animation1b from './animation1b';
 import Animation2a from './animation2a';
+import Animation2b from './animation2b';
 
 require('../css/reset.scss');
 require('../css/index.scss');
@@ -12,3 +13,4 @@ require('../css/controls.scss');
 new Animation1a();
 new Animation1b();
 new Animation2a();
+new Animation2b();

js/particle.js

@@ -15,7 +15,7 @@ function Particle(parent, bounds, config, globalGrid) {
         bounds,
         color: random.color(),
         gridSize: 5,
-        randomize: false,
+        randomize: true,
         showMovementCircle: false,
         showVisionGrid: false,
         speed: 4,
@@ -214,8 +214,8 @@ function stepArc(arc, { bounds, randomize, speed }) {
     arc.theta += (arc.clockwise ? -delta : +delta);
     arc.theta = (arc.theta > 0 ? arc.theta % RAD.t360 : RAD.t360 + arc.theta);
 
-    arc.endX = arc.centerX + arc.radius * Math.cos(arc.theta);
+    arc.endX = arc.centerX + arc.radius * Math.cos(arc.theta); // TODO perf here
-    arc.endY = arc.centerY - arc.radius * Math.sin(arc.theta);
+    arc.endY = arc.centerY - arc.radius * Math.sin(arc.theta); // TODO perf here
 
     // Overflow.
     arc = overflowArc(arc, bounds);
@@ -248,8 +248,8 @@ function moveArc(arc, newRadius) {
     const r1 = newRadius;
 
     // Moves arc center to new radius while keeping theta constant.
-    arc.centerX -= (r1 - r0) * Math.cos(arc.theta);
+    arc.centerX -= (r1 - r0) * Math.cos(arc.theta); // TODO perf here
-    arc.centerY += (r1 - r0) * Math.sin(arc.theta);
+    arc.centerY += (r1 - r0) * Math.sin(arc.theta); // TODO perf here
     arc.radius = r1;
 
     return arc;
@@ -257,8 +257,8 @@ function moveArc(arc, newRadius) {
 
 function reverseArc(arc) {
     arc.theta = (arc.theta + RAD.t180) % RAD.t360;
-    arc.centerX -= (2 * arc.radius) * Math.cos(arc.theta);
+    arc.centerX -= (2 * arc.radius) * Math.cos(arc.theta); // TODO perf here
-    arc.centerY += (2 * arc.radius) * Math.sin(arc.theta);
+    arc.centerY += (2 * arc.radius) * Math.sin(arc.theta); // TODO perf here
 
     return arc;
 }
@@ -322,8 +322,8 @@ function repaintCircle(node, arc) {
     node.style.width = `${2 * arc.radius}px`;
     node.style.height = `${2 * arc.radius}px`;
 
-    node.style.left = `-${arc.radius + arc.radius * Math.cos(arc.theta)}px`;
+    node.style.left = `-${arc.radius + arc.radius * Math.cos(arc.theta)}px`;  // TODO perf here
-    node.style.top = `-${arc.radius - arc.radius * Math.sin(arc.theta)}px`;
+    node.style.top = `-${arc.radius - arc.radius * Math.sin(arc.theta)}px`;   // TODO perf here
 
     node.style.borderRadius = `${arc.radius}px`;
 }