Clean up

html/images/space.svg

@@ -85,17 +85,20 @@
     const regex = /(-?\d*\.{0,1}\d+)px/g;
     const bullets = [];
     const halfPi = Math.PI / 2;
+    const maxSpeed = 100;
+
+    const drawCollisionLines = true;
 
     let previous, zero, frameCount = 0;
     let position = [0, 0]; // meters
     let velocity = [0, 0]; // meters per second
     let acceleration = [0, 0]; // meters per second per second
-    // let friction = 7.5;
     let friction = 0;
     let rotate = 0;
     let rotationSpeed = 0.25;
-    const maxSpeed = 100;
     let started = false;
+    let restart = false;
+    let isReadingKeys = true;
 
     const svg = document.querySelector('svg');
     const fps = document.querySelector("#fps");
@@ -106,6 +109,8 @@
     const shipBody = ship.querySelector("circle");
     const bulletsContainer = document.querySelector("#bullets");
     const wall = document.querySelector('#wall');
+    const triangleContainer = document.querySelector('#triangles');
+    const lineContainer = document.querySelector('#edges');
 
     const bulletPt = svg.createSVGPoint();
     const cornerPt = svg.createSVGPoint();
@@ -115,10 +120,8 @@
       return [+x, +y];
     });
 
-    const triangleContainer = document.querySelector('#triangles');
+    const edgePts = wallCorners.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]]);
-    const lineContainer = document.querySelector('#edges');
+    const collisionEdges = findEdges(edgePts, position);
-    const edgePts = wallCorners.map((pt, i) => [pt, wallCorners[(i + 1) % wallCorners.length]]);
-    const drawCollisionLines = true;
 
     function distance(x1, y1, x2, y2) {
       return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
@@ -141,8 +144,6 @@
       });
     }
 
-    drawEdges(edgePts);
-
     function drawTriangles(container, pts, [positionX, positionY]) {
       pts.forEach(([[x1, y1], [x2, y2]]) => {
         const el = document.createElementNS(namespaceURIsvg, 'polygon');
@@ -152,9 +153,6 @@
       });
     }
 
-    drawTriangles(triangleContainer, edgePts, position);
-    const triangles = triangleContainer.querySelectorAll('polygon');
-
     // Triangle has a clockwise orientation
     function isClockwise([xa, ya], [xb, yb], [xc, yc]) {
       // https://en.wikipedia.org/wiki/Curve_orientation#Practical_considerations
@@ -183,12 +181,15 @@
       }, []);
     }
 
-    const collisionEdges = findEdges(edgePts, position);
-
     function updateTriangles([positionX, positionY]) {
       const delim = ' ';
       const className = 'clockwise-orientation';
 
+      if (!triangleContainer.childElementCount)
+        drawTriangles(triangleContainer, edgePts, position);
+
+      const triangles = triangleContainer.querySelectorAll('polygon');
+
       triangles.forEach(t => {
         const attr = t.getAttribute('points').split(delim);
         const [a, b,] = attr.map(t => t.split(','));
@@ -368,8 +369,6 @@
       });
     }
 
-    let start;
-    let restart = false;
     function firstFrame(timestamp) {
       zero = timestamp;
       zeroForTimer = timestamp;
@@ -377,8 +376,6 @@
       animate(timestamp);
     }
 
-    let isReadingKeys = true;
-
     function animate(timestamp) {
       const elapsed = timestamp - previous;
       const delta = timestamp - zero;
@@ -430,8 +427,9 @@
         requestAnimationFrame(t => animate(t));
     }
 
-    let force = 1;
+    drawEdges(edgePts);
 
+    let force = 1;
     let spacePressed = false;
     let upPressed = false;
     let downPressed = false;