From 06e02e7e2cd0c0167ad39c68aec24a34ae31ee9b Mon Sep 17 00:00:00 2001
From: Kai Piper <kai9987kai@gmail.com>
Date: Mon, 6 Jan 2025 11:41:53 +0000
Subject: [PATCH] Update multilayercombinedagent.html

---
 multilayercombinedagent.html | 623 +++++++++++++++++++++--------------
 1 file changed, 376 insertions(+), 247 deletions(-)
diff --git a/multilayercombinedagent.html b/multilayercombinedagent.html
index 231f028..aff0b0d 100644
--- a/multilayercombinedagent.html
+++ b/multilayercombinedagent.html
@@ -2,8 +2,9 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Enhanced Multi-Agent Simulation</title>
+    <title>Enhanced Multi-Agent Environmental Simulation</title>
     <style>
+        /* Styles remain unchanged */
         body {
             font-family: Arial, sans-serif;
             background-color: #1a1a1a;
@@ -20,7 +21,11 @@
             padding: 15px;
             border-radius: 8px;
         }
-        #performance, #scoreboard {
+        #controls label, #controls button {
+            display: block;
+            margin: 10px 0;
+        }
+        #performance {
             position: absolute;
             bottom: 10px;
             right: 10px;
@@ -29,329 +34,453 @@
             padding: 15px;
             border-radius: 8px;
         }
-        #scoreboard {
-            bottom: 130px;
+        #eventLog {
+            position: absolute;
+            top: 200px;
+            left: 10px;
+            z-index: 10;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 15px;
+            border-radius: 8px;
+            color: white;
+            max-height: 200px;
+            overflow-y: scroll;
         }
-        canvas {
-            display: block;
+        #eventLog ul {
+            list-style-type: none;
+            padding: 0;
         }
-        label {
-            display: block;
-            margin-top: 10px;
+        #eventLog li {
+            margin-bottom: 5px;
         }
     </style>
 </head>
 <body>
     <div id="controls">
-        <label for="speedSlider">Agent Speed:</label>
+        <label>Agent Speed:</label>
         <input type="range" id="speedSlider" min="1" max="10" value="5">
-        <label for="threatSlider">Threat Aggressiveness:</label>
+        <label>Threat Aggressiveness:</label>
         <input type="range" id="threatSlider" min="1" max="5" value="3">
         <button onclick="resetSimulation()">Reset Simulation</button>
+        <button onclick="createEnvironmentalTask()">Create Environmental Task</button>
     </div>
-
-    <div id="scoreboard">
-        <h4>Global Scoreboard</h4>
-        <p>Tasks Completed: <span id="tasksCompleted">0</span></p>
-        <p>Alive Agents: <span id="aliveAgents">0</span></p>
-    </div>
-
     <div id="performance">
         <p>FPS: <span id="fps"></span></p>
+        <p>Simulation Step Time: <span id="stepTime"></span> ms</p>
+    </div>
+    <div id="eventLog">
+        <h3>Event Log</h3>
+        <ul id="eventList"></ul>
     </div>
-
     <canvas id="canvas"></canvas>
 
+    <!-- Include TensorFlow.js library -->
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
 
     <script>
-        window.onload = function () {
-            const canvas = document.getElementById("canvas");
-            const ctx = canvas.getContext("2d");
+        // Global Variables and Settings
+        const canvas = document.getElementById("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        window.addEventListener("resize", () => {
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
+        });
+
+        // Global Settings
+        const settings = {
+            agent: { count: 30, maxSpeed: 6, maxHealth: 150, maxCount: 100 },
+            threat: { count: 10, speed: 3, aggressiveness: 3 },
+            food: { count: 20, respawnRate: 5000 },
+            task: { count: 0, completionReward: 20 },
+            eventLog: { maxSize: 100 },
+            dayNightCycle: { enabled: true, timeIncrement: 0.1 }
+        };
 
-            window.addEventListener("resize", () => {
-                canvas.width = window.innerWidth;
-                canvas.height = window.innerHeight;
-            });
-
-            const settings = {
-                agent: { count: 30, maxSpeed: 6, maxHealth: 150 },
-                threat: { count: 10, speed: 3, aggressiveness: 3 },
-                food: { count: 20 },
-            };
-
-            let agents = [];
-            let threats = [];
-            let foods = [];
-            let tasksCompleted = 0;
-            let lastFrameTime = 0;
-            const frameRate = 30; // Limit frame rate to 30 FPS
-
-            // DOM Elements for controls
-            const speedSlider = document.getElementById("speedSlider");
-            const threatSlider = document.getElementById("threatSlider");
-            const tasksCompletedSpan = document.getElementById("tasksCompleted");
-            const aliveAgentsSpan = document.getElementById("aliveAgents");
-            const fpsSpan = document.getElementById("fps");
-
-            // Update settings based on sliders
-            speedSlider.addEventListener("input", (e) => {
-                const newSpeed = parseInt(e.target.value);
-                settings.agent.maxSpeed = newSpeed;
-                agents.forEach(agent => {
-                    agent.speed = Math.random() * settings.agent.maxSpeed + 1;
-                });
-            });
-
-            threatSlider.addEventListener("input", (e) => {
-                const newAggressiveness = parseInt(e.target.value);
-                settings.threat.aggressiveness = newAggressiveness;
-                // Potentially adjust threat behavior based on aggressiveness
-                // For simplicity, we could adjust threat speed
-                threats.forEach(threat => {
-                    threat.speed = settings.threat.speed * (newAggressiveness / 3);
-                });
-            });
-
-            class Entity {
-                constructor(x, y, size, color) {
-                    this.x = x;
-                    this.y = y;
-                    this.size = size;
-                    this.color = color;
-                }
-
-                draw() {
-                    ctx.fillStyle = this.color;
-                    ctx.beginPath();
-                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-                    ctx.fill();
-                }
+        // Globals
+        let agents = [];
+        let threats = [];
+        let foods = [];
+        let tasks = [];
+        const eventLog = [];
+        let timeOfDay = 0; // 0 to 24 (hours)
+
+        // Performance metrics
+        let lastTimestamp = performance.now();
+        let fps = 0, stepTime = 0;
+
+        // Helper Functions
+        function logEvent(message) {
+            const logList = document.getElementById("eventList");
+            const logItem = document.createElement("li");
+            logItem.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
+            logList.appendChild(logItem);
+
+            if (logList.children.length > settings.eventLog.maxSize) {
+                logList.removeChild(logList.firstChild);
             }
+            updateEventLog(); // Auto-scroll to the latest log
+        }
 
-            class Agent extends Entity {
-                constructor(x, y) {
-                    super(x, y, 5, "blue");
-                    this.health = settings.agent.maxHealth;
-                    this.speed = Math.random() * settings.agent.maxSpeed + 1;
-                    this.energy = 100;
-                    this.memory = [0, 0, 0]; // Initialize memory with default values
+        function updateEventLog() {
+            const logList = document.getElementById("eventList");
+            logList.scrollTop = logList.scrollHeight; // Auto-scroll to the latest log
+        }
 
-                    this.brain = this.createBrain();
-                    this.preTrain(); // Pre-train the agent
-                }
+        // Data Augmentation Functions (for transformations)
+        const transformations = {
+            identity: (input) => input,
+            flipX: (input) => [-input[0], input[1], -input[2], input[3]],
+            flipY: (input) => [input[0], -input[1], input[2], -input[3]],
+            rotate90: (input) => [-input[1], input[0], -input[3], input[2]],
+            rotate180: (input) => [-input[0], -input[1], -input[2], -input[3]],
+        };
 
-                createBrain() {
-                    const model = tf.sequential();
+        const transformKeys = Object.keys(transformations);
 
-                    // Input layer (8 features)
-                    model.add(tf.layers.dense({ units: 16, inputShape: [8], activation: 'relu' }));
+        // Classes
+        class Entity {
+            constructor(x, y, size, color) {
+                this.x = x;
+                this.y = y;
+                this.size = size;
+                this.color = color;
+                this.isAlive = true;
+            }
 
-                    // Quantum-inspired layer (simulated)
-                    // Replacing 'sin' with 'tanh' as 'sin' is not a valid activation
-                    model.add(tf.layers.dense({ units: 8, activation: 'tanh' })); // Simulate quantum behavior
+            draw() {
+                ctx.fillStyle = this.color;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
 
-                    // Hidden layer
-                    model.add(tf.layers.dense({ units: 8, activation: 'relu' }));
+        class Agent extends Entity {
+            constructor(x, y) {
+                super(x, y, 5, "blue");
+                this.health = settings.agent.maxHealth;
+                this.speed = Math.random() * settings.agent.maxSpeed + 1;
 
-                    // Output layer (Q-values for actions)
-                    model.add(tf.layers.dense({ units: 4, activation: 'linear' })); // 4 possible actions
+                // Initialize neural network model for the agent
+                this.brain = this.createBrain();
 
-                    model.compile({ optimizer: tf.train.adam(0.01), loss: 'meanSquaredError' });
+                // Memory of past experiences
+                this.memory = [];
+
+                // Pre-trained flag
+                this.isPreTrained = false;
+
+                // Visual perception layer
+                this.visualRange = 100; // Range within which the agent can "see"
+            }
+
+            // Create a more sophisticated neural network
+            createBrain() {
+                const model = tf.sequential();
+                model.add(tf.layers.dense({ units: 32, inputShape: [4], activation: 'relu' })); // Fixed input shape
+                model.add(tf.layers.dense({ units: 16, activation: 'relu' }));
+                model.add(tf.layers.dense({ units: 8, activation: 'relu' }));
+                model.add(tf.layers.dense({ units: 2, activation: 'tanh' }));
+                model.compile({ optimizer: 'adam', loss: 'meanSquaredError' });
+                return model;
+            }
 
-                    return model;
+            // Pre-train the agent on similar tasks
+            async preTrain(tasks) {
+                const inputs = [];
+                const labels = [];
+                for (const task of tasks) {
+                    const input = task.input;
+                    const label = task.label;
+                    inputs.push(input);
+                    labels.push(label);
                 }
+                const xs = tf.tensor2d(inputs);
+                const ys = tf.tensor2d(labels);
+                await this.brain.fit(xs, ys, { epochs: 10 });
+                xs.dispose();
+                ys.dispose();
+                this.isPreTrained = true;
+                logEvent("Agent pre-trained on similar tasks.");
+            }
 
-                async preTrain() {
-                    // Simulate pre-training by initializing the model with pre-trained weights
-                    const dummyInput = tf.randomNormal([1, 8]);
-                    const dummyOutput = tf.randomNormal([1, 4]);
-                    await this.brain.fit(dummyInput, dummyOutput, { epochs: 10 });
-                    dummyInput.dispose();
-                    dummyOutput.dispose();
+            // Decide next move using augmented inference and voting
+            decideMove() {
+                const predictions = [];
+                for (const key of transformKeys) {
+                    const transform = transformations[key];
+                    const transformedInput = transform(this.senseEnvironment());
+                    const tensorInput = tf.tensor2d([transformedInput]);
+                    const output = this.brain.predict(tensorInput);
+                    let data = output.dataSync();
+                    predictions.push({ key, data });
+                    tensorInput.dispose();
+                    output.dispose();
                 }
 
-                move() {
-                    const state = this.senseEnvironment();
-                    const tensorState = tf.tensor2d([state]);
+                const finalDecision = this.vote(predictions);
+                this.x += finalDecision[0] * this.speed;
+                this.y += finalDecision[1] * this.speed;
+                this.keepWithinBounds();
+            }
 
-                    // Predict Q-values
-                    const qValues = this.brain.predict(tensorState).dataSync();
-                    tensorState.dispose();
+            // Voting mechanism to decide on the final action
+            vote(predictions) {
+                let sumX = 0;
+                let sumY = 0;
+                for (const pred of predictions) {
+                    sumX += pred.data[0];
+                    sumY += pred.data[1];
+                }
+                const avgX = sumX / predictions.length;
+                const avgY = sumY / predictions.length;
+                return [avgX, avgY];
+            }
 
-                    // Choose the action with the highest Q-value
-                    const action = qValues.indexOf(Math.max(...qValues));
+            // Sense the environment to find nearest threat and food
+            senseEnvironment() {
+                let nearestThreat = this.findNearest(threats);
+                let nearestFood = this.findNearest(foods);
+
+                return [
+                    (nearestThreat ? (nearestThreat.x - this.x) / canvas.width : 0),
+                    (nearestThreat ? (nearestThreat.y - this.y) / canvas.height : 0),
+                    (nearestFood ? (nearestFood.x - this.x) / canvas.width : 0),
+                    (nearestFood ? (nearestFood.y - this.y) / canvas.height : 0)
+                ];
+            }
 
-                    // Execute the action
-                    switch (action) {
-                        case 0: this.x += this.speed; break; // Move right
-                        case 1: this.x -= this.speed; break; // Move left
-                        case 2: this.y += this.speed; break; // Move down
-                        case 3: this.y -= this.speed; break; // Move up
-                        default: break;
+            findNearest(entities) {
+                let minDist = Infinity;
+                let nearest = null;
+                for (const entity of entities) {
+                    const dist = Math.hypot(this.x - entity.x, this.y - entity.y);
+                    if (dist < minDist) {
+                        minDist = dist;
+                        nearest = entity;
                     }
+                }
+                return nearest;
+            }
 
-                    // Ensure the agent stays within the canvas bounds
-                    this.x = Math.max(0, Math.min(canvas.width, this.x));
-                    this.y = Math.max(0, Math.min(canvas.height, this.y));
+            // Learn from experiences with data augmentation
+            learn() {
+                if (this.memory.length >= 5) {
+                    const augmentedMemory = [];
+                    for (const mem of this.memory) {
+                        for (const key of transformKeys) {
+                            const transform = transformations[key];
+                            const transformedInput = transform(mem.input);
+                            const transformedLabel = transform(mem.label);
+                            augmentedMemory.push({ input: transformedInput, label: transformedLabel });
+                        }
+                    }
 
-                    this.energy -= 0.1; // Energy usage
+                    const inputs = augmentedMemory.map(mem => mem.input);
+                    const labels = augmentedMemory.map(mem => mem.label);
 
-                    // Example interaction: if near food, consume it
-                    foods.forEach((food, index) => {
-                        const distance = Math.hypot(this.x - food.x, this.y - food.y);
-                        if (distance < this.size + food.size) {
-                            this.energy = Math.min(this.energy + 20, 100); // Replenish energy
-                            foods.splice(index, 1); // Remove consumed food
-                            tasksCompleted++;
-                        }
-                    });
+                    const xs = tf.tensor2d(inputs);
+                    const ys = tf.tensor2d(labels);
 
-                    // Example interaction: if near threat, lose energy
-                    threats.forEach(threat => {
-                        const distance = Math.hypot(this.x - threat.x, this.y - threat.y);
-                        if (distance < this.size + threat.size) {
-                            this.energy -= settings.threat.aggressiveness * 0.5;
-                        }
+                    this.brain.fit(xs, ys, { epochs: 1 }).then(() => {
+                        xs.dispose();
+                        ys.dispose();
                     });
 
-                    // Check if agent is still alive
-                    if (this.energy <= 0) {
-                        const agentIndex = agents.indexOf(this);
-                        if (agentIndex > -1) {
-                            agents.splice(agentIndex, 1);
+                    this.memory = [];
+                    logEvent(`Agent learned from experiences with data augmentation.`);
+                }
+            }
+
+            // Overriding the move function
+            move() {
+                this.decideMove();
+                this.interact();
+            }
+
+            interact() {
+                for (const threat of threats) {
+                    const dist = Math.hypot(this.x - threat.x, this.y - threat.y);
+                    if (dist < this.size + threat.size) {
+                        this.health -= 20;
+                        const input = this.senseEnvironment();
+                        const label = [-(threat.x - this.x) / canvas.width, -(threat.y - this.y) / canvas.height];
+                        this.memory.push({ input, label });
+                        logEvent(`Agent encountered a threat! Health: ${this.health}`);
+                        if (this.health <= 0) {
+                            this.isAlive = false;
+                            logEvent(`An agent has died.`);
                         }
                     }
                 }
 
-                senseEnvironment() {
-                    const nearestThreat = this.findNearest(threats);
-                    const nearestFood = this.findNearest(foods);
-
-                    return [
-                        nearestThreat ? nearestThreat.x - this.x : 0,
-                        nearestThreat ? nearestThreat.y - this.y : 0,
-                        nearestFood ? nearestFood.x - this.x : 0,
-                        nearestFood ? nearestFood.y - this.y : 0,
-                        this.energy,
-                        ...this.memory // 3 memory values
-                    ]; // Total of 8 features
+                for (let i = foods.length - 1; i >= 0; i--) {
+                    const food = foods[i];
+                    const dist = Math.hypot(this.x - food.x, this.y - food.y);
+                    if (dist < this.size + food.size) {
+                        this.health = Math.min(this.health + 10, settings.agent.maxHealth);
+                        const input = this.senseEnvironment();
+                        const label = [(food.x - this.x) / canvas.width, (food.y - this.y) / canvas.height];
+                        this.memory.push({ input, label });
+                        logEvent(`Agent found food! Health: ${this.health}`);
+                        foods.splice(i, 1);
+                    }
                 }
 
-                findNearest(entities) {
-                    if (entities.length === 0) return null;
-                    let nearest = entities[0];
-                    let minDist = Math.hypot(this.x - nearest.x, this.y - nearest.y);
-                    for (let i = 1; i < entities.length; i++) {
-                        const dist = Math.hypot(this.x - entities[i].x, this.y - entities[i].y);
-                        if (dist < minDist) {
-                            minDist = dist;
-                            nearest = entities[i];
-                        }
-                    }
-                    return nearest;
+                if (Math.random() < 0.05) {
+                    this.learn();
                 }
             }
 
-            class Threat extends Entity {
-                constructor(x, y) {
-                    super(x, y, 8, "red");
-                    this.speed = settings.threat.speed;
-                }
+            keepWithinBounds() {
+                this.x = Math.max(this.size, Math.min(canvas.width - this.size, this.x));
+                this.y = Math.max(this.size, Math.min(canvas.height - this.size, this.y));
+            }
+        }
 
-                move() {
-                    // Simple random movement for threats
-                    const direction = Math.random() * Math.PI * 2;
-                    this.x += Math.cos(direction) * this.speed;
-                    this.y += Math.sin(direction) * this.speed;
+        class Threat extends Entity {
+            constructor(x, y) {
+                super(x, y, 8, "red");
+                this.speed = settings.threat.speed * settings.threat.aggressiveness;
+            }
 
-                    // Ensure the threat stays within the canvas bounds
-                    this.x = Math.max(0, Math.min(canvas.width, this.x));
-                    this.y = Math.max(0, Math.min(canvas.height, this.y));
-                }
+            move() {
+                this.x += (Math.random() - 0.5) * this.speed;
+                this.y += (Math.random() - 0.5) * this.speed;
+                this.keepWithinBounds();
             }
 
-            function initializeSimulation() {
-                // Clear existing entities
-                agents = [];
-                threats = [];
-                foods = [];
-
-                // Spawn agents within canvas bounds
-                for (let i = 0; i < settings.agent.count; i++) {
-                    const x = Math.random() * canvas.width;
-                    const y = Math.random() * canvas.height;
-                    agents.push(new Agent(x, y));
-                }
+            keepWithinBounds() {
+                this.x = Math.max(this.size, Math.min(canvas.width - this.size, this.x));
+                this.y = Math.max(this.size, Math.min(canvas.height - this.size, this.y));
+            }
+        }
 
-                // Spawn threats within canvas bounds
-                for (let i = 0; i < settings.threat.count; i++) {
-                    const x = Math.random() * canvas.width;
-                    const y = Math.random() * canvas.height;
-                    threats.push(new Threat(x, y));
-                }
+        class Food extends Entity {
+            constructor(x, y) {
+                super(x, y, 5, "green");
+            }
+        }
 
-                // Spawn food within canvas bounds
-                for (let i = 0; i < settings.food.count; i++) {
-                    const x = Math.random() * canvas.width;
-                    const y = Math.random() * canvas.height;
-                    foods.push(new Entity(x, y, 5, "green"));
-                }
+        class Task extends Entity {
+            constructor(x, y) {
+                super(x, y, 6, "yellow");
+            }
+        }
 
-                tasksCompleted = 0;
-                updateScoreboard();
+        // Simulation Functions
+
+        // Predefined similar tasks for pre-training
+        const preTrainingTasks = generatePreTrainingTasks();
+
+        function generatePreTrainingTasks() {
+            const tasks = [];
+            for (let i = 0; i < 100; i++) {
+                const agentX = Math.random() * canvas.width;
+                const agentY = Math.random() * canvas.height;
+                const threatX = Math.random() * canvas.width;
+                const threatY = Math.random() * canvas.height;
+                const foodX = Math.random() * canvas.width;
+                const foodY = Math.random() * canvas.height;
+
+                const input = [
+                    (threatX - agentX) / canvas.width,
+                    (threatY - agentY) / canvas.height,
+                    (foodX - agentX) / canvas.width,
+                    (foodY - agentY) / canvas.height
+                ];
+                const label = [
+                    ((agentX - threatX) + (foodX - agentX)) / canvas.width,
+                    ((agentY - threatY) + (foodY - agentY)) / canvas.height
+                ];
+                tasks.push({ input, label });
             }
+            return tasks;
+        }
+
+        function initializeSimulation() {
+            agents = Array.from({ length: settings.agent.count }, () => new Agent(Math.random() * canvas.width, Math.random() * canvas.height));
+            threats = Array.from({ length: settings.threat.count }, () => new Threat(Math.random() * canvas.width, Math.random() * canvas.height));
+            foods = Array.from({ length: settings.food.count }, () => new Food(Math.random() * canvas.width, Math.random() * canvas.height));
+            logEvent("Simulation initialized.");
 
-            function resetSimulation() {
-                initializeSimulation();
+            preTrainAgents();
+        }
+
+        async function preTrainAgents() {
+            for (const agent of agents) {
+                await agent.preTrain(preTrainingTasks);
             }
+            logEvent("All agents pre-trained on similar tasks.");
+        }
 
-            function updateSimulation(currentTime) {
-                const deltaTime = currentTime - lastFrameTime;
-                if (deltaTime < 1000 / frameRate) {
-                    requestAnimationFrame(updateSimulation);
-                    return;
-                }
-                lastFrameTime = currentTime;
+        function createEnvironmentalTask() {
+            tasks.push(new Task(Math.random() * canvas.width, Math.random() * canvas.height));
+            logEvent("Environmental task created.");
+        }
+
+        function resetSimulation() {
+            initializeSimulation();
+            logEvent("Simulation reset.");
+        }
 
-                // Clear the canvas
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
+        function updateSimulation(timestamp) {
+            const delta = timestamp - lastTimestamp;
+            lastTimestamp = timestamp;
+            fps = (1000 / delta).toFixed(1);
 
-                // Update and draw threats
-                threats.forEach(threat => {
-                    threat.move();
-                    threat.draw();
-                });
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-                // Update and draw agents
-                agents.forEach(agent => {
+            for (let i = agents.length - 1; i >= 0; i--) {
+                const agent = agents[i];
+                if (agent.isAlive) {
                     agent.move();
                     agent.draw();
-                });
-
-                // Draw food
-                foods.forEach(food => food.draw());
-
-                // Update FPS display
-                fpsSpan.textContent = Math.round(1000 / deltaTime);
+                } else {
+                    agents.splice(i, 1);
+                }
+            }
 
-                // Update scoreboard
-                updateScoreboard();
+            for (const threat of threats) {
+                threat.move();
+                threat.draw();
+            }
 
-                requestAnimationFrame(updateSimulation);
+            for (const food of foods) {
+                food.draw();
             }
 
-            function updateScoreboard() {
-                tasksCompletedSpan.textContent = tasksCompleted;
-                aliveAgentsSpan.textContent = agents.length;
+            for (const task of tasks) {
+                task.draw();
             }
 
-            // Initialize and start the simulation
-            initializeSimulation();
+            document.getElementById("fps").innerText = fps;
+            stepTime = delta.toFixed(1);
+            document.getElementById("stepTime").innerText = stepTime;
+
+            updateEventLog();
+
             requestAnimationFrame(updateSimulation);
-        };
+        }
+
+        // Event Listeners
+        document.getElementById("speedSlider").addEventListener("input", (e) => {
+            settings.agent.maxSpeed = parseFloat(e.target.value);
+            logEvent(`Agent speed updated to ${settings.agent.maxSpeed}`);
+        });
+
+        document.getElementById("threatSlider").addEventListener("input", (e) => {
+            settings.threat.aggressiveness = parseFloat(e.target.value);
+            threats.forEach(threat => threat.speed = settings.threat.speed * settings.threat.aggressiveness);
+            logEvent(`Threat aggressiveness updated to ${settings.threat.aggressiveness}`);
+        });
+
+        // Initialize and Start Simulation
+        initializeSimulation();
+        requestAnimationFrame(updateSimulation);
     </script>
 </body>
 </html>
