Only allowing randomization UI option on 1a.

js/animation1a.js

@@ -7,7 +7,7 @@ import { CONTROLS } from './enums';
 function Animation1a() {
     this.options = {
         count: 1,
-        maxCount: 25,
+        maxCount: 10,
         randomize: true,
         showMovementCircle: true,
         speed: 4
@@ -17,24 +17,29 @@ function Animation1a() {
     this.bounds = this.container.getBoundingClientRect();
 
     this.movementCircleCtrl = createMovementCircleControl();
+    this.randomizeCtrl = createRandomizeControl();
 
     this.particles = [];
 
     const controls = new Controls(
         document.getElementById('controls1a'),
         this.options,
-        [this.movementCircleCtrl]
+        [this.movementCircleCtrl, this.randomizeCtrl]
     );
 
     const circle$ = Rx.Observable.fromEvent(this.movementCircleCtrl, 'change')
         .map(evt => ({ key: CONTROLS.MOVEMENT_CIRCLE, value: evt.target.checked }));
 
-    const eventStack$ = controls.mount().merge(circle$);
+    const randomize$ = Rx.Observable.fromEvent(this.randomizeCtrl, 'change')
+        .map(evt => ({ key: CONTROLS.RANDOMIZE, value: evt.target.checked }));
+
+    const eventStack$ = controls.mount().merge(circle$, randomize$);
 
     eventStack$.subscribe(this.subscriber.bind(this));
 
     this.updateCount(this.options.count);
     this.updateMovementCircle(this.options.showMovementCircle);
+    this.updateRandomize(this.options.randomize);
 };
 
 function createMovementCircleControl() {
@@ -55,6 +60,25 @@ function createMovementCircleControl() {
     return label;
 }
 
+function createRandomizeControl(value) {
+    const label = document.createElement('label');
+    label.className = 'controls-checkbox';
+
+    const text = document.createElement('span');
+    text.innerHTML = 'Randomize movement';
+    text.className = 'controls-checkbox-text';
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.className = 'controls-checkbox-input';
+    checkbox.checked = value;
+
+    label.appendChild(checkbox);
+    label.appendChild(text);
+
+    return label;
+}
+
 Animation1a.prototype.subscriber = function({ key, value }) {
     switch(key) {
         case CONTROLS.ANIMATING: this.updateAnimating(value); break;
@@ -99,6 +123,7 @@ Animation1a.prototype.updateMovementCircle = function(value) {
 
 Animation1a.prototype.updateRandomize = function(value) {
     this.options.randomize = value;
+    this.randomizeCtrl.querySelector('[type=checkbox]').checked = value;
     this.particles.forEach(p => p.updateConfig({ randomize: value }));
 }
 

js/animation1b.js

@@ -31,7 +31,6 @@ Animation1b.prototype.subscriber = function({ key, value }) {
     switch(key) {
         case CONTROLS.ANIMATING: this.updateAnimating(value); break;
         case CONTROLS.COUNT: this.updateCount(value); break;
-        case CONTROLS.RANDOMIZE: this.updateRandomize(value); break;
         case CONTROLS.SPEED: this.updateSpeed(value); break;
     }
 }
@@ -62,11 +61,6 @@ Animation1b.prototype.updateCount = function(count) {
     }
 }
 
-Animation1b.prototype.updateRandomize = function(value) {
-    this.options.randomize = value;
-    this.particles.forEach(p => p.updateConfig({ randomize: value }));
-}
-
 Animation1b.prototype.updateSpeed = function(value) {
     this.options.speed = value;
     this.particles.forEach(p => p.updateConfig({ speed: value }));

js/animation2a.js

@@ -33,11 +33,9 @@ function Animation2a() {
     // TODO X dimension modified by core UI, maybe recalc grid in animation start?
     // TODO remove bottom padding from Disqus
     // TODO perf - cache trig or perform operations
-    // TODO only randomize movement on 1a
 
     // TODO ANIM2a randomize hazards
-    // TODO can the vision grid be relative to the particle
-    // TODO ANIM2 particle evade
+    // TODO vision grid be relative to the particle
     // TODO ANIM2b Scale vision grid to 1000 particles
 
     // TODO ANIM3 flocking
@@ -47,7 +45,6 @@ Animation2a.prototype.subscriber = function({ key, value }) {
     switch(key) {
         case CONTROLS.ANIMATING: this.updateAnimating(value); break;
         case CONTROLS.COUNT: this.updateCount(value); break;
-        case CONTROLS.RANDOMIZE: this.updateRandomize(value); break;
         case CONTROLS.SPEED: this.updateSpeed(value); break;
     }
 }
@@ -78,11 +75,6 @@ Animation2a.prototype.updateCount = function(count) {
     }
 }
 
-Animation2a.prototype.updateRandomize = function(value) {
-    this.options.randomize = value;
-    this.particles.forEach(p => p.updateConfig({ randomize: value }));
-}
-
 Animation2a.prototype.updateSpeed = function(value) {
     this.options.speed = value;
     this.particles.forEach(p => p.updateConfig({ speed: value }));

js/controls.js

@@ -1,17 +1,15 @@
 import Rx, { Observable } from 'rxjs';
 import { CONTROLS } from './enums';
 
-function Controls(container, { animating, count, maxCount, randomize, speed }, customNodes) {
+function Controls(container, { animating, count, maxCount, speed }, customNodes) {
     this.nodes = {
         animating: createAnimatingControl(animating),
         count: createCountControl(count, maxCount),
-        randomize: createRandomizeControl(randomize),
         speed: createSpeedControl(speed),
     }
 
     container.appendChild(this.nodes.count);
     container.appendChild(this.nodes.speed);
-    container.appendChild(this.nodes.randomize);
 
     if (customNodes !== undefined) {
         customNodes.forEach(node => { container.appendChild(node); });
@@ -21,7 +19,6 @@ function Controls(container, { animating, count, maxCount, randomize, speed }, c
 
     this.updateOptions({ key: CONTROLS.ANIMATING, value: animating });
     this.updateOptions({ key: CONTROLS.COUNT, value: count });
-    this.updateOptions({ key: CONTROLS.RANDOMIZE, value: randomize });
     this.updateOptions({ key: CONTROLS.SPEED, value: speed });
 }
 
@@ -49,16 +46,12 @@ Controls.prototype.mount = function(customNodes) {
     const count$ = Rx.Observable.fromEvent(this.nodes.count, 'input')
         .map(evt => ({ key: CONTROLS.COUNT, value: evt.target.value * 1 }));
 
-    const randomize$ = Rx.Observable.fromEvent(this.nodes.randomize, 'change')
-        .map(evt => ({ key: CONTROLS.RANDOMIZE, value: evt.target.checked }));
-
     const speed$ = Rx.Observable.fromEvent(this.nodes.speed, 'input')
         .map(evt => ({ key: CONTROLS.SPEED, value: evt.target.value * 1 }));
 
     const eventStack$ = Rx.Observable.merge(
         animating$,
         count$,
-        randomize$,
         speed$
     );
 
@@ -106,25 +99,6 @@ function createCountControl(value, max) {
     return label;
 }
 
-function createRandomizeControl(value) {
-    const label = document.createElement('label');
-    label.className = 'controls-checkbox';
-
-    const text = document.createElement('span');
-    text.innerHTML = 'Randomize movement';
-    text.className = 'controls-checkbox-text';
-
-    const checkbox = document.createElement('input');
-    checkbox.type = 'checkbox';
-    checkbox.className = 'controls-checkbox-input';
-    checkbox.checked = value;
-
-    label.appendChild(checkbox);
-    label.appendChild(text);
-
-    return label;
-}
-
 function createSpeedControl(value) {
     const label = document.createElement('label');
     label.className = 'controls-range';
@@ -135,7 +109,7 @@ function createSpeedControl(value) {
     const slider = document.createElement('input');
     slider.type = 'range';
     slider.min = 1;
-    slider.max = 20;
+    slider.max = 15;
     slider.value = value;
     slider.className = 'controls-range-input';
 

js/index.js

@@ -9,6 +9,6 @@ require('../css/index.scss');
 require('../css/particle.scss');
 require('../css/controls.scss');
 
-// new Animation1a();
-// new Animation1b();
+new Animation1a();
+new Animation1b();
 new Animation2a();

js/particle.js

@@ -27,7 +27,7 @@ function Particle(parent, bounds, config, globalGrid) {
         vision: createVisionGrid(this.config)
     };
 
-    this.arc = createArc(bounds, globalGrid, this.config); // TODO no need to pass config after testing
+    this.arc = createArc(bounds, this.grids, this.config); // TODO no need to pass config after testing
 
     this.nodes = {
         body: createBodyNode(this.config),
@@ -92,7 +92,7 @@ Particle.prototype.updateConfig = function(config) {
 
 // ===== CREATION =====
 
-function createArc(bounds, globalGrid, config) {
+function createArc(bounds, grids, config) {
     let arc = {
         centerX: random.num(0, bounds.width),
         centerY: random.num(0, bounds.height),
@@ -113,8 +113,8 @@ function createArc(bounds, globalGrid, config) {
     const y = arc.endY - arc.endY % 5;
 
     // If starting in a hazard, recurse.
-    if (globalGrid[x] !== undefined && globalGrid[x][y] !== undefined) {
-        arc = createArc(bounds, globalGrid, config);
+    if (grids.global[x] !== undefined && grids.global[x][y] !== undefined) {
+        arc = createArc(bounds, grids, config);
     }
 
     return arc;