Moving vision grid inside particle container.

js/animation2a.js

@@ -32,11 +32,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 ANIM2a randomize hazards
-    // TODO vision grid be relative to the particle
-    // TODO ANIM2b Scale vision grid to 1000 particles
+    // TODO ANIM2b perf Scale vision grid to 1000 particles
 
     // TODO ANIM3 flocking
 };

js/particle.js

@@ -48,14 +48,11 @@ function Particle(parent, bounds, config, globalGrid) {
 
 Particle.prototype.remove = function() {
     this.nodes.parent.removeChild(this.nodes.container);
-
-    this.nodes.visionGrid.forEach(node => this.nodes.parent.removeChild(node));
-
     return this;
 }
 
 Particle.prototype.nextFrame = function() {
-    this.arc = updateArc(this.arc, this.config);
+    this.arc = stepArc(this.arc, this.config);
     this.grids.vision = updateVisionGrid(this.arc, this.config, this.grids);
 
     this.arc = evade(this.arc, this.grids.vision);
@@ -185,7 +182,7 @@ function createVisionGridNodes(config, grids, nodes) {
         const div = document.createElement('div');
         div.className = 'particle-vision-dot';
         div.style.backgroundColor = config.color;
-        nodes.parent.appendChild(div);
+        nodes.container.appendChild(div);
 
         acc.push(div);
 
@@ -195,7 +192,7 @@ function createVisionGridNodes(config, grids, nodes) {
 
 // ===== CALCULATIONS =====
 
-function updateArc(arc, { bounds, randomize, speed }) {
+function stepArc(arc, { bounds, randomize, speed }) {
     // Randomly change radius and rotation direction.
     if (arc.length <= 0) {
         arc.length = random.num(RAD.t90, RAD.t360);
@@ -205,7 +202,7 @@ function updateArc(arc, { bounds, randomize, speed }) {
 
             if (random.bool(0.8)) {
                 arc.clockwise = !arc.clockwise;
-                arc = changeDirection(arc);
+                arc = reverseArc(arc);
             }
         }
     }
@@ -226,29 +223,6 @@ function updateArc(arc, { bounds, randomize, speed }) {
     return arc;
 }
 
-function updateVisionGrid(arc, config, grids) {
-    const { global, vision } = grids;
-
-    return vision.reduce((acc, point) => {
-        const rad = arc.clockwise
-            ? arc.theta + point.alpha + RAD.t180
-            : arc.theta + point.alpha;
-
-        const x = point.r * Math.cos(rad);
-        const y = point.r * Math.sin(rad);
-
-        point.x = arc.endX + x;
-        point.y = arc.endY - y;
-
-        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);
-    }, []);
-}
-
 function overflowArc(arc, bounds) {
     if (arc.endX < 0) {
         arc.endX += bounds.width;
@@ -281,7 +255,7 @@ function moveArc(arc, newRadius) {
     return arc;
 }
 
-function changeDirection(arc) {
+function reverseArc(arc) {
     arc.theta = (arc.theta + RAD.t180) % RAD.t360;
     arc.centerX -= (2 * arc.radius) * Math.cos(arc.theta);
     arc.centerY += (2 * arc.radius) * Math.sin(arc.theta);
@@ -289,6 +263,29 @@ function changeDirection(arc) {
     return arc;
 }
 
+function updateVisionGrid(arc, config, grids) {
+    const { global, vision } = grids;
+
+    return vision.reduce((acc, point) => {
+        const rad = arc.clockwise
+            ? point.alpha - arc.theta
+            : point.alpha - arc.theta + RAD.t180;
+
+        point.x = point.r * Math.cos(rad);
+        point.y = point.r * Math.sin(rad);
+
+        const x = arc.endX + point.x;
+        const y = arc.endY + point.y;
+
+        const gridX = x - x % 5;
+        const gridY = y - y % 5;
+
+        point.touch = (global[gridX] !== undefined && global[gridX][gridY] !== undefined);
+
+        return acc.concat(point);
+    }, []);
+}
+
 // ===== ACTIONS =====
 function evade(arc, visionGrid) {
     const danger = visionGrid.reduce((acc, v) => acc || v.touch, false);