Better components

hasnainroopawalla · Sep 2, 2023 · 769e516 · 769e516
1 parent a26c8ce
commit 769e516
Show file tree

Hide file tree

Showing 9 changed files with 1,163 additions and 247 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/aco/config.ts b/src/aco/config.ts
@@ -15,7 +15,7 @@ export const config = {
   colonyStrokeWeight: 1,
   colonyTextSize: 20,
   antWanderStrength: 0.2,
-  antMaxSpeed: 2,
+  antMaxSpeed: 2.5,
   antSteeringLimit: 0.1,
   antSize: 4,
   antColor: "#000000",
@@ -32,7 +32,7 @@ export const config = {
   pheromoneSize: 4,
   pheromoneStrokeWeight: 0,
   pheromoneDistanceBetween: 200,
-  pheromoneEvaporationRate: 0.1,
+  pheromoneEvaporationRate: 0.3,
   showHomePheromones: false,
   homePheromoneColorRGB: [26, 166, 236],
   showFoodPheromones: true,

diff --git a/src/aco/sketch.ts b/src/aco/sketch.ts
@@ -4,8 +4,8 @@ import { IConfig } from "./sketch.interface";
 
 let world: World;
 let canvasInteractionEnabled = true;
-const numAnts: number = 100;
-const foodClusterSize: number = 10;
+const numAnts: number = 200;
+const foodClusterSize: number = 7;
 
 export const updateAcoConfig = <T extends keyof IConfig>(
   param: T,
@@ -18,10 +18,14 @@ export const setCanvasInteraction = (interactionEnabled: boolean) =>
 export const sketch = (p: p5) => {
   p.setup = () => {
     p.createCanvas(p.windowWidth, p.windowHeight);
+    p.frameRate(config.frameRate);
     world = new World(p);
     for (let i = 0; i < numAnts; i++) {
       world.createAnt();
     }
+    world.createFoodCluster(250, 250, foodClusterSize);
+    world.createFoodCluster(1000, 150, foodClusterSize);
+    world.createFoodCluster(1020, 550, foodClusterSize);
   };
 
   p.draw = () => {
@@ -32,6 +36,6 @@ export const sketch = (p: p5) => {
     if (!canvasInteractionEnabled) {
       return;
     }
-    world.createFoodCluster(foodClusterSize);
+    world.createFoodCluster(p.mouseX, p.mouseY, foodClusterSize);
   };
 };
diff --git a/src/aco/world.ts b/src/aco/world.ts
@@ -71,8 +71,11 @@ export class World {
     this.ants.push(new Ant(this.p, this.colonies[0], this));
   }
 
-  public createFoodCluster(clusterSize: number = 5) {
-    const [spawnX, spawnY] = [this.p.mouseX, this.p.mouseY];
+  public createFoodCluster(
+    spawnX: number,
+    spawnY: number,
+    clusterSize: number = 5
+  ) {
     for (let i = 0; i < clusterSize; i++) {
       for (let j = 0; j < clusterSize; j++) {
         const foodItem = new FoodItem(
@@ -93,7 +96,6 @@ export class World {
     pheromoneQuadtree.insert(pheromone);
   }
 
-  // TODO: this method should limit the perception to only in FRONT of the ant
   public getFoodItemInAntPerceptionRange(
     antPosition: Vector,
     antPerceptionRange: number

diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -1,4 +1,3 @@
-// TODO: Remove React import
 import React from "react";
 import { ControlPanel } from "./control-panel";
 import { Sketch } from "./sketch-renderer";
@@ -12,6 +11,7 @@ export const App = () => {
         updateAcoConfig={updateAcoConfig}
       />
       <Sketch />
+      {/* Add footer for GitHub source */}
     </>
   );
 };
diff --git a/src/components/control-panel/content.tsx b/src/components/control-panel/content.tsx
@@ -18,17 +18,16 @@ const styles = {
     borderRadius: "0.6rem",
     backgroundColor: "rgba(0, 0, 0, 0.7)",
     overflow: "auto",
-    paddingTop: "60px",
   },
-  closeButton: {
-    padding: "8px",
-    textDecoration: "none",
-    display: "block",
+  controlPanelHeader: {
+    padding: "20px 10px",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    fontSize: "25px",
     color: "#fff",
-    position: "absolute",
-    top: "0",
-    right: "10px",
-    fontSize: "30px",
+  },
+  closeButton: {
     cursor: "pointer",
   },
 } as const;
@@ -38,124 +37,132 @@ export const ControlPanelContent = (props: IControlPanelContentProps) => {
 
   return (
     <div className="control-panel-content" style={styles.controlPanelContent}>
-      <a
-        className="close-button"
-        data-testid="control-panel-close-button"
-        onClick={hideControlPanel}
-        style={styles.closeButton}
-      >
-        &times;
-      </a>
-      {/* TODO: Pass list of SettingItem as a prop */}
-      <SettingItem
-        title={"maxSpeed"}
-        slider={
-          <Slider
-            configParam={"antMaxSpeed"}
-            min={0.1}
-            max={5}
-            step={0.1}
-            defaultValue={config.antMaxSpeed}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
-      <SettingItem
-        title={"wanderStrength"}
-        slider={
-          <Slider
-            configParam={"antWanderStrength"}
-            min={0.1}
-            max={5}
-            step={0.1}
-            defaultValue={config.antWanderStrength}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
-      <SettingItem
-        title={"steeringLimit"}
-        slider={
-          <Slider
-            configParam={"antSteeringLimit"}
-            min={0.1}
-            max={1.0}
-            step={0.1}
-            defaultValue={config.antSteeringLimit}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
-      <SettingItem
-        title={"perceptionRange"}
-        slider={
-          <Slider
-            configParam={"antPerceptionRange"}
-            min={10}
-            max={100}
-            step={1}
-            defaultValue={config.antPerceptionRange}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-        checkbox={
-          <Checkbox
-            configParam={"showAntPerceptionRange"}
-            isChecked={config.showAntPerceptionRange}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
-      <SettingItem
-        title={"showFoodItemsQuadtree"}
-        checkbox={
-          <Checkbox
-            configParam={"showFoodItemsQuadtree"}
-            isChecked={config.showFoodItemsQuadtree}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
-      <SettingItem
-        title={"showHomePheromones"}
-        checkbox={
-          <Checkbox
-            configParam={"showHomePheromones"}
-            isChecked={config.showHomePheromones}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
-      <SettingItem
-        title={"showHomePheromonesQuadtree"}
-        checkbox={
-          <Checkbox
-            configParam={"showHomePheromonesQuadtree"}
-            isChecked={config.showHomePheromonesQuadtree}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
-      <SettingItem
-        title={"showFoodPheromones"}
-        checkbox={
-          <Checkbox
-            configParam={"showFoodPheromones"}
-            isChecked={config.showFoodPheromones}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
-      <SettingItem
-        title={"showFoodPheromonesQuadtree"}
-        checkbox={
-          <Checkbox
-            configParam={"showFoodPheromonesQuadtree"}
-            isChecked={config.showFoodPheromonesQuadtree}
-            updateAcoConfig={updateAcoConfig}
-          />
-        }
-      />
+      <div className="control-panel-header" style={styles.controlPanelHeader}>
+        <div>
+          <span>Ant Colony Simulation</span>
+        </div>
+        <div>
+          <a
+            className="close-button"
+            data-testid="control-panel-close-button"
+            onClick={hideControlPanel}
+            style={styles.closeButton}
+          >
+            &times;
+          </a>
+        </div>
+      </div>
+      <div className="control-panel-items">
+        <SettingItem
+          title={"maxSpeed"}
+          slider={
+            <Slider
+              configParam={"antMaxSpeed"}
+              min={0.1}
+              max={5}
+              step={0.1}
+              defaultValue={config.antMaxSpeed}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+        <SettingItem
+          title={"wanderStrength"}
+          slider={
+            <Slider
+              configParam={"antWanderStrength"}
+              min={0}
+              max={0.3}
+              step={0.01}
+              defaultValue={config.antWanderStrength}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+        <SettingItem
+          title={"steeringLimit"}
+          slider={
+            <Slider
+              configParam={"antSteeringLimit"}
+              min={0.1}
+              max={1.0}
+              step={0.1}
+              defaultValue={config.antSteeringLimit}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+        <SettingItem
+          title={"perceptionRange"}
+          slider={
+            <Slider
+              configParam={"antPerceptionRange"}
+              min={10}
+              max={100}
+              step={1}
+              defaultValue={config.antPerceptionRange}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+          checkbox={
+            <Checkbox
+              configParam={"showAntPerceptionRange"}
+              isChecked={config.showAntPerceptionRange}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+        <SettingItem
+          title={"showFoodItemsQuadtree"}
+          checkbox={
+            <Checkbox
+              configParam={"showFoodItemsQuadtree"}
+              isChecked={config.showFoodItemsQuadtree}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+        <SettingItem
+          title={"showHomePheromones"}
+          checkbox={
+            <Checkbox
+              configParam={"showHomePheromones"}
+              isChecked={config.showHomePheromones}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+        <SettingItem
+          title={"showHomePheromonesQuadtree"}
+          checkbox={
+            <Checkbox
+              configParam={"showHomePheromonesQuadtree"}
+              isChecked={config.showHomePheromonesQuadtree}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+        <SettingItem
+          title={"showFoodPheromones"}
+          checkbox={
+            <Checkbox
+              configParam={"showFoodPheromones"}
+              isChecked={config.showFoodPheromones}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+        <SettingItem
+          title={"showFoodPheromonesQuadtree"}
+          checkbox={
+            <Checkbox
+              configParam={"showFoodPheromonesQuadtree"}
+              isChecked={config.showFoodPheromonesQuadtree}
+              updateAcoConfig={updateAcoConfig}
+            />
+          }
+        />
+      </div>
     </div>
   );
 };
diff --git a/src/components/control-panel/slider.tsx b/src/components/control-panel/slider.tsx
@@ -40,8 +40,6 @@ export const Slider = (props: ISliderProps) => {
     <>
       <input
         type="range"
-        // TODO: define id and data-testid once as a const
-        id={`${configParam}Slider`}
         data-testid={`${configParam}Slider`}
         min={min}
         max={max}

diff --git a/src/components/control-panel/toggle.tsx b/src/components/control-panel/toggle.tsx
@@ -9,7 +9,6 @@ const styles = {
     color: "#fff",
     position: "absolute",
     margin: "20px 0 0 20px",
-    /* TODO: transitions */
     cursor: "pointer",
   },
 } as const;