Hazards.

css/index.scss

@@ -28,14 +28,21 @@
     z-index: 0;
 }
 
-// .palette {
+.hazard {
-//     background: url('../res/palette.svg');
+    // background: url('../res/palette.svg');
-//     background-size: 167px 100px;
+    // background-size: 167px 100px;
-//     height: 100px;
+    background: red;
-//     position: absolute;
+    position: absolute;
-//     width: 167px;
+}
-// }
+
-//
+.hazard-dot {
+    background: yellow;
+    height: 2px;
+    margin: 1px 0 0 1px;
+    position: absolute;
+    width: 2px;
+}
+
 // .highlight {
 //     $h: 30px;
 //     animation: pulse 0.5s 1;

css/style.css

@@ -30,6 +30,17 @@ body {
   position: relative;
   width: 100%;
   z-index: 0; }
+
+.hazard {
+  background: red;
+  position: absolute; }
+
+.hazard-dot {
+  background: yellow;
+  height: 2px;
+  margin: 1px 0 0 1px;
+  position: absolute;
+  width: 2px; }
 .particle-container {
   position: absolute;
   z-index: 1; }

js/animation2a.js

@@ -18,6 +18,7 @@ function Animation2a() {
     this.bounds = this.container.getBoundingClientRect();
 
     this.particles = [];
+    this.globalGrid = createGlobalGrid(this.container, this.bounds);
 
     const controls = new Controls(
         document.getElementById('controls2a'),
@@ -33,16 +34,16 @@ function Animation2a() {
     // TODO remove bottom padding from Disqus
     // TODO perf - cache trig or perform operations
     // TODO move animating into controls
-    // TODO particle evade
+    // TODO no randomize control except anim1
 
-    // TODO ANIM2 put pallettes in animation
+    // TODO ANIM2 put hazards in animation
-    // TODO ANIM2a Show vision grid (including touches!)
+    // TODO ANIM2 particle evade
+    // TODO ANIM2 style hazards
+    // TODO ANIM2a randomize hazards
+    // TODO ANIM2a Vision grid touches
     // TODO ANIM2b Scale vision grid to 1000? particles
 
-    // TODO ANIM4 Pallet avoidance
+    // TODO ANIM3 Flocking
-    // TODO ANIM4 Lots of particles
-
-    // TODO ANIM5 Flocking
 };
 
 Animation2a.prototype.subscriber = function({ key, value }) {
@@ -90,4 +91,48 @@ Animation2a.prototype.updateSpeed = function(value) {
     this.particles.forEach(p => p.updateOptions({ speed: value }));
 }
 
+function createGlobalGrid(container, bounds) {
+    const grid = {};
+    const gridSize = 5;
+
+    const hazards = [
+        { x: 100, y: 100, w: 100, h: 100 },
+        { x: 200, y: 200, w: 100, h: 100 },
+        { x: 600, y: 200, w: 100, h: 100 },
+    ];
+
+    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 Animation2a;