Added darkness layer

06/animate.js

@@ -1,6 +1,6 @@
 
-const WIDTH = 400;
-const HEIGHT = 400;
+const WIDTH = 800;
+const HEIGHT = 800;
 const NCRITTERS = 10;
 const CLOSE = 20;
 const BOUNCE = 0.02;
@@ -9,6 +9,8 @@ const pointer = { x: 0, y: 0 };
 
 const critters = [];
 
+let lights = "off";
+
 function dist(c1, c2) {
     const dx = c1.x - c2.x;
     const dy = c1.y - c2.y;
@@ -82,12 +84,23 @@ document.addEventListener('DOMContentLoaded', () => {
             c.init(i);
             c.update();
             critters.push(c);
-            console.log(`added critter ${i}`);
         }
+
+        svg.addEventListener("click", () => {
+            const dark = document.getElementById("dark");
+            if( lights === "on" ) {
+                lights = "off";
+                dark.setAttribute("fill-opacity", "0.8");
+            } else {
+                lights = "on";
+                dark.setAttribute("fill-opacity", "0");
+            }
+        });
     } else {
-        console.log("Can't find svg element");
     }
 
+    
+
 });
 
 

06/index.html

@@ -16,6 +16,7 @@
 
 <div id="container">
 <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
+<rect id="dark" x="0" y="0" width="800" height="800" fill="black" fill-opacity="0.8"></rect>
 <circle id="c000" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
 <circle id="c001" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
 <circle id="c002" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>