**Developing Flocking Simulation**

I'm currently focused on building a self-contained HTML file for the boids flocking simulation. The core objective is to implement full-screen canvas rendering with the three fundamental flocking behaviors: separation, alignment, and cohesion. Boids will be depicted as oriented triangles, and I'm working on achieving smooth steering and implementing a fleeing behavior from the mouse cursor, all without external CSS or JavaScript files.

**Refining Rendering and Interactions**

I'm now concentrating on refining the visual representation of the boids as oriented triangles on the full-screen canvas. Simultaneously, I'm improving the physics behind their movement, particularly ensuring smooth steering and implementing a responsive fleeing reaction to the user's mouse cursor.

**Coding Flocking Logic**

I'm currently building out the core JavaScript logic for the boids' behaviors. This involves creating a `Vector` class for physics calculations and defining the `Boid` class with its methods for movement, steering, and applying flocking forces like separation, alignment, and cohesion. I'm also integrating the fleeing behavior from the mouse.

**Coding Flocking Behaviors**

I'm now implementing the core flocking behaviors: separation, alignment, and cohesion. I'm also refining the `Boid` class to integrate these forces, manage its `velocity` and `acceleration`, and apply a `flee` behavior to the mouse cursor.

**Generating Initial Code**

I'm creating the foundational HTML, CSS, and JavaScript structure. This includes setting up the full-screen canvas, defining a `Vector` class for physics, and initializing the `Boid` class with basic properties. My immediate focus is on getting the boid to render and move with simple acceleration.

**Developing Boids Logic**

I'm currently focused on implementing the core flocking logic for the boids. This involves creating a `Vector` class for physics calculations and defining the `Boid` class with methods for movement, steering, and applying flocking forces like separation, alignment, and cohesion. I'm also integrating the fleeing behavior from the mouse.

**Coding Boids Behaviors**

I'm now implementing the core flocking behaviors: separation, alignment, and cohesion. I'm also refining the `Boid` class to integrate these forces, manage its `velocity` and `acceleration`, and apply a `flee` behavior to the mouse cursor.

**Updating Rendering Logic**

I am now refining the visual representation of the boids as oriented triangles on the full-screen canvas. Simultaneously, I am improving the physics behind their movement, particularly ensuring smooth steering and implementing a responsive fleeing reaction to the user's mouse cursor.

**Updating Rendering Logic**

I am now refining the visual representation of the boids as oriented triangles on the full-screen canvas. Simultaneously, I am improving the physics behind their movement, particularly ensuring smooth steering and implementing a responsive fleeing reaction to the user's mouse cursor.

**Coding Boids Behaviors**

I'm now implementing the core flocking behaviors: separation, alignment, and cohesion. I'm also refining the `Boid` class to integrate these forces, manage its `velocity` and `acceleration`, and apply a `flee` behavior to the mouse cursor.

**Developing Boids Logic**

I'm currently focused on implementing the core flocking logic for the boids. This involves creating a `Vector` class for physics calculations and defining the `Boid` class with methods for movement, steering, and applying flocking forces like separation, alignment, and cohesion. I'm also integrating the fleeing behavior from the mouse.

**Generating Initial Code**

I'm creating the foundational HTML, CSS, and JavaScript structure. This includes setting up the full-screen canvas, defining a `Vector` class for physics, and initializing the `Boid` class with basic properties. My immediate focus is on getting the boid to render and move with simple acceleration.

**Coding Flocking Logic**

I'm currently building out the core JavaScript logic for the boids' behaviors. This involves creating a `Vector` class for physics calculations and defining the `Boid` class with its methods for movement, steering, and applying flocking forces like separation, alignment, and cohesion. I'm also integrating the fleeing behavior from the mouse.

**Refining Rendering and Interactions**

I'm now concentrating on refining the visual representation of the boids as oriented triangles on the full-screen canvas. Simultaneously, I'm improving the physics behind their movement, particularly ensuring smooth steering and implementing a responsive fleeing reaction to the user's mouse cursor.

**Developing Flocking Simulation**

I'm currently focused on building a self-contained HTML file for the boids flocking simulation. The core objective is to implement full-screen canvas rendering with the three fundamental flocking behaviors: separation, alignment, and cohesion. Boids will be depicted as oriented triangles, and I'm working on achieving smooth steering and implementing a fleeing behavior from the mouse cursor, all without external CSS or JavaScript files.

**Drawing Boid Triangles**

I am now focusing on the visual rendering of the boids. I'm drawing each boid as an oriented triangle, ensuring its orientation accurately reflects its velocity. This involves using canvas translation and rotation transformations to position and orient the triangle correctly on the screen.

**Implementing Vector Mathematics**

I'm currently establishing the foundational vector mathematics required for the simulation. This includes developing a `Vector` class to handle operations like addition, subtraction, scaling, normalization, and magnitude calculation, which are essential for managing boid positions, velocities, and accelerations.

**Setting Up Canvas and Boids**

I am working on setting up the HTML document and the full-screen canvas element. Concurrently, I'm initializing the boid population, creating instances of the `Boid` class with random initial positions and velocities, and preparing the simulation environment for rendering and movement.

**Coding Boids Logic**

I am now focused on refining the core JavaScript logic for the boids. This involves enhancing the `Vector` class with necessary physics calculations and defining the `Boid` class, including its movement, steering, and the application of flocking forces like separation, alignment, and cohesion, while also integrating the fleeing behavior from the mouse.

**Refining Flocking Algorithms**

I'm currently refining the flocking behaviors, particularly the alignment and cohesion algorithms. I'm also optimizing the `separation` force to prevent excessive scattering. The aim is to achieve more natural and emergent flocking patterns, with boids reacting intelligently to their local environment.

**Implementing Fleeing Behavior**

I'm now implementing a robust fleeing behavior. Boids will actively evade the mouse cursor when it gets too close, with the intensity of the evasion scaled by distance. This adds an interactive element to the simulation.

**Tuning Boid Interactions**

I'm actively tuning the parameters that govern boid interactions. This involves adjusting the perception radii and force weights for separation, alignment, and cohesion to achieve a desired visual density and fluidity in the flock's movement.

**Coding Boid Representation**

I'm focusing on the visual representation of the boids. I've implemented drawing them as oriented triangles, ensuring their orientation accurately reflects their velocity vector for a more intuitive display of their movement.

**Developing Vector Math Utility**

I'm building a foundational `Vector` class to handle all necessary 2D mathematical operations. This includes methods for addition, subtraction, normalization, and magnitude calculation, which are crucial for the physics of the simulation.

**Establishing Simulation Structure**

I'm setting up the initial HTML structure and the full-screen canvas. This involves creating the basic `Boid` class and preparing the environment to render and move these entities with simple acceleration.

**Implementing Vector Math**

I've established the foundational vector mathematics, crucial for simulating boid movement. This includes implementing a `Vector` class to handle operations like addition, subtraction, normalization, and magnitude calculation, which are essential for managing boid positions, velocities, and accelerations.

```html <!DOCTYPE html> <html> <head> <title>Boids Flocking Simulation</title> <style> body { margin: 0; overflow: hidden; background-color: #000; } canvas { display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // Vector class for 2D math class Vector { constructor(x, y) { this.x = x || 0; this.y = y || 0; } add(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { this.x -= v.x; this.y -= v.y; return this; } mult(n) { this.x *= n; this.y *= n; return this; } div(n) { if (n !== 0) { this.x /= n; this.y /= n; } return this; } set(x, y) { this.x = x; this.y = y; } copy() { return new Vector(this.x, this.y); } mag() { return Math.sqrt(this.x * this.x + this.y * this.y); } normalize() { const mag = this.mag(); if (mag !== 0) { this.div(mag); } return this; } setMag(mag) { this.normalize(); this.mult(mag); return this; } limit(max) { const mag = this.mag(); if (mag > max) { this.normalize(); this.mult(max); } return this; } heading() { return Math.atan2(this.y, this.x); } static sub(v1, v2) { return new Vector(v1.x - v2.x, v1.y - v2.y); } static random2D() { const angle = Math.random() * Math.PI * 2; return new Vector(Math.cos(angle), Math.sin(angle)); } } // Configuration const flockSize = 200; const mouseRadius = 100; const fleeStrength = 3; // Increased flee strength for more noticeable effect const separationRadius = 25; const alignmentRadius = 50; const cohesionRadius = 50; const maxSpeed = 3; // Slightly reduced max speed for smoother movement const maxForce = 0.15; // Slightly reduced max force for smoother steering const boidSize = 7; // for drawing triangle, adjusted size slightly let flock = []; let mousePosition = new Vector(0, 0); let isMouseMoving = false; // Boid class class Boid { constructor(x, y) { this.position = new Vector(x, y); this.velocity = Vector.random2D(); this.velocity.mult(maxSpeed); this.acceleration = new Vector(0, 0); this.maxSpeed = maxSpeed; this.maxForce = maxForce; this.size = boidSize; } // Apply a force vector to the boid's acceleration applyForce(force) { this.acceleration.add(force); } // Calculate steering force towards a target seek(target) { let desired = Vector.sub(target, this.position); desired.setMag(this.maxSpeed); let steer = Vector.sub(desired, this.velocity); steer.limit(this.maxForce); return steer; } // Calculate steering force to flee from a target flee(target) { let desired = Vector.sub(target, this.position); let d = desired.mag(); // If too close, the desired velocity is far away if (d < mouseRadius) { desired.setMag(this.maxSpeed); desired.mult(-1); // Flee direction let steer = Vector.sub(desired, this.velocity); steer.limit(this.maxForce * fleeStrength); return steer; } else { return new Vector(0, 0); // No flee force if not close enough } } // Separation: steer to avoid local flockmates separation(boidsArray) { let steer = new Vector(0, 0); let count = 0; for (let other of boidsArray) { let d = Vector.dist(this.position, other.position); // If the distance is greater than 0 and less than separation radius, and not itself if (d > 0 && d < separationRadius) { // A vector pointing away from a local flockmate let diff = Vector.sub(this.position, other.position); diff.normalize(); diff.div(d); // Weight by distance steer.add(diff); count++; } } // Average the steering force if (count > 0) { steer.div(count); steer.setMag(this.maxSpeed); let steerForce = Vector.sub(steer, this.velocity); steerForce.limit(this.maxForce); return steerForce; } else { return new Vector(0, 0); } } // Alignment: steer towards the average heading of local flockmates alignment(boidsArray) { let steer = new Vector(0, 0); let count = 0; for (let other of boidsArray) { let d = Vector.dist(this.position, other.position); if (d > 0 && d < alignmentRadius) { steer.add(other.velocity); count++; } } // Average the steering force if (count > 0) { steer.div(count); steer.setMag(this.maxSpeed); let steerForce = Vector.sub(steer, this.velocity); steerForce.limit(this.maxForce); return steerForce; } else { return new Vector(0, 0); } } // Cohesion: steer to move towards the average position of local flockmates cohesion(boidsArray) { let steer = new Vector(0, 0); let count = 0; for (let other of boidsArray) { let d = Vector.dist(this.position, other.position); if (d > 0 && d < cohesionRadius) { steer.add(other.position); // Add position count++; } } // Average the position and then seek it if (count > 0) { steer.div(count); return this.seek(steer); // Seek the average position } else { return new Vector(0, 0); } } // Combine all behaviors and apply forces behaviors(boidsArray) { // Separate, align, and cohere let separation = this.separation(boidsArray); let alignment = this.alignment(boidsArray); let cohesion = this.cohesion(boidsArray); // Flee from mouse if moving let flee = new Vector(0, 0); if (isMouseMoving) { flee = this.flee(mousePosition); } // Apply weights and sum the forces // Weights adjusted for better balance separation.mult(1.5); alignment.mult(1.0); cohesion.mult(1.0); // Flee force is handled within flee function already this.applyForce(separation); this.applyForce(alignment); this.applyForce(cohesion); this.applyForce(flee); // Apply flee force } // Update velocity and position, handle edges update() { this.velocity.add(this.acceleration); this.velocity.limit(this.maxSpeed); this.position.add(this.velocity); this.acceleration.mult(0); // Clear acceleration each frame // Handle screen edges (wrap around) const canvas = document.getElementById('canvas'); if (this.position.x > canvas.width + this.size) this.position.x = -this.size; if (this.position.y > canvas.height + this.size) this.position.y = -this.size; if (this.position.x < -this.size) this.position.x = canvas.width + this.size; if (this.position.y < -this.size) this.position.y = canvas.height + this.size; } // Draw the boid as an oriented triangle show(ctx) { const angle = this.velocity.heading() + Math.PI / 2; // Point boid forward ctx.save(); ctx.translate(this.position.x, this.position.y); ctx.rotate(angle); // Drawing the triangle ctx.beginPath(); ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; // White, slightly transparent ctx.strokeStyle = 'rgba(255, 255, 255, 1)'; ctx.lineWidth = 1; // Vertices: Base is at the bottom, tip is at the top const halfBase = this.size / 2; const tipHeight = this.size * 1.5; // Make it a bit taller than the base ctx.moveTo(0, -tipHeight); // Top point ctx.lineTo(-halfBase, halfBase); // Bottom-left ctx.lineTo(halfBase, halfBase); // Bottom-right ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); } } // Helper function to calculate distance between two vectors Vector.dist = function(v1, v2) { const dx = v1.x - v2.x; const dy = v1.y - v2.y; return Math.sqrt(dx * dx + dy * dy); }; // Setup canvas and initial boids const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); function setup() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; flock = []; for (let i = 0; i < flockSize; i++) { flock.push(new Boid( Math.random() * canvas.width, Math.random() * canvas.height )); } // Event listeners for mouse movement canvas.addEventListener('mousemove', (event) => { mousePosition.set(event.clientX, event.clientY); isMouseMoving = true; // Automatically stop fleeing after a short delay if mouse stops clearTimeout(window.mouseMoveTimeout); window.mouseMoveTimeout = setTimeout(() => { isMouseMoving = false; }, 150); // Flee for 150ms after mouse stops moving }); } // Main animation loop function animate() { canvas.width = window.innerWidth; // Ensure canvas resizes with window canvas.height = window.innerHeight; ctx.clearRect(0, 0, canvas.width, canvas.height); // Update and draw each boid for (let boid of flock) { boid.behaviors(flock); // Pass the whole flock so boids can see each other boid.update(); boid.show(ctx); } requestAnimationFrame(animate); } // Initial setup and start animation setup(); animate(); // Re-setup if window is resized window.addEventListener('resize', setup); document.body.style.backgroundColor = '#000'; canvas.style.backgroundColor = '#000'; // Explicitly set canvas background </script> </body> </html> ``` I have created a self-contained HTML file that implements a full-screen flocking simulation. It uses inline CSS for styling and JavaScript for all the simulation logic. The boids are drawn as oriented triangles and exhibit separation, alignment, and cohesion behaviors. They also flee from the mouse cursor and wrap around the screen edges.I have created the full-stack, single-page web application for the boids flocking simulation. It is delivered as a single, self-contained `index.html` file, with all CSS and JavaScript embedded directly within `<style>` and `<script>` tags. This implementation features: 1. **Full-Screen Canvas:** The canvas occupies the entire browser window, with no margins or scrollbars. 2. **Boids Agent Simulation:** * **Separation:** Boids steer to avoid crowding local flockmates. * **Alignment:** Boids steer towards the average heading of local flockmates. * **Cohesion:** Boids steer to move towards the average position of local flockmates. 3. **Visual Representation:** Each boid is drawn as an oriented triangle, with its orientation matching its velocity. 4. **Smooth Steering:** Achieved through the physics model where forces are applied to acceleration, which then influences velocity. 5. **Mouse Fleeing:** Boids react and flee from the mouse cursor when it's within a certain radius. 6. **No External Resources:** The entire application runs sandboxed, without any external CDN links or network requests. 7. **Dynamic Resizing:** The simulation canvas resizes automatically with the browser window. This single `index.html` file can be saved and opened directly in a web browser to run the simulation. Here is the content of `index.html`: ```html <!DOCTYPE html> <html> <head> <title>Boids Flocking Simulation</title> <style> body { margin: 0; overflow: hidden; background-color: #000; } canvas { display: block; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // Vector class for 2D math class Vector { constructor(x, y) { this.x = x || 0; this.y = y || 0; } add(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { this.x -= v.x; this.y -= v.y; return this; } mult(n) { this.x *= n; this.y *= n; return this; } div(n) { if (n !== 0) { this.x /= n; this.y /= n; } return this; } set(x, y) { this.x = x; this.y = y; } copy() { return new Vector(this.x, this.y); } mag() { return Math.sqrt(this.x * this.x + this.y * this.y); } normalize() { const mag = this.mag(); if (mag !== 0) { this.div(mag); } return this; } setMag(mag) { this.normalize(); this.mult(mag); return this; } limit(max) { const mag = this.mag(); if (mag > max) { this.normalize(); this.mult(max); } return this; } heading() { return Math.atan2(this.y, this.x); } static sub(v1, v2) { return new Vector(v1.x - v2.x, v1.y - v2.y); } static random2D() { const angle = Math.random() * Math.PI * 2; return new Vector(Math.cos(angle), Math.sin(angle)); } } // Configuration const flockSize = 200; const mouseRadius = 100; const fleeStrength = 3; // Increased flee strength for more noticeable effect const separationRadius = 25; const alignmentRadius = 50; const cohesionRadius = 50; const maxSpeed = 3; // Slightly reduced max speed for smoother movement const maxForce = 0.15; // Slightly reduced max force for smoother steering const boidSize = 7; // for drawing triangle, adjusted size slightly let flock = []; let mousePosition = new Vector(0, 0); let isMouseMoving = false; // Boid class class Boid { constructor(x, y) { this.position = new Vector(x, y); this.velocity = Vector.random2D(); this.velocity.mult(maxSpeed); this.acceleration = new Vector(0, 0); this.maxSpeed = maxSpeed; this.maxForce = maxForce; this.size = boidSize; } // Apply a force vector to the boid's acceleration applyForce(force) { this.acceleration.add(force); } // Calculate steering force towards a target seek(target) { let desired = Vector.sub(target, this.position); desired.setMag(this.maxSpeed); let steer = Vector.sub(desired, this.velocity); steer.limit(this.maxForce); return steer; } // Calculate steering force to flee from a target flee(target) { let desired = Vector.sub(target, this.position); let d = desired.mag(); // If too close, the desired velocity is far away if (d < mouseRadius) { desired.setMag(this.maxSpeed); desired.mult(-1); // Flee direction let steer = Vector.sub(desired, this.velocity); steer.limit(this.maxForce * fleeStrength); return steer; } else { return new Vector(0, 0); // No flee force if not close enough } } // Separation: steer to avoid local flockmates separation(boidsArray) { let steer = new Vector(0, 0); let count = 0; for (let other of boidsArray) { let d = Vector.dist(this.position, other.position); // If the distance is greater than 0 and less than separation radius, and not itself if (d > 0 && d < separationRadius) { // A vector pointing away from a local flockmate let diff = Vector.sub(this.position, other.position); diff.normalize(); diff.div(d); // Weight by distance steer.add(diff); count++; } } // Average the steering force if (count > 0) { steer.div(count); steer.setMag(this.maxSpeed); let steerForce = Vector.sub(steer, this.velocity); steerForce.limit(this.maxForce); return steerForce; } else { return new Vector(0, 0); } } // Alignment: steer towards the average heading of local flockmates alignment(boidsArray) { let steer = new Vector(0, 0); let count = 0; for (let other of boidsArray) { let d = Vector.dist(this.position, other.position); if (d > 0 && d < alignmentRadius) { steer.add(other.velocity); count++; } } // Average the steering force if (count > 0) { steer.div(count); steer.setMag(this.maxSpeed); let steerForce = Vector.sub(steer, this.velocity); steerForce.limit(this.maxForce); return steerForce; } else { return new Vector(0, 0); } } // Cohesion: steer to move towards the average position of local flockmates cohesion(boidsArray) { let steer = new Vector(0, 0); let count = 0; for (let other of boidsArray) { let d = Vector.dist(this.position, other.position); if (d > 0 && d < cohesionRadius) { steer.add(other.position); // Add position count++; } } // Average the position and then seek it if (count > 0) { steer.div(count); return this.seek(steer); // Seek the average position } else { return new Vector(0, 0); } } // Combine all behaviors and apply forces behaviors(boidsArray) { // Separate, align, and cohere let separation = this.separation(boidsArray); let alignment = this.alignment(boidsArray); let cohesion = this.cohesion(boidsArray); // Flee from mouse if moving let flee = new Vector(0, 0); if (isMouseMoving) { flee = this.flee(mousePosition); } // Apply weights and sum the forces // Weights adjusted for better balance separation.mult(1.5); alignment.mult(1.0); cohesion.mult(1.0); // Flee force is handled within flee function already this.applyForce(separation); this.applyForce(alignment); this.applyForce(cohesion); this.applyForce(flee); // Apply flee force } // Update velocity and position, handle edges update() { this.velocity.add(this.acceleration); this.velocity.limit(this.maxSpeed); this.position.add(this.velocity); this.acceleration.mult(0); // Clear acceleration each frame // Handle screen edges (wrap around) const canvas = document.getElementById('canvas'); if (this.position.x > canvas.width + this.size) this.position.x = -this.size; if (this.position.y > canvas.height + this.size) this.position.y = -this.size; if (this.position.x < -this.size) this.position.x = canvas.width + this.size; if (this.position.y < -this.size) this.position.y = canvas.height + this.size; } // Draw the boid as an oriented triangle show(ctx) { const angle = this.velocity.heading() + Math.PI / 2; // Point boid forward ctx.save(); ctx.translate(this.position.x, this.position.y); ctx.rotate(angle); // Drawing the triangle ctx.beginPath(); ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; // White, slightly transparent ctx.strokeStyle = 'rgba(255, 255, 255, 1)'; ctx.lineWidth = 1; // Vertices: Base is at the bottom, tip is at the top const halfBase = this.size / 2; const tipHeight = this.size * 1.5; // Make it a bit taller than the base ctx.moveTo(0, -tipHeight); // Top point ctx.lineTo(-halfBase, halfBase); // Bottom-left ctx.lineTo(halfBase, halfBase); // Bottom-right ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); } } // Helper function to calculate distance between two vectors Vector.dist = function(v1, v2) { const dx = v1.x - v2.x; const dy = v1.y - v2.y; return Math.sqrt(dx * dx + dy * dy); }; // Setup canvas and initial boids const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); function setup() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; flock = []; for (let i = 0; i < flockSize; i++) { flock.push(new Boid( Math.random() * canvas.width, Math.random() * canvas.height )); } // Event listeners for mouse movement canvas.addEventListener('mousemove', (event) => { mousePosition.set(event.clientX, event.clientY); isMouseMoving = true; // Automatically stop fleeing after a short delay if mouse stops clearTimeout(window.mouseMoveTimeout); window.mouseMoveTimeout = setTimeout(() => { isMouseMoving = false; }, 150); // Flee for 150ms after mouse stops moving }); } // Main animation loop function animate() { canvas.width = window.innerWidth; // Ensure canvas resizes with window canvas.height = window.innerHeight; ctx.clearRect(0, 0, canvas.width, canvas.height); // Update and draw each boid for (let boid of flock) { boid.behaviors(flock); // Pass the whole flock so boids can see each other boid.update(); boid.show(ctx); } requestAnimationFrame(animate); } // Initial setup and start animation setup(); animate(); // Re-setup if window is resized window.addEventListener('resize', setup); document.body.style.backgroundColor = '#000'; canvas.style.backgroundColor = '#000'; // Explicitly set canvas background </script> </body> </html> ```