Randomizing hazard placement.

js/animation2a.js

@@ -2,6 +2,7 @@ import Rx, { Observable } from 'rxjs';
 import Particle from './particle';
 import Grid from './grid';
 import Controls from './controls';
+import Random from './random';
 import { CONTROLS, ENTITIES } from './enums';
 
 function Animation2a() {
@@ -14,7 +15,7 @@ function Animation2a() {
 
     this.container = document.getElementById('animation2a');
     this.particles = [];
-    this.grid = createGlobalGrid(this.container, this.bounds);
+    this.grid = this.createGlobalGrid();
 
     const controls = new Controls(
         document.getElementById('controls2a'),
@@ -68,11 +69,22 @@ Animation2a.prototype.updateSpeed = function(value) {
     this.particles.forEach(p => p.updateConfig({ speed: value }));
 }
 
-function createGlobalGrid(container, bounds) {
+Animation2a.prototype.createGlobalGrid = function() {
+    const bounds = this.container.getBoundingClientRect();
     const grid = new Grid();
 
-    grid.setArea({ x: 100, y: 100, w: 200, h: 200, type: ENTITIES.HAZARD }, container);
-    grid.setArea({ x: 600, y: 200, w: 200, h: 200, type: ENTITIES.HAZARD }, container);
+    for (let i = 0; i < 2; i++) {
+        const w = Random.num(50, 200);
+        const h = Random.num(50, 200);
+
+        grid.setArea({
+            x: Random.num(0, bounds.width - w),
+            y: Random.num(0, bounds.height - h),
+            w,
+            h,
+            type: ENTITIES.HAZARD
+        }, this.container);
+    }
 
     return grid;
 }

js/animation2b.js

@@ -2,6 +2,7 @@ import Rx, { Observable } from 'rxjs';
 import Particle from './particle';
 import Grid from './grid';
 import Controls from './controls';
+import Random from './random';
 import { CONTROLS, ENTITIES } from './enums';
 
 function Animation2b() {
@@ -70,8 +71,18 @@ Animation2b.prototype.updateSpeed = function(value) {
 function createGlobalGrid(container, bounds) {
     const grid = new Grid();
 
-    grid.setArea({ x: 100, y: 100, w: 200, h: 200, type: ENTITIES.HAZARD }, container);
-    grid.setArea({ x: 600, y: 200, w: 200, h: 200, type: ENTITIES.HAZARD }, container);
+    for (let i = 0; i < 2; i++) {
+        const w = Random.num(50, 200);
+        const h = Random.num(50, 200);
+
+        grid.setArea({
+            x: Random.num(0, bounds.width - w),
+            y: Random.num(0, bounds.height - h),
+            w,
+            h,
+            type: ENTITIES.HAZARD
+        }, this.container);
+    }
 
     return grid;
 }

js/animation3a.js

@@ -33,7 +33,6 @@ function Animation3a() {
     // TODO sort out particle nextframe
 
     // TODO ANIM1ab free movement
-    // TODO ANIM2ab randomize hazards
 
     // TODO ANIM3a streamline updateLeader
     // TODO ANIM3b separation