Fixing jiggle bug.

js/animation1.js

@@ -20,35 +20,25 @@ function Animation1() {
     this.bounds = this.container.getBoundingClientRect();
 
     this.movementCircleCtrl = createMovementCircleControl();
-    this.randomRadiusCtrl = createRandomRadiusControl();
-    this.randomRotationCtrl = createRandomRotationControl();
 
     this.particles = [];
 
     const controls = new Controls(
         document.getElementById('controls1'),
         this.options,
-        [this.movementCircleCtrl, this.randomRadiusCtrl, this.randomRotationCtrl]
+        [this.movementCircleCtrl]
     );
 
     const circle$ = Rx.Observable.fromEvent(this.movementCircleCtrl, 'change')
         .map(evt => ({ key: CONTROLS.MOVEMENT_CIRCLE, value: evt.target.checked }));
 
-    const radius$ = Rx.Observable.fromEvent(this.randomRadiusCtrl, 'change')
-        .map(evt => ({ key: CONTROLS.RADIUS, value: evt.target.checked }));
+    const eventStack$ = controls.mount().merge(circle$);
 
-    const rotation$ = Rx.Observable.fromEvent(this.randomRotationCtrl, 'change')
-        .map(evt => ({ key: CONTROLS.ROTATION, value: evt.target.checked }));
-
-    const eventStack = controls.mount().merge(circle$, radius$, rotation$);
-
-    eventStack.subscribe(this.subscriber.bind(this));
+    eventStack$.subscribe(this.subscriber.bind(this));
 
     this.updateAnimating(this.options.animating);
     this.updateCount(this.options.count);
     this.updateMovementCircle(this.options.showMovementCircle);
-    this.updateRadius(this.options.randomizeRadius);
-    this.updateRotation(this.options.randomizeRotation);
 };
 
 function createMovementCircleControl() {
@@ -69,44 +59,6 @@ function createMovementCircleControl() {
     return label;
 }
 
-function createRandomRadiusControl(value) {
-    const label = document.createElement('label');
-    label.className = 'controls-checkbox';
-
-    const text = document.createElement('span');
-    text.innerHTML = 'Random radii';
-    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 createRandomRotationControl(value) {
-    const label = document.createElement('label');
-    label.className = 'controls-checkbox';
-
-    const text = document.createElement('span');
-    text.innerHTML = 'Random rotation';
-    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;
-}
-
 Animation1.prototype.subscriber = function({ key, value }) {
     switch(key) {
         case CONTROLS.ANIMATING: this.updateAnimating(value); break;
@@ -146,25 +98,21 @@ Animation1.prototype.updateCount = function(count) {
 }
 
 Animation1.prototype.updateMovementCircle = function(value) {
-    // this.options.showMovementCircle = value;
     this.movementCircleCtrl.querySelector('[type=checkbox]').checked = value;
     this.particles.forEach(p => p.updateOptions({ showMovementCircle: value }));
 }
 
 Animation1.prototype.updateRadius = function(value) {
-    // this.options.randomizeRadius = value;
     this.randomRadiusCtrl.querySelector('[type=checkbox]').checked = value;
     this.particles.forEach(p => p.updateOptions({ randomizeRadius: value }));
 }
 
 Animation1.prototype.updateRotation = function(value) {
-    // this.options.randomizeRotation = value;
     this.randomRotationCtrl.querySelector('[type=checkbox]').checked = value;
     this.particles.forEach(p => p.updateOptions({ randomizeRotation: value }));
 }
 
 Animation1.prototype.updateSpeed = function(speed) {
-    // this.options.speed = speed;
     this.particles.forEach(p => p.updateOptions({ speed }));
 }
 

js/animation2.js

@@ -8,7 +8,7 @@ function Animation2() {
     this.options = {
         animating: false,
         count: 1,
-        maxCount: 3000,
+        maxCount: 2000,
         speed: 4
     };
 
@@ -28,7 +28,6 @@ function Animation2() {
     this.updateCount(this.options.count);
 
     // TODO X dimension modified by core UI
-    // TODO "shaky" / "stuck" bug
 
     // TODO ANIM3 Show vision grid (including touches!)
     // TODO ANIM3 regen vision grid is option updated
@@ -42,6 +41,8 @@ Animation2.prototype.subscriber = function({ key, value }) {
     switch(key) {
         case CONTROLS.ANIMATING: this.updateAnimating(value); break;
         case CONTROLS.COUNT: this.updateCount(value); break;
+        case CONTROLS.RADIUS: this.updateRadius(value); break;
+        case CONTROLS.ROTATION: this.updateRotation(value); break;
         case CONTROLS.SPEED: this.updateSpeed(value); break;
     }
 }
@@ -73,14 +74,15 @@ Animation2.prototype.updateCount = function(count) {
     }
 }
 
-Animation2.prototype.updateMovementCircle = function(showMovementCircle) {
-    this.options.showMovementCircle = showMovementCircle;
-    this.movementCircleCtrl.querySelector('[type=checkbox]').checked = showMovementCircle;
-    this.particles.forEach(p => p.updateOptions({ showMovementCircle }));
+Animation2.prototype.updateRadius = function(value) {
+    this.particles.forEach(p => p.updateOptions({ randomizeRadius: value }));
+}
+
+Animation2.prototype.updateRotation = function(value) {
+    this.particles.forEach(p => p.updateOptions({ randomizeRotation: value }));
 }
 
 Animation2.prototype.updateSpeed = function(speed) {
-    this.options.speed = speed;
     this.particles.forEach(p => p.updateOptions({ speed }));
 }
 

js/controls.js

@@ -1,15 +1,19 @@
 import Rx, { Observable } from 'rxjs';
 import { CONTROLS } from './enums';
 
-function Controls(container, { animating, count, maxCount, speed }, customNodes) {
+function Controls(container, { animating, count, maxCount, randomizeRadius, randomizeRotation, speed }, customNodes) {
     this.nodes = {
         animating: createAnimatingControl(animating),
         count: createCountControl(count, maxCount),
+        radius: createRandomRadiusControl(randomizeRadius),
+        rotation: createRandomRotationControl(randomizeRotation),
         speed: createSpeedControl(speed),
     }
 
     container.appendChild(this.nodes.count);
     container.appendChild(this.nodes.speed);
+    container.appendChild(this.nodes.radius);
+    container.appendChild(this.nodes.rotation);
 
     if (customNodes !== undefined) {
         customNodes.forEach(node => { container.appendChild(node); });
@@ -19,6 +23,8 @@ function Controls(container, { animating, count, maxCount, speed }, customNodes)
 
     this.updateOptions({ key: CONTROLS.ANIMATING, value: animating });
     this.updateOptions({ key: CONTROLS.COUNT, value: count });
+    this.updateOptions({ key: CONTROLS.RADIUS, value: randomizeRadius });
+    this.updateOptions({ key: CONTROLS.ROTATION, value: randomizeRotation });
     this.updateOptions({ key: CONTROLS.SPEED, value: speed });
 }
 
@@ -40,27 +46,35 @@ Controls.prototype.updateOptions = function({ key, value}) {
 }
 
 Controls.prototype.mount = function(customNodes) {
-    const animatingStream = Rx.Observable.fromEvent(this.nodes.animating, 'change')
+    const animating$ = Rx.Observable.fromEvent(this.nodes.animating, 'change')
         .map(evt => ({ key: CONTROLS.ANIMATING, value: evt.target.checked }));
 
-    const countStream = Rx.Observable.fromEvent(this.nodes.count, 'input')
+    const count$ = Rx.Observable.fromEvent(this.nodes.count, 'input')
         .map(evt => ({ key: CONTROLS.COUNT, value: evt.target.value * 1 }));
 
-    const speedStream = Rx.Observable.fromEvent(this.nodes.speed, 'input')
-        .map(evt => ({ key: CONTROLS.SPEED, value: evt.target.value * 1 }));
+    const radius$ = Rx.Observable.fromEvent(this.nodes.radius, 'change')
+        .map(evt => ({ key: CONTROLS.RADIUS, value: evt.target.checked }));
+
+    const rotation$ = Rx.Observable.fromEvent(this.nodes.rotation, 'change')
+        .map(evt => ({ key: CONTROLS.ROTATION, value: evt.target.checked }));
 
-    animatingStream.subscribe(this.updateOptions.bind(this));
-    countStream.subscribe(this.updateOptions.bind(this));
-    speedStream.subscribe(this.updateOptions.bind(this));
+    const speed$ = Rx.Observable.fromEvent(this.nodes.speed, 'input')
+        .map(evt => ({ key: CONTROLS.SPEED, value: evt.target.value * 1 }));
 
-    return Rx.Observable.merge(
-        animatingStream,
-        countStream,
-        speedStream,
+    const eventStack$ = Rx.Observable.merge(
+        animating$,
+        count$,
+        radius$,
+        rotation$,
+        speed$
     );
+
+    eventStack$.subscribe(this.updateOptions.bind(this));
+
+    return eventStack$;
 }
 
-const createAnimatingControl = function(value) {
+function createAnimatingControl(value) {
     const label = document.createElement('label');
     label.className = 'controls-label';
     label.className = 'controls-animating';
@@ -78,7 +92,7 @@ const createAnimatingControl = function(value) {
     return label;
 }
 
-const createCountControl = function(value, max) {
+function createCountControl(value, max) {
     const label = document.createElement('label');
     label.className = 'controls-range';
 
@@ -99,6 +113,45 @@ const createCountControl = function(value, max) {
     return label;
 }
 
+function createRandomRadiusControl(value) {
+    const label = document.createElement('label');
+    label.className = 'controls-checkbox';
+
+    const text = document.createElement('span');
+    text.innerHTML = 'Random radii';
+    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 createRandomRotationControl(value) {
+    const label = document.createElement('label');
+    label.className = 'controls-checkbox';
+
+    const text = document.createElement('span');
+    text.innerHTML = 'Random rotation';
+    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;
+}
+
+
 const createSpeedControl = function(value) {
     const label = document.createElement('label');
     label.className = 'controls-range';

js/particle.js

@@ -39,7 +39,7 @@ function Particle(container, bounds, options) {
 
     this.arc = {
         r: random.num(100, 200),
-        t: random.num(0, RAD.t360),
+        t: random.num(RAD.t90, RAD.t360),
         x: random.num(0, bounds.width),
         y: random.num(0, bounds.height)
     }
@@ -107,10 +107,11 @@ Particle.prototype.move = function() {
     this.interval -= delta;
 
     this.arc.t += (this.particle.clockwise ? -delta : +delta);
-    this.arc.t = (this.arc.t > 0 ? this.arc.t % RAD.t360 : RAD.t360 - this.arc.t);
+    this.arc.t = (this.arc.t > 0 ? this.arc.t % RAD.t360 : RAD.t360 + this.arc.t);
 
     this.particle.x = this.arc.x + this.arc.r * Math.cos(this.arc.t);
     this.particle.y = this.arc.y - this.arc.r * Math.sin(this.arc.t);
+    this.node.setAttribute('data-arc', JSON.stringify(this.arc))
 
     // Overflow.
     if (this.particle.x < 0) {