Boids flocking · qwen3-30b-a3b

Okay, I need to create a self-contained HTML file with a flocking simulation using the boids algorithm. Let's start by outlining the structure of the index.html file. The user wants everything in one file, so I'll include CSS in a <style> tag and JavaScript in a <script> tag.

First, the HTML structure. I'll need a canvas element that covers the entire screen. Then, some controls: Pause/Resume and Reset buttons. The canvas should be responsive, so I'll set its width and height to 100% of the viewport. But I remember that the canvas element's actual drawing buffer might need to be adjusted on resize, so I'll handle that in JavaScript.

Next, the CSS. I'll make the body take up the full screen, hide the default scrollbar, and position the canvas and controls. The controls should be at the bottom, maybe with some padding. The buttons need to be styled and positioned properly.

Now, the JavaScript. The main part is the boid simulation. I'll need a Boid class with properties like position, velocity, acceleration, and methods for updating and applying forces. The three rules: separation, alignment, cohesion. Also, the cursor influence.

For separation, each boid checks nearby boids and steers away. Alignment makes them match the average velocity of nearby boids. Cohesion makes them move towards the average position of nearby boids. Each of these forces is calculated and added to the boid's acceleration.

The cursor interaction: when the mouse is near a boid, it steers away. But only if the mouse is within a certain radius. I'll need to track the mouse position and check each boid against that.

Bounded speed: after applying forces, the boid's velocity is capped. Also, the acceleration is reset each frame.

Wrapping around the screen edges: if a boid goes off one side, it appears on the opposite side.

Pause/Resume: a boolean flag to control whether the simulation updates. When paused, the update loop stops.

Reset: recreates the array of boids with new positions.

Handling window resizing: the canvas's width and height are set to the window's inner dimensions, and the drawing buffer is updated accordingly. The boids' positions might need adjustment if the canvas size changes, but maybe not, since they're relative.

Testing the code: I'll need to make sure that the boids move smoothly, avoid each other, align, and form groups. The triangles should point in the direction of movement. The cursor interaction should make them steer away. The controls should work, and the canvas should resize properly.

Potential issues: The canvas might not scale correctly on resize. I'll have to set the canvas's width and height attributes to the window's innerWidth and innerHeight. Also, when the window is resized, the boids' positions are relative to the canvas, so they should stay in place, but the canvas size changes. That should be okay.

Another thing: the initial setup of the boids. They should be randomly positioned within the canvas. The number is 150.

For the triangles, each boid's direction is determined by their velocity. The triangle can be drawn using the context's rotate and translate methods. The points of the triangle would be calculated based on the boid's position and direction.

Now, putting it all together. The JavaScript will have the Boid class, the array of boids, the update and draw functions, and the event listeners for the buttons and mouse movement.

I need to make sure that all the code is self-contained. No external libraries, so all the math is done manually. Also, the canvas is cleared each frame, and the boids are redrawn.

Testing the code in the browser: after writing the file, I'll use the browser tool to run it, check the simulation, interact with the mouse, pause/resume, reset, and resize the window. If there are issues, like the boids not moving correctly or the canvas not resizing, I'll adjust the code accordingly.

Possible edge cases: when the mouse is not moving, the boids should flock. When the mouse is close, they should steer away. The pause button stops the simulation, and resume continues from where it left off. Reset creates new boids.

I think that covers the main points. Now, I'll write the code step by step, making sure to include all the required features and handle the interactions properly.

Okay, I need to check the flocking simulation I created. Let me start by running the code in the browser. The canvas should take up the full screen, and there should be two buttons at the bottom: Pause and Reset.

First, I'll verify that the boids are moving smoothly. They should have separation, alignment, and cohesion. When I look at the flock, they should avoid crowding each other, align their directions, and form groups. The triangles should point in the direction they're moving. If they're not doing that, maybe the rotation in the draw method is incorrect. The code uses Math.atan2(this.vel.y, this.vel.x) which should correctly rotate the triangle based on velocity.

Next, check the cursor interaction. When I move the mouse near the boids, they should steer away. The mouse force is applied if the distance is less than MOUSE_RADIUS (100 pixels). If the boids don't react, maybe the mouse position isn't being tracked correctly. The mousemove event listener updates mouseX and mouseY, which are used in the mouseForce method.

Pause and Resume: Clicking Pause should stop the simulation. The boids should freeze in place. Clicking Resume should make them continue moving. The isPaused flag controls this. If the simulation doesn't pause, there might be an issue with the update method not checking isPaused.

Reset: Clicking Reset should create a new set of 150 boids. The initBoids function clears the array and generates new ones. If the reset doesn't work, maybe the animation loop isn't properly restarted.

Canvas resizing: When I resize the browser window, the canvas should adjust to the new dimensions. The resize event listener calls resize() which updates the canvas width and height. The boids' positions are relative to the canvas, so they should stay in place, but the canvas size changes. If the boids go off-screen, maybe the wrap edges code isn't working. The code checks if pos.x is less than 0 or greater than width, and similarly for y, which should wrap them around.

Another thing to check is the forces applied. The separation, alignment, and cohesion forces might be too strong or weak. The code uses weights (1.5, 1.0, 2.0) which might need adjustment. If the flocking looks erratic, tweaking these values could help.

Also, the mouse influence radius is 100 pixels. If the boids don't react until the mouse is very close, increasing this value might make it more noticeable. Conversely, if they react too easily, decreasing it could help.

I should also check for any console errors. If there are any, they might indicate issues like undefined variables or syntax errors. The code uses requestAnimationFrame, which is standard, but if the browser doesn't support it, there could be problems. However, most modern browsers do support it.

Finally, the controls should be visible and functional. The buttons are positioned at the bottom with some padding. If they're not visible, maybe the CSS needs adjustment. The canvas is set to display: block, which should prevent any extra spacing.

Overall, the code seems to cover all the required features. The next step is to run it in the browser and observe the behavior, making adjustments as needed based on the actual output.

Okay, let's see. The user wants a flocking simulation with boids. I wrote the code, but when I ran it, there was a warning about an iframe sandbox. The console message says that an iframe with allow-scripts and allow-same-origin can escape sandboxing. But the code I wrote doesn't use iframes. Maybe the browser's security settings are causing this warning, or perhaps the environment where it's running has some restrictions.

The DOM shows "Pause Reset" which are the buttons, so the HTML structure is correct. The images part says "model does not support images," but the code uses a canvas, not images. So that's probably a false positive.

I need to check if the simulation works as expected. The boids should move, respond to the mouse, and the controls should function. Since the user can't interact directly, I'll have to rely on the code's correctness.

The code includes all necessary parts: HTML structure, CSS for full-screen canvas and controls, and JavaScript for the boids' behavior. The boids have separation, alignment, cohesion, and mouse interaction. The pause/resume and reset functions are implemented.

Possible issues: The canvas might not resize properly. The code listens for resize events and updates the canvas dimensions. But when the window is resized, the boids' positions are relative to the canvas, so they should stay in place. However, if the canvas is resized, the boids' positions might not adjust, but the code doesn't need to because they're drawn based on their own positions.

Another thing: The mouse tracking. The code adds a mousemove event listener to update mouseX and mouseY. The boids check their distance to the mouse and apply a force if within 100 pixels. That should work.

The pause/resume toggle uses a flag, which stops the update loop. The reset function clears the boids array and creates new ones. The animation loop is restarted after reset.

I think the code is correct. The warning might be from the browser's sandboxing, but the simulation itself should work. Since the user can't test it directly, I'll proceed with the final answer, noting the checked behaviors and the unverified parts.