Show code
<think>
Okay, I need to create an HTML file that simulates a crowd moving towards a narrow exit with forces acting on them. Let me think through the steps.
First, the HTML structure. I'll have a canvas element and a few divs to display the count and flow rate. The canvas will handle the animation. Since the user wants it self-contained, all code has to be inline.
Next, the JavaScript part. I need to model each person as an object with position, velocity, and maybe acceleration. Each person should have a force towards the door and repulsion from others and walls.
The door is a single narrow exit, so maybe the bottom edge of the canvas? Let me define the door position. The people should be attracted to the door's center, perhaps with a gravitational force. The repulsion from others can be calculated using distance between each pair of people. Also, walls are the edges of the canvas, so people repel away from them when too close.
I'll need arrays to store the people and track the ones inside. The simulation should refill the room once emptied. The flow rate is the number leaving per second, so I can track time and calculate it based on the number that exited in a frame.
For the animation loop using requestAnimationFrame. Each frame, update each person's forces, apply velocity and position, check if they've exited, and update the counters. Repopulate when all are gone.
Wait, how to calculate forces? Maybe for each person, compute a vector towards the door, scaled by some attraction strength. Then for repulsion, loop through all others and compute a repulsion vector when they are too close. Also, walls: check distance to edges and add force when near.
To prevent excessive computation, maybe optimize the repulsion by not checking every pair, but that might be too hard. Since it's several hundred people, maybe 500, a double loop for repulsion might be slow. Hmm, but the user specified several hundred, so maybe 500 is manageable?
Let me outline the steps per frame:
1. For each person in the array:
a. Compute attraction to door (maybe direction towards door center, scaled by a constant)
b. Compute repulsion from others: for every other person, if distance < threshold, add a repulsion force proportional to inverse distance squared or something.
c. Compute repulsion from walls: if near any edge (left/right/top/bottom), add a force away from the edge.
d. Sum all forces, then update acceleration, velocity, position with Euler integration (or simple step? Maybe velocity += force * delta time, but need to manage time steps properly).
Wait, time management: using delta time between frames would be better to avoid speed differences, but since requestAnimationFrame gives a timestamp, maybe calculate delta time and use that for velocity updates. Or maybe just use a constant time step since it's a simulation and the effect might not need exact physics.
Alternatively, maybe the forces can be calculated per unit time, multiplied by delta time for each frame. Let's see.
Variables needed:
- canvas context
- array of people (each with x,y,vx,vy, etc.)
- door position (maybe centered at bottom edge)
- count of remaining people
- total flowed count
- time for flow rate calculation
- a flag to know when to refill
Initialization steps:
- Populate the array with N people (like 500) randomly placed in the room (maybe top left? Or spread out initially? Wait, the user says "each steered by a force towards the door", so initial positions might be spread around the room. Or maybe they start in some area, but need to be initially inside the room.)
Wait, the door is the exit, so initial positions need to be inside the room. Maybe the room is the entire canvas, with the door being the lower edge's middle point.
Wait, the door is a single narrow exit, perhaps a small rectangle at the bottom center. So the exit is a gate, and when a person's position crosses the door, they exit.
So first, define the door as a rectangle: let's say the bottom edge's center with some width, maybe 50px wide? So the door is at the bottom edge, centered, 50px wide. When a person's y is above the door's y (so door is at the bottom edge?), wait maybe the door is at the very bottom, so the exit is when their y is below a certain point, but that might complicate.
Alternatively, the door is a rectangle at bottom center, and when the person's position enters that rectangle, they are considered to have exited.
But perhaps simpler: the door is a point at (cx, cy) at the bottom edge. People are attracted to that point. When their distance to the door point is less than a threshold, like 30px, they exit? Or perhaps when their y coordinate reaches the bottom edge.
Hmm, maybe the door is at the bottom center (cx, cy = canvas.width/2, canvas.height). The exit is when the person's y reaches the bottom of the canvas (cy), and they move towards that point. So the attraction is towards (cx, cy). But to exit, they need to be near that point and moving down. Alternatively, once they reach the bottom edge, they are removed.
But then the repulsion from the door would be tricky. Maybe the attraction is towards the door's center, but once they reach the door's area, they get through. Hmm, perhaps better to have the door as a rectangle, and once a person is inside, they exit.
Alternatively, when a person's y coordinate is at least (canvas.height - 5), they exit. So the door is the lower edge. The attraction is to the center (canvas.width/2, canvas.height). Then, the repulsion from the bottom edge would be when they are too close to the edge (but maybe they can move through it once they are close enough).
Wait, but the repulsion from the walls should prevent them from going beyond the edges. Unless the door is part of the wall but allows exiting when they reach it.
Hmm, perhaps the walls are the top, left, right, and bottom edges except near the door. The door is a region in the bottom where they can exit.
Alternatively, the attraction is to the door center, and when they reach the door's area (like within a certain radius), they are removed from the array and counted as exited.
So the steps for each person:
- Compute attraction force towards door point (cx, cy)
- Compute repulsion from other people
- Compute repulsion from walls (left/right/top)
- Sum all forces, apply to velocity
- Update position
- Check if they are near door (within exit area) to remove them
Now, the repulsion from walls: when a person is within a certain distance (like 50px) from the walls (left, right, top), they get a repulsion force pushing them away. The bottom is the exit, so maybe no repulsion there except near the door? Or maybe the bottom's repulsion is only active outside the door area.
Alternatively, the bottom edge is part of the repulsion except the door region. Not sure, perhaps easier to have repulsion from walls (left/right/top edges) but not the bottom.
Wait, the door is on the bottom edge. So, the bottom edge is the exit, so people can move towards it. Repulsion from walls would be left, right, top edges, but bottom is open except that the door is there. Hmm.
Alternatively, the repulsion from walls is for all edges, but the door region allows them to pass through. Maybe when they approach the door area, the repulsion from the bottom edge is disabled, allowing them to go through. But this could complicate.
Alternatively, just have the walls be left, right, top edges. The bottom edge is open, so no repulsion there. The attraction to the door (bottom center) would pull them down, but once they reach the bottom, they exit.
Hmm, perhaps that's simpler. Let me define:
Walls are left (x=0), right (x=canvas.width), top (y=0). The bottom (y=canvas.height) is the exit edge. The door is the entire bottom edge, so when a person's y reaches the bottom, they exit. Wait, but then how do they get out? They need to reach the bottom. So the attraction is to the center (cx, cy) of the bottom edge.
So attraction force towards (cx, cy). Each person's velocity is influenced by this, plus repulsion from others and walls.
When their y coordinate is equal to cy (the bottom edge), they are removed.
But in code, since pixels are integers, perhaps check if their y is >= (canvas.height - 5) or something to account for movement.
But maybe it's better to have the door as a point, and when they reach that point, they exit. Not sure. Alternatively, when their position is within a small radius of the door point, then exit.
Alternatively, for the exit condition, when their y is at the bottom edge (y >= canvas.height - 1), and their x is near the door's center (within some range). For example, the door is a 100px wide exit in the center, so if their x is between (cx -50, cx +50) and y is at the bottom, then they can exit.
This way, the bottleneck is enforced because only those in that region can exit.
Hmm, that might be better. So the door is a horizontal line segment in the center of the bottom edge, with a width. People can only exit through that segment.
So the exit condition is: if the person's y is greater than (canvas.height - 5) and their x is within (cx - doorWidth/2) to (cx + doorWidth/2), then they exit (removed from array).
This creates a bottleneck because only those in that horizontal strip can exit, others have to maneuver into that position.
So, door parameters:
doorX = canvas.width / 2
doorWidth = 100 (so from doorX -50 to doorX +50)
doorY = canvas.height (the bottom edge)
So exit when: y >= doorY - 2 (to account for movement) and x between (doorX - doorWidth/2) and (doorX + doorWidth/2)
Once they meet that, they leave the room, so removed from the array.
Now, the forces:
Attract to door center (doorX, doorY). The attraction force can be a vector pointing towards that point, with magnitude depending on distance.
Repulsion from other people: each person exerts a repulsion force on others when they are too close. The repulsion is proportional to 1/distance² (or something like that) so that when they are close, the force is strong.
Repulsion from walls: when a person is near the left, right, or top edges (bottom is the exit, so no repulsion there?), the force pushes them away.
Now, the forces need to be calculated for each particle each frame.
Let me think about each particle's forces:
For attraction to door:
dx = doorX - person.x
dy = doorY - person.y
distance = sqrt(dx*dx + dy*dy)
if distance > 0:
force_x = (dx / distance) * attraction_strength
force_y = (dy / distance) * attraction_strength
But maybe attraction_strength is a constant, like 0.1, so the force is proportional to the unit vector towards the door.
Alternatively, attraction could be stronger when further away, but maybe linear.
Then, repulsion from others:
for each other in people:
dx = other.x - person.x
dy = other.y - person.y
dist_sq = dx*dx + dy*dy
if dist_sq < min_dist_sq (to prevent division by zero):
continue
strength = repulsion_strength / dist_sq
force_x += (dx / sqrt(dist_sq)) * strength
force_y += (dy / sqrt(dist_sq)) * strength
Wait, but sqrt is needed for unit vector? Alternatively, the repulsion could be proportional to 1/distance^2, and direction is away from the other person. So:
if distance is small, the repulsion is strong, pushing away.
But calculating this for every pair could be computationally heavy for 500 people. Since 500 people, that's 500*500 = 250,000 calculations per frame, which might be too much. Hmm.
But maybe the user says "several hundred", so perhaps 500 is manageable? Or maybe we can optimize by not checking every pair? Like, only check neighbors within a certain radius.
Alternatively, reduce the repulsion strength, but the user wants them to pile up, so the repulsion is necessary.
Alternatively, use a threshold distance beyond which repulsion is ignored. Like, if distance is more than 100px, no repulsion.
Wait, in the problem statement, the people should be repelled by their neighbors, so the repulsion is strongest when close, which is exactly what that formula does. But with 500 particles, this could be slow. Maybe need to find a way to optimize.
Alternatively, for each particle, only check a subset of others, like in a grid? Not sure, but given time constraints, perhaps proceed with the double loop and hope it's okay.
Next, walls' repulsion:
For the left wall (x=0):
if person.x < wall_repulsion_distance, then
force_x += (wall_repulsion_strength) * (wall_repulsion_distance - person.x) / wall_repulsion_distance
Wait, but better to compute the distance to the wall and apply force.
Left wall: distance to left is person.x. If person.x < repulsion_distance, the repulsion is towards increasing x.
So the force_x += (repulsion_strength / (person.x)^2 ) ?
Wait, similar to repulsion between particles.
Alternatively, a repulsion force proportional to (repulsion_distance - distance)^3, but perhaps simpler to just a force pushing away when near the edges.
Alternatively, the repulsion from walls could be calculated as follows:
for left wall (x=0):
dist = person.x
if dist < repulsion_distance:
// push to the right
force_x += (repulsion_strength / (dist * dist)) * (repulsion_distance - dist)
Wait, not sure, perhaps the repulsion from walls is:
for each edge:
left edge: if x < repulsionDistance, then add to force_x a value proportional to (repulsionDistance - x)
Similarly for right edge (x > width - repulsionDistance): add to force_x a negative value pushing to the left.
Top edge (y < repulsionDistance): push down?
Wait, the top wall is at y=0. So if the person's y is less than repulsionDistance, then their y is near the top edge, so repulsion pushes down.
Bottom edge (the exit area) is okay, so no repulsion there.
So for each wall:
Left wall:
if (person.x < repulsionDistance) {
force_x += repulsion_strength * (repulsionDistance - person.x);
}
Similarly,
Right wall:
if (person.x > (canvas.width - repulsionDistance)) {
force_x -= repulsion_strength * (person.x - (canvas.width - repulsionDistance));
}
Top wall:
if (person.y < repulsionDistance) {
force_y += repulsion_strength * (repulsionDistance - person.y);
}
This way, the closer to the wall, the stronger the repulsion.
The repulsion_strength for walls might need to be higher than for people, to prevent them from getting stuck in the walls.
Now, putting it all together.
Variables:
- const canvas = document.getElementById('myCanvas');
- ctx = canvas.getContext('2d');
- people array: each has x, y, vx, vy.
Constants:
- doorX = canvas.width / 2,
- doorY = canvas.height,
- doorWidth = 100;
- attractionStrength = 0.2;
- repulsionStrengthPeople = 0.001;
- repulsionDistance = 15; // distance from wall to start repelling
- repulsionStrengthWall = 0.4;
- friction = 0.95; // velocity damping, to prevent infinite speed
Wait, maybe also include a friction term to slow them down over time. So in each step, velocity is multiplied by friction, to simulate some damping.
Alternatively, the forces can include a friction term. Hmm.
Now, the steps in the animation loop:
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
let exitedCount = 0;
for (let i = people.length - 1; i >= 0; i--) {
let p = people[i];
// Compute forces
let forceX = 0, forceY = 0;
// Attraction to door
let dx = doorX - p.x;
let dy = doorY - p.y;
let distance = Math.sqrt(dx*dx + dy*dy);
if (distance > 0) {
forceX += (dx / distance) * attractionStrength;
forceY += (dy / distance) * attractionStrength;
}
// Repulsion from walls
// Left wall
if (p.x < repulsionDistance) {
let delta = repulsionDistance - p.x;
forceX += delta * repulsionStrengthWall;
}
// Right wall
if (p.x > canvas.width - repulsionDistance) {
let delta = p.x - (canvas.width - repulsionDistance);
forceX -= delta * repulsionStrengthWall;
}
// Top wall
if (p.y < repulsionDistance) {
let delta = repulsionDistance - p.y;
forceY += delta * repulsionStrengthWall;
}
// Repulsion from other people
for (let j = 0; j < people.length; j++) {
if (i === j) continue;
let other = people[j];
let dx = other.x - p.x;
let dy = other.y - p.y;
let dist_sq = dx*dx + dy*dy;
if (dist_sq < 1) continue; // avoid division by zero
let invDist_sq = 1 / dist_sq;
let invDist = Math.sqrt(invDist_sq); // sqrt(1/d^2) = 1/d
// Strength is proportional to 1/d^2 ?
let strength = repulsionStrengthPeople * invDist_sq;
forceX += (dx * strength);
forceY += (dy * strength);
}
// Apply forces to velocity
// Let's say acceleration is force, so velocity += force * delta_time?
// Assuming delta_time is 1 (since we're in animation frame?)
// Maybe introduce a scaling factor to control speed.
const accelerationScale = 0.1;
p.vx += forceX * accelerationScale;
p.vy += forceY * accelerationScale;
// Apply friction (damping)
p.vx *= friction;
p.vy *= friction;
// Update position
p.x += p.vx;
p.y += p.vy;
// Check exit condition
let exitXMin = doorX - doorWidth/2;
let exitXMax = doorX + doorWidth/2;
if (p.y >= doorY - 5 && p.x >= exitXMin && p.x <= exitXMax) {
// exited!
exitedCount++;
people.splice(i, 1); // remove from array
}
}
// Draw all remaining people
ctx.fillStyle = 'blue';
for (let p of people) {
ctx.beginPath();
ctx.arc(p.x, p.y, 3, 0, 2*Math.PI);
ctx.fill();
}
// Update UI elements: exitedCount, current population, etc.
document.getElementById('exited').textContent = exitedCount;
document.getElementById('current').textContent = people.length;
// If all people have exited, reset and start again?
// Not sure yet, maybe have a timer.
requestAnimationFrame(animate);
}
Wait, but in this code, exitedCount is the number of people who exited in this frame, but the total exited should be tracked. Maybe a separate variable.
Also, initial setup: when starting, the people are placed randomly in the canvas except near the exit.
Wait, initially, perhaps the people are placed in the top left or somewhere not too close to the door.
So in the setup:
function init() {
people = [];
for (let i=0; i<500; i++) {
let x = Math.random() * (canvas.width - 200) + 100; // not too near edges?
let y = Math.random() * (canvas.height - 200) + 100;
// Ensure not in exit area initially?
// door is at the bottom center, so avoid that region
while (y > canvas.height - 100) {
y = Math.random() * (canvas.height - 200) + 100;
}
people.push({
x: x,
y: y,
vx: 0,
vy: 0
});
}
}
But this might be too much code. Let's think about constants and how to structure it.
Additionally, the problem mentions creating the simulation, but the user might need code that runs in a browser, using canvas.
Another thing: to make the people pile up, the attraction should be towards the exit, but the repulsion between them creates a jam.
Maybe the parameters need to be tuned: attraction strength, repulsion strengths, friction, etc.
Testing this code might require tweaking these values.
Now, putting all together in a HTML page:
But since the user asked for the code, perhaps present the JavaScript part with necessary variables and functions.
Wait, but the user wants the code to create the simulation.
Let me structure the code properly, using canvas, and with all the parameters.
Also, when all people have exited, perhaps reset the scene after a delay.
But the user didn't specify, so maybe just loop continuously.
Now, the full code:
```html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<div id="status">
Exited: <span id="exited">0</span>
Current: <span id="current">500</span>
</div>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const doorX = canvas.width / 2;
const doorY = canvas.height; // bottom edge
const doorWidth = 100;
const attractionStrength = 0.1;
const repulsionStrengthPeople = 0.002;
const repulsionDistance = 20; // distance from wall to start repelling
const repulsionStrengthWall = 0.5;
const friction = 0.9; // velocity damping
let people = [];
let exitedCount = 0;
function init() {
people = [];
exitedCount = 0;
document.getElementById('exited').textContent = 0;
document.getElementById('current').textContent = 500;
for (let i = 0; i < 500; i++) {
let x = Math.random() * (canvas.width - 50) + 25; // avoid edges
let y = Math.random() * (canvas.height - 200) + 50; // not near the bottom
people.push({
x: x,
y: y,
vx: 0,
vy: 0
});
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = people.length - 1; i >= 0; i--) {
const p = people[i];
let forceX = 0, forceY = 0;
// Attraction to door
const dx = doorX - p.x;
const dy = doorY - p.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > 0) {
forceX += (dx / distance) * attractionStrength;
forceY += (dy / distance) * attractionStrength;
}
// Repulsion from walls
if (p.x < repulsionDistance) {
forceX += (repulsionDistance - p.x) * repulsionStrengthWall;
} else if (p.x > canvas.width - repulsionDistance) {
forceX -= (p.x - (canvas.width - repulsionDistance)) * repulsionStrengthWall;
}
if (p.y < repulsionDistance) {
forceY += (repulsionDistance - p.y) * repulsionStrengthWall;
}
// Repulsion from other people
for (let j = 0; j < people.length; j++) {
if (i === j) continue;
const other = people[j];
const dx_p = other.x - p.x;
const dy_p = other.y - p.y;
const dist_sq = dx_p * dx_p + dy_p * dy_p;
if (dist_sq < 1) continue;
const invDist_sq = 1 / dist_sq;
const strength = repulsionStrengthPeople * invDist_sq;
forceX += dx_p * strength;
forceY += dy_p * strength;
}
// Update velocity with forces
p.vx += forceX * 0.1; // scaling factor
p.vy += forceY * 0.1;
// Apply friction
p.vx *= friction;
p.vy *= friction;
// Update position
p.x += p.vx;
p.y += p.vy;
// Check exit condition
const exitXMin = doorX - doorWidth / 2;
const exitXMax = doorX + doorWidth / 2;
if (p.y >= doorY - 5 && p.x >= exitXMin && p.x <= exitXMax) {
// exited
people.splice(i, 1);
exitedCount++;
document.getElementById('exited').textContent = exitedCount;
document.getElementById('current').textContent = people.length;
}
}
// Draw people
ctx.fillStyle = 'blue';
ctx.beginPath();
for (const p of people) {
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
}
ctx.fill();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>
```
This is a rough implementation. It might need some tuning of constants to see the piling effect. The parameters like attractionStrength, repulsionStrengthPeople, and friction can be adjusted. Also, the initial positions need to be such that they start away from the exit.
Potential issues to check:
- The repulsion between particles might not be strong enough; increasing repulsionStrengthPeople could help.
- The attraction to the door might be too weak; increasing attractionStrength.
- Friction too high or low. Friction set to 0.9 means 10% velocity loss each frame.
- The exit condition uses doorY which is the bottom of the canvas (600px if height is 600). The condition p.y >= doorY -5 would be when they're near the bottom edge.
- The exit area is a horizontal strip in the center.
The code uses canvas to draw blue dots, and shows the count of exited and current people.
I think this should work, though it might require some tweaking of values to see the desired effect of people piling up near the exit.