From 8db99379f6d182c6adbad9866b3f323ce2f75cdd Mon Sep 17 00:00:00 2001 From: hasnainroopawalla Date: Sat, 19 Aug 2023 15:46:13 +0200 Subject: [PATCH] control panel perceptionRange --- package.json | 2 +- src/aco/config.ts | 3 ++- src/aco/sketch.ts | 45 +++++++++++++++++++++++++++++++++------- src/index.html | 46 +++++++++++++++++++++++++++++------------ src/styles/style.css | 49 +++++++++++++++++++++++++++++--------------- webpack.config.js | 2 +- 6 files changed, 108 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 254d941..8c40971 100644 --- a/package.json +++ b/package.json @@ -32,4 +32,4 @@ "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" } -} +} \ No newline at end of file diff --git a/src/aco/config.ts b/src/aco/config.ts index bc24c9e..85202f0 100644 --- 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 index 06997e8..7db50f5 100644 --- 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 index 96b4632..a27d215 100644 --- a/src/index.html +++ b/src/index.html @@ -10,26 +10,45 @@
- +