control panel perceptionRange

hasnainroopawalla · Aug 19, 2023 · 8db9937 · 8db9937
1 parent 3d1527d
commit 8db9937
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -32,4 +32,4 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   }
-}
+}
diff --git a/src/aco/config.ts b/src/aco/config.ts
@@ -1,4 +1,4 @@
-export const config = {
+export let config = {
   sketch: {
     frameRate: 60,
   },
@@ -10,6 +10,7 @@ export const config = {
     color: "#39FF14",
     strokeWeight: 0,
   },
+
   foodCluster: {
     spacing: 7,
   },

diff --git a/src/aco/sketch.ts b/src/aco/sketch.ts
@@ -1,18 +1,48 @@
 import * as p5 from "p5";
 import { World } from "./world";
 import { Quadtree, Rectangle } from "./quadtree";
+import { config } from "./config";
 
 let world: World;
 const numAnts: number = 100;
 let quadtree: Quadtree;
 
-type ISettings = {
-  maxSpeed: number;
-};
+const bindListeners = (p: p5) => {
+  const maxSpeed = p
+    .select("#maxSpeed")
+    // @ts-ignore
+    .input(() => {
+      config.ant.maxSpeed = Number(maxSpeed.value());
+    });
+
+  const wanderStrength = p
+    .select("#wanderStrength")
+    // @ts-ignore
+    .input(() => {
+      config.ant.wanderStrength = Number(wanderStrength.value());
+    });
+
+  const steeringLimit = p
+    .select("#steeringLimit")
+    // @ts-ignore
+    .input(() => {
+      config.ant.steeringLimit = Number(steeringLimit.value());
+    });
 
-const getSettings = (): ISettings => ({
-  maxSpeed: Number(p5i.select("#maxSpeed").value()),
-});
+  const perceptionRange = p
+    .select("#perceptionRange")
+    // @ts-ignore
+    .input(() => {
+      config.ant.perception.range = Number(perceptionRange.value());
+    });
+
+  const showPerceptionRange = p
+    .select("#showPerceptionRange")
+    // @ts-ignore
+    .changed(() => {
+      config.ant.perception.show = showPerceptionRange.checked();
+    });
+};
 
 const sketch = (p: p5) => {
   p.setup = () => {
@@ -31,11 +61,12 @@ const sketch = (p: p5) => {
     for (let i = 0; i < numAnts; i++) {
       world.createAnt();
     }
+
+    bindListeners(p);
   };
 
   p.draw = () => {
     world.render();
-    console.log(getSettings());
   };
 
   // p.mouseClicked = () => {

diff --git a/src/index.html b/src/index.html
@@ -10,26 +10,45 @@
 <body>
     <div class="control-panel-button-container">
         <a href="javascript:void(0);" style="color:white;" class="control-panel-button icon" onclick="openNav()">
-            <i class="fa fa-bars"></i>
+            <i class="fa fa-cog fa-lg"></i>
         </a>
     </div>
 
     <div class="control-panel" style="display: none;">
         <div class="control-panel-content">
             <a href="javascript:void(0)" class="close-button" onclick="closeNav()">&times;</a>
-            <div class="control-panel-slider-container">
-                <span class="control-panel-slider-label">maxSpeed</span>
-                <div class="control-panel-slider-component">
-                    <input class="control-panel-slider-input" id="maxSpeed" type="range" min="0.1" max="5.0" value="2.5" step="0.1" oninput="sliderOnChange(this)">
-                    <span id="maxSpeedDisplay" class="control-panel-slider-output">2.5</span>
-
+            <div class="slider-container">
+                <span class="slider-title">maxSpeed</span>
+                <div class="slider-component">
+                    <input class="slider-input" id="maxSpeed" type="range" min="0.1" max="5.0" value="2.5" step="0.1" oninput="sliderOnChange(this)">
+                    <span id="maxSpeedDisplay" class="slider-output">2.5</span>
+                </div>
+            </div>
+            <div class="slider-container">
+                <span class="slider-title">wanderStrength</span>
+                <div class="slider-component">
+                    <input class="slider-input" id="wanderStrength" type="range" min="0.1" max="5.0" value="1.0" step="0.1" oninput="sliderOnChange(this)">
+                    <span id="wanderStrengthDisplay" class="slider-output">1.0</span>
+                </div>
+            </div>
+            <div class="slider-container">
+                <span class="slider-title">steeringLimit</span>
+                <div class="slider-component">
+                    <input class="slider-input" id="steeringLimit" type="range" min="0.1" max="1.0" value="0.4" step="0.1" oninput="sliderOnChange(this)">
+                    <span id="steeringLimitDisplay" class="slider-output">0.4</span>
                 </div>
             </div>
-            <div class="control-panel-slider-container">
-                <span class="control-panel-slider-label">wanderStrength</span>
-                <div class="control-panel-slider-component">
-                    <input class="control-panel-slider-input" id="wanderingStrength" type="range" min="0.1" max="5.0" value="1" step="0.1" oninput="sliderOnChange(this)">
-                    <span id="wanderingStrengthDisplay" class="control-panel-slider-output">1</span>
+            <div class="slider-checkbox-container">
+                <span class="slider-title">perceptionRange</span>
+                <div class="slider-checkbox-component">
+                    <div class="checkbox-component">
+                        <input id="showPerceptionRange" type="checkbox">
+                        <span class="checkbox-label">Render</span>
+                    </div>
+                    <div class="slider-component">
+                        <input class="slider-input" id="perceptionRange" type="range" min="10" max="100" value="50" step="1" oninput="sliderOnChange(this)">
+                        <span id="perceptionRangeDisplay" class="slider-output">50</span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -52,7 +71,8 @@
     }
 
     function sliderOnChange(slider) {
-        document.getElementById(`${slider.id}Display`).innerHTML = slider.value;
+        const value = Number(slider.value);
+        document.getElementById(`${slider.id}Display`).innerHTML = value < 10 ? value.toFixed(1) : value.toFixed(0);
     }
 </script>
 

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -1,5 +1,8 @@
 body {
   margin: 0px;
+  font-family: Tahoma;
+  font-size: 13px;
+  letter-spacing: 0.5px;
 }
 
 .control-panel-button-container {
@@ -39,36 +42,50 @@ body {
   font-size: 30px;
 }
 
-.control-panel-content {
+.control-panel > .control-panel-content {
   width: 350px;
   overflow: hidden;
 }
 
-.control-panel-slider-container {
+.control-panel .slider-container {
   display: flex;
   flex-direction: row;
-  /* justify-content: space-evenly; */
   padding: 10px;
 }
 
-.control-panel-slider-container .control-panel-slider-label {
+.control-panel .slider-title {
   color: #fff;
   margin-left: 10px;
-  margin-right: 30px;
 }
 
-.control-panel-slider-container .control-panel-slider-component {
-  margin-right: 10px;
+.control-panel .slider-output {
   color: #fff;
-}
-
-.control-panel-slider-container
-  .control-panel-slider-component
-  .control-panel-slider-output {
-  background-color: #606060;
-  border-radius: 10px;
+  background-color: #3691ec;
+  border-radius: 7px;
   align-items: center;
   padding: 4px 6px 4px 6px;
-  /* margin-right: 6px;
-  margin-bottom: 6px; */
+  margin-left: 10px;
+}
+
+.control-panel .slider-component {
+  color: #fff;
+  margin-left: auto;
+}
+
+.control-panel .slider-checkbox-container {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.control-panel .slider-checkbox-component {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  padding: 15px 0px 10px 10px;
+  margin-left: 10px;
+}
+
+.control-panel .checkbox-label {
+  color: #fff;
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -34,6 +34,6 @@ module.exports = {
         }),
         new HtmlWebpackPlugin({
             template: 'src/index.html',
-        })
+        }),
     ],
 };