added link

Author: laxman-patel

src/index.html

@@ -71,6 +71,12 @@ <h2>Controls</h2>
           id="cohesionSlider"
         />
       </div>
+      <a
+        class="anchor"
+        target="_blank"
+        href="https://en.wikipedia.org/wiki/Boids"
+        >What is this?</a
+      >
     </div>
     <button onclick="showMenu()" class="menuOpen">
       <p>🍔</p>

src/scripts/index.js

@@ -39,6 +39,8 @@ export let c = canvas.getContext("2d");
 let boidsArr = [];
 let numBoids = 200;
 
+let showTrails = true;
+
 const colors = ["#ffbe0b", "#fb5607", "#ff006e", "#8338ec", "#3a86ff"];
 
 for (let i = 0; i < numBoids; i++) {
@@ -50,7 +52,7 @@ for (let i = 0; i < numBoids; i++) {
 function animate() {
   requestAnimationFrame(animate);
 
-  c.fillStyle = " rgba(1, 1, 10, 0.2) ";
+  c.fillStyle = `rgba(1, 1, 10,${showTrails ? "0.2" : "1"} )`;
   c.fillRect(0, 0, width, height);
 
   boidsArr.forEach((boid) => {

src/styles/index.scss

@@ -151,3 +151,15 @@ canvas {
     background: rgba(255, 255, 255, 0.4);
   }
 }
+
+.anchor {
+  margin-top: 10px;
+  color: #2c3e50;
+  text-decoration: none;
+
+  transition: ease-in-out 100ms color;
+
+  &:hover {
+    color: #000;
+  }
+}

todo.md

@@ -0,0 +1,2 @@
+1. add predator logic.
+2. quadtree optimization.