Vision grid iteration.

css/particle.scss

@@ -24,7 +24,7 @@ $visionS: 100px;
 }
 
 .particle-vision {
-    // background: #ddd;
+    // background: #f0f0f0;
     height: $visionS;
     left: -$visionS / 2;
     position: absolute;

js/animation2a.js

@@ -38,7 +38,7 @@ function Animation2a() {
     // TODO ANIM2a Vision grid touches trig transform
     // TODO ANIM2a randomize hazards
     // TODO ANIM2 particle evade
-    // TODO ANIM2b Scale vision grid to 1000? particles
+    // TODO ANIM2b Scale vision grid to 1000 particles
 
     // TODO ANIM3 flocking
 };

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

@@ -63,13 +63,13 @@ Particle.prototype.remove = function() {
 
 Particle.prototype.nextFrame = function() {
     this.arc = updateArc(this.arc, this.config);
-    this.grids.vision = updateVisionGrid(this.arc, this.grids);
+    this.grids.vision = updateVisionGrid(this.arc, this.config, this.grids);
 
     repaintContainer(this.nodes.container, this.arc);
     repaintBody(this.nodes.body, this.arc);
     repaintCircle(this.nodes.circle, this.arc);
     repaintVision(this.nodes.vision, this.arc);
-    repaintVisionGrid(this.nodes.visionGrid, this.grids, this.config);
+    repaintVisionGrid(this.nodes.visionGrid, this.arc, this.grids);
 }
 
 Particle.prototype.updateConfig = function(config) {
@@ -143,25 +143,30 @@ function createVisionGrid(config) {
     }
 
     const { gridSize: side, visionRadius: radius } = config;
-    const r0 = Math.pow(radius, 2);
-    const r1 = Math.pow(radius - side, 2);
+    const r0 = radius;
+    const r1 = radius - side;
 
     const points = [];
 
     for (let x = -radius; x <= radius; x += side) {
         for (let y = -radius; y <= radius; y += side) {
-            // Half of triangle
-            if (x > -y) {
+            // Omit lower half
+            if (y < 0) {
                 continue;
             }
 
-            // Vision band
-            const p = Math.pow(x, 2) + Math.pow(y, 2);
-            if (p > r0 || p < r1) {
+            // Include vision band
+            const r = Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5);
+            if (r > r0 || r < r1) {
                 continue;
             }
 
-            points.push({ x, y, touch: false });
+            let alpha = Math.atan(y / x);
+            if (x < 0) {
+                alpha = RAD.t180 + alpha;
+            }
+
+            points.push({ x, y, r, alpha, touch: false });
         }
     }
 
@@ -177,19 +182,12 @@ function createVisionGridNodes(config, grids, nodes) {
         const div = document.createElement('div');
         div.className = 'particle-vision-dot';
         div.style.backgroundColor = config.color;
-        div.style.left = `${x + config.visionRadius}px`;
-        div.style.top = `${y + config.visionRadius}px`;
-
         nodes.vision.appendChild(div);
 
-        if (acc[x] === undefined) {
-            acc[x] = {};
-        }
-
-        acc[x][y] = div;
+        acc.push(div);
 
         return acc;
-    }, {});
+    }, []);
 }
 
 // ===== CALCULATIONS =====
@@ -239,18 +237,23 @@ function updateArc(arc, { bounds, randomize, speed }) {
     return arc;
 }
 
-function updateVisionGrid(arc, grids) {
+function updateVisionGrid(arc, config, grids) {
     const { global, vision } = grids;
 
     return vision.reduce((acc, point) => {
-        // Location of point on grid
-        const x = Math.round(arc.endX + point.x);
-        const y = Math.round(arc.endY + point.y);
+        const rad = arc.clockwise
+            ? arc.theta - point.alpha
+            : arc.theta - point.alpha + RAD.t180;
 
-        const gridX = x - x % 5;
-        const gridY = y - y % 5;
+        point.x = point.r * Math.cos(rad) + config.visionRadius;
+        point.y = -point.r * Math.sin(rad) + config.visionRadius;
 
-        point.touch = (global[gridX] !== undefined && global[gridX][gridY] !== undefined);
+        // console.warn(point.alpha, point.alpha + arc.theta)
+
+        // const gridX = point.x - point.x % 5;
+        // const gridY = point.y - point.y % 5;
+
+        // point.touch = (global[gridX] !== undefined && global[gridX][gridY] !== undefined);
 
         return acc.concat(point);
     }, []);
@@ -312,17 +315,18 @@ function repaintVision(node, arc) {
     const rad = arc.clockwise
         ? RAD.t180 - arc.theta
         : RAD.t360 - arc.theta;
-
-    node.style.transform = `rotate(${rad + RAD.t45}rad)`;
 }
 
-function repaintVisionGrid(nodes, grids) {
+function repaintVisionGrid(nodes, arc, grids) {
     if (nodes === undefined) {
         return;
     }
 
-    grids.vision.forEach(({ x, y, touch }) => {
-        nodes[x][y].style.border = (touch ? '2px solid red' : '0');
+    grids.vision.forEach(({ x, y, touch }, i) => {
+        nodes[i].style.left = `${x}px`;
+        nodes[i].style.top = `${y}px`;
+
+        nodes[i].style.border = (touch ? '2px solid red' : '0');
     });
 }