Vision grid touches finished.

js/particle.js

@@ -43,7 +43,6 @@ function Particle(parent, bounds, config, globalGrid) {
         circle: undefined,
         container: createContainerNode(this.config),
         parent,
-        vision: undefined,
         visionGrid: undefined,
     };
 
@@ -68,7 +67,6 @@ Particle.prototype.nextFrame = function() {
     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.arc, this.grids);
 }
 
@@ -87,15 +85,11 @@ Particle.prototype.updateConfig = function(config) {
         delete this.nodes.circle;
     }
 
-    if (showVisionGrid === true && this.nodes.vision === undefined) {
-        this.nodes.vision = createVisionNode(config, this.grids);
+    if (showVisionGrid === true && this.nodes.visionGrid === undefined) {
         this.nodes.visionGrid = createVisionGridNodes(this.config, this.grids, this.nodes);
-        this.nodes.container.appendChild(this.nodes.vision);
     }
 
-    if (showVisionGrid === false && this.nodes.vision !== undefined) {
-        this.nodes.container.removeChild(this.nodes.vision);
-        delete this.nodes.vision;
+    if (showVisionGrid === false && this.nodes.visionGrid !== undefined) {
         delete this.nodex.visionGrid;
     }
 }
@@ -126,17 +120,6 @@ function createContainerNode(config) {
     return node;
 }
 
-function createVisionNode(config) {
-    if (config.showVisionGrid === false) {
-        return undefined;
-    }
-
-    const node = document.createElement('div');
-    node.className = 'particle-vision';
-
-    return node;
-}
-
 function createVisionGrid(config) {
     if (config.showVisionGrid === false) {
         return [];
@@ -163,7 +146,7 @@ function createVisionGrid(config) {
 
             let alpha = Math.atan(y / x);
             if (x < 0) {
-                alpha = RAD.t180 + alpha;
+                alpha = RAD.t180 + alpha; // TODO +=
             }
 
             points.push({ x, y, r, alpha, touch: false });
@@ -182,7 +165,7 @@ function createVisionGridNodes(config, grids, nodes) {
         const div = document.createElement('div');
         div.className = 'particle-vision-dot';
         div.style.backgroundColor = config.color;
-        nodes.vision.appendChild(div);
+        nodes.parent.appendChild(div);
 
         acc.push(div);
 
@@ -242,18 +225,19 @@ function updateVisionGrid(arc, config, grids) {
 
     return vision.reduce((acc, point) => {
         const rad = arc.clockwise
-            ? arc.theta - point.alpha
-            : arc.theta - point.alpha + RAD.t180;
+            ? arc.theta + point.alpha + RAD.t180
+            : arc.theta + point.alpha;
 
-        point.x = point.r * Math.cos(rad) + config.visionRadius;
-        point.y = -point.r * Math.sin(rad) + config.visionRadius;
+        const x = point.r * Math.cos(rad);
+        const y = point.r * Math.sin(rad);
 
-        // console.warn(point.alpha, point.alpha + arc.theta)
+        point.x = arc.endX + x;
+        point.y = arc.endY - y;
 
-        // const gridX = point.x - point.x % 5;
-        // const gridY = point.y - point.y % 5;
+        const gridX = point.x - point.x % 5;
+        const gridY = point.y - point.y % 5;
 
-        // point.touch = (global[gridX] !== undefined && global[gridX][gridY] !== undefined);
+        point.touch = (global[gridX] !== undefined && global[gridX][gridY] !== undefined);
 
         return acc.concat(point);
     }, []);
@@ -307,16 +291,6 @@ function repaintCircle(node, arc) {
     node.style.borderRadius = `${arc.radius}px`;
 }
 
-function repaintVision(node, arc) {
-    if (node === undefined) {
-        return;
-    }
-
-    const rad = arc.clockwise
-        ? RAD.t180 - arc.theta
-        : RAD.t360 - arc.theta;
-}
-
 function repaintVisionGrid(nodes, arc, grids) {
     if (nodes === undefined) {
         return;