Every answer below carries the name of the model that wrote it. Blind refers to the scoring: the review was done without knowing which model produced which answer — the published result names them.
2 of the 11 local models delivered nothing through our test harness in this round — for reasons that lie with our setup, not with the models. Those cards are marked DNF like any other, but they are not evidence about those models — the reason is noted on the card itself.
Create ONE self-contained HTML file (STRICT LIMIT: max 7000 characters in total — this is a budget on characters, not on lines, so removing line breaks does not help) that simulates single-lane traffic on a ring road drawn to a <canvas> using the Nagel-Schreckenberg rules: each step every car accelerates up to a maximum speed, slows to avoid the car ahead, randomly dawdles by one unit with some probability, and then moves. Start from evenly spaced cars, so a phantom jam forms and travels backwards through the flow. Draw the ring and colour cars by speed, and show the average speed. Smooth requestAnimationFrame animation, NO user input, starts immediately and keeps running (restart with a fresh random instance when finished). No external libraries, no comments needed. Output ONLY the HTML file content, nothing else.
<!DOCTYPE html>
<html><head><title>NS Traffic Simulation</title><style>body{margin:0;background:#111;overflow:hidden}canvas{display:block}</style></head><body onload="init()"> <canvas id="c"></canvas><script>var c=document.getElementById('c');var ctx=c.getContext('2d');ctx.canvas.width=800;ctx.canvas.height=400;var L=100; // Road length (discrete units) var V_max=5; var N=30; // Number of cars var P=0.05; // Random slow down probability
var cars=[];var lastTime=0;
function init(){
cars=[];
for(let i=0;i<N;i++){
let pos=Math.floor((i/N)*L);
let speed=1+Math.floor(Math.random()*V_max);
cars.push({x:pos,v:speed});
}
lastTime=performance.now();
animate();
}
function update(){
const t=Date.now();
if(!lastTime){lastTime=t;}
var dt=Math.min(1/30,(t-lastTime)/16); // Scaling factor for smoother updates
lastTime=t;
for(let i=0;i<N;i++){
const carA={x:cars[i].x,v:cars[i].v};
// Find the distance to the car ahead (circular dependency)
let j=(i+1)%N;
let carB={x:cars[j].x,v:cars[j].v};
let dist=carB.x-carA.x;
if(dist<0){dist+=L;}
// 1. Max Acceleration (a)
let a=Math.min(V_max, Math.floor(carA.v+dt));
// 2. Braking (s)
let s=Math.max(0, a-(dist/L)*V_max); // Simple braking model based on gap
// Update speed
cars[i].v=s;
// 3. Random Slow Down (d)
if(Math.random()<P){
cars[i].v=Math.max(0,cars[i].v-1);
}
// 4. Move
let newX=cars[i].x+cars[i].v*dt;
// Apply circular boundary conditions (wrap around)
if(newX>=L){newX-=L;}
if(newX<0){newX+=L;}
cars[i].x=Math.floor(newX);
}
}
function draw(){
ctx.clearRect(0,0,800,400);
let totalSpeed=0;
// Draw the road (Circle path)
ctx.strokeStyle='#333';
ctx.lineWidth=2;
ctx.beginPath();
ctx.arc(400, 200, 380, 0, Math.PI*2);
ctx.stroke();
// Draw cars
for(let i=0;i<N;i++){
const car={x:cars[i].x,v:cars[i].v};
totalSpeed+=car.v;
// Calculate drawing position on the circle (approximating a path)
let angle = Math.atan2(car.y-200, car.x-400);
let radius=380-(car.v*1.5); // Make faster cars slightly smaller/more visible? No, just use the stored x for simplicity in this constrained environment
// Simple drawing approximation: Use scaled X coordinate relative to L
let drawX = 20+((car.x/(L))*760) + Math.sin(car.x/10)*5; // Distribute linearly but with slight wobble
let drawY = 400-Math.abs(car.y);
// Color based on speed (Red=Fast, Green=Slow)
let speedRatio=Math.min(1,(car.v+1)/V_max);
let r=255*speedRatio;
let g=255*(1-speedRatio);
ctx.fillStyle=`rgb(${Math.floor(r)},${Math.floor(g)},70)`;
// Draw the car (a simple rectangle approximation on the canvas plane)
ctx.fillRect(drawX, 180-(car.v*2), 10,(car.v+1)*2);
}
// Display average speed
let avgSpeed=totalSpeed/N;
ctx.fillStyle='#fff';
ctx.font='24px Arial';
ctx.fillText(`Average Speed: ${avgSpeed.toFixed(2)}`, 10, 30);
}
function animate(time){
update();
draw();
requestAnimationFrame(animate);
}
</script></body></html>```html
<!DOCTYPE html>
<html><head><title>NS Traffic Flow</title></head><body style="margin:0;overflow:hidden"><canvas id="c"></canvas><script>const c=document.getElementById('c');const ctx=c.getContext('2d');ctx.canvas.width=800;ctx.canvas.height=400;let N=100;let L=N*30;let R=Math.min(c.canvas.width, c.canvas.height)/2 - 50;let center=Math.min(c.canvas.width, c.canvas.height)*0.8;let offset=center/2;let MAX_SPEED=6;let P_SLOWDOWN=0.3;let cars=[];function init(){cars=[];for(let i=1;i<=N;i++){let initialPos=i*Math.random()*L;cars.push({pos:initialPos,speed:Math.floor(Math.random()*MAX_SPEED)});}}init();function drawRing(){ctx.clearRect(0,0,c.canvas.width,c.canvas.height);ctx.beginPath();ctx.arc(center,offset,R,0,2*Math.PI);ctx.strokeStyle="#333";ctx.lineWidth=5;ctx.stroke();ctx.restore();}function updateCars(){let oldSpeedSum=0;for(let i=0;i<N;i++){let car={pos:cars[i].pos,speed:cars[i].speed};let d=MAX_SPEED;if(car.speed < d)d=car.speed+1;let posA=(car.pos+d)*30%L;let posB=(cars[(i+1)%N].pos+d)*30%L;let gap=Math.min(Math.abs(posA-posB), L-Math.abs(posA-posB));if(gap<d){car.speed=Math.max(0,d-gap);}let newSpeed=car.speed;if(Math.random()<P_SLOWDOWN)newSpeed=Math.floor(newSpeed*0.8);car.speed=Math.min(MAX_SPEED,newSpeed);let oldPos=car.pos;car.pos=(oldPos+car.speed)*30%L;cars[i]={pos:car.pos,speed:car.speed};oldSpeedSum+=car.speed;}let avgSpeed=oldSpeedSum/N;return {avgSpeed:avgSpeed};}function drawCars(avg){drawRing();for(let i=0;i<N;i++){let car=cars[i];let speedFactor=Math.min(1,car.speed/(MAX_SPEED*2));let color='rgb('+(255-car.speed*20)+','+Math.floor(car.speed*40)+(255-car.speed*20*2)+')';ctx.fillStyle=color;ctx.beginPath();let angle=(car.pos/L)*Math.PI*(1+(c.canvas.height/(2*R)))%Math.PI;let x=center+R*Math.cos(angle);let y=offset+R*Math.sin(angle);ctx.arc(x,y,5+speedFactor*3,0,Math.PI*2);ctx.fill();}}function animate(){try{let result=updateCars();drawCars(result.avgSpeed);ctx.fillStyle="#fff";ctx.font="24px sans-serif";ctx.fillText("Avg Speed: "+(result.avgSpeed).toFixed(1), 20, 50);requestAnimationFrame(animate);}catch(e){console.log("Simulation finished.");setTimeout(()=>init(),100);}}animate();</script></body></html>
``````html
<!DOCTYPE html>
<html><head><title>Traffic Simulation</title></head><style>canvas{border:1px solid #333}body{background:#000;color:#fff;text-align:center;margin:0}</style><canvas id=c width=800 height=400></canvas><div id=speeddisp style="position:absolute;top:20px;left:50%;transform:translateX(-50%)">Average speed: 0</div>
<script>let c=document.getElementById('c'), ctx=c.getContext('2d'), len=180, maxSpeed=3, cars=[];function init(){cars=[];for(let i=0;i<400;i++)cars.push({x:i*len/60,y:c.height/2,r:5,s:0,a:0,d:i*len/60});let s=c.width/80;ctx.strokeStyle='white';ctx.lineWidth=2}function update(){for(let i=0;i<cars.length;i++){let car=cars[i], lead=i==cars.length-1?cars[0]:cars[(i+1)%cars.length];let dx=(lead.x - (car.x + len))%c.width;if(dx < 0)dx +=c.width;let maxSpd=Math.min(maxSpeed, car.x + maxSpeed > lead.x ? lead.x - car.x : maxSpeed);car.a=0;car.s=Math.min(maxSpd, car.s+1-(Math.random()>.05));if(car.s>lead.x - car.x)car.s=lead.x - car.x -1;if(i==0 && Math.random()<.05)car.s=0;let newx=car.x + (car.s?car.s:-1);if(newx <0)newx +=c.width;if(newx > c.width - len)newx -=c.width;cars[i].x=newx}draw();setTimeout(update,50)}function draw(){ctx.fillStyle='black';ctx.fillRect(0,0,c.width,c.height);let avg=0, last=cars.length-1;for(let i=0;i<cars.length;i++){let car=cars[i];ctx.beginPath();if(car.s>0)ctx.fillStyle='#0f0';else ctx.fillStyle='#f00';ctx.arc(car.x,car.y,5,0,2*Math.PI);ctx.fill();avg +=car.s}document.getElementById('speeddisp').textContent=`Average speed: ${(Math.round(avg/cars.length)).toString()}`;for(let i=1;i<cars.length;i++){let dx=cars[i].x - cars[i-1].x;if(dx <0)dx +=c.width;if(dx <5 && Math.random()<.2){let j=i-1;while(j--)if(cars[j].x > cars[j+1].x)cars.splice(j,1)}}}window.onload=init;draw();</script></html>
``````html
<!DOCTYPE html>
<html><head><title>NS Traffic Simulation</title></head><body style="margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#333"><canvas id="c"></canvas><script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W, H;
let CAR_WIDTH = 15;
let CAR_HEIGHT = 8;
let MAX_SPEED = 4; // v_max
let LANES = 1; // Single lane
let ROAD_RADIUS = 100;
let NUM_CAR_SPACING = 20;
let N_CARS = 30;
function resizeCanvas() {
W = window.innerWidth * 0.8;
H = window.innerHeight * 0.8;
canvas.width = W;
canvas.height = H;
}
window.addEventListener('resize', resizeCanvas);
// Global state variables
let cars = [];
let simulationRunning = true;
function initializeCars() {
cars = [];
const circumference = 2 * Math.PI * ROAD_RADIUS;
for (let i = 0; i < N_CARS; i++) {
// Initial positions are evenly spaced along the circle
let angle = (i / N_CARS) * 2 * Math.PI;
let x = W / 2 + ROAD_RADIUS * Math.cos(angle);
let y = H / 2 + ROAD_RADIUS * Math.sin(angle);
cars.push({ id: i, x: x, y: y, speed: 0, length: circumference / N_CARS });
}
}
function getDistance(carA, carB) {
// Calculate distance along the ring (circularly)
let dx = carA.x - carB.x;
let dy = carA.y - carB.y;
return Math.min(Math.sqrt(dx * dx + dy * dy), 2 * Math.PI * ROAD_RADIUS - Math.sqrt(dx * dx + dy * dy));
}
function updateSimulation() {
if (!simulationRunning) return;
const numCars = cars.length;
let totalSpeed = 0;
// Sort by position (approximate angle/x for consistent processing order)
cars.sort((a, b) => Math.atan2(b.y - H / 2, b.x - W / 2) - Math.atan2(a.y - H / 2, a.x - W / 2));
// Process cars in order
for (let i = 0; i < numCars; i++) {
let car = cars[i];
// Find the car ahead (wrapping around)
let nextIndex = (i + 1) % numCars;
let leadCar = cars[nextIndex];
// --- NS Rules ---
// 1. Acceleration: v' = min(v + 1, MAX_SPEED, d - 1)
// Distance 'd' is the distance to car ahead. If d=0 (collision), set it high for safety.
let d = getDistance(car, leadCar);
let accelLimit = Math.max(0, d - 1); // Must maintain a gap of at least 1
let v_prime = Math.min(car.speed + 1, MAX_SPEED, accelLimit);
// 2. Random Slowdown (Dawning): v'' = max(0, v' - 1) with probability P
const p = 0.4; // Probability of slowing down
if (Math.random() < p && v_prime > 0) {
v_prime = Math.max(0, v_prime - 1);
}
// 3. Movement: New speed is v''' = v''
let newSpeed = v_prime;
totalSpeed += newSpeed;
car.speed = newSpeed;
// Update position (linear movement approximation along the arc)
const angularVelocity = newSpeed / ROAD_RADIUS;
const angle = Math.atan2(car.y - H / 2, car.x - W / 2);
let newX = W / 2 + (ROAD_RADIUS + CAR_WIDTH * 0.5) * Math.cos(angle + angularVelocity * 0.1);
let newY = H / 2 + (ROAD_RADIUS + CAR_HEIGHT * 0.5) * Math.sin(angle + angularVelocity * 0.1);
// Simple linear projection for visualization stability, assuming small steps
car.x += newSpeed * Math.cos(angle);
car.y += newSpeed * Math.sin(angle);
}
return totalSpeed / numCars;
}
function drawSimulation(avgSpeed) {
ctx.clearRect(0, 0, W, H);
// Draw the Ring Road (dashed circle)
ctx.beginPath();
ctx.arc(W / 2, H / 2, ROAD_RADIUS, 0, 2 * Math.PI);
ctx.strokeStyle = '#666';
ctx.lineWidth = 3;
ctx.stroke();
// Draw cars and their speed visualization (tail)
for (let car of cars) {
// Color based on speed (0=Red, MaxSpeed=Green)
const ratio = Math.min(1, car.speed / MAX_SPEED);
const r = Math.floor(255 * (1 - ratio));
const g = Math.floor(255 * ratio);
const b = 0;
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
// Drawing the car body
ctx.fillRect(car.x - CAR_WIDTH / 2, car.y - CAR_HEIGHT / 2, CAR_WIDTH, CAR_HEIGHT);
}
// Draw average speed text overlay
ctx.fillStyle = '#FFF';
ctx.font = 'bold 20px Arial';
ctx.fillText(`Avg Speed: ${avgSpeed.toFixed(2)}`, 10, 30);
}
function gameLoop() {
const avgSpeed = updateSimulation();
drawSimulation(avgSpeed);
requestAnimationFrame(gameLoop);
}
// --- Initialization and Startup ---
resizeCanvas();
initializeCars();
gameLoop();
</script></body></html>
``````html
<!DOCTYPE html><html><body style="background:#1a1a1a;color:#fff;text-align:center"><canvas id=c width=800 height=600></canvas><div id=speeds></div>
<script>
let canvas=c.getContext('2d'),w=800,h=600,radius=500,cars=[],nCars=100,maxSpeed=2,probDecel=0.3,ringLength=1000,space=ringLength/nCars,carWidth=2;
for(let i=0;i<nCars;i++)cars.push({x:(i+0.5)*space,speed:0,maxSpeed:maxSpeed,reactionTime:1});
function drawRing(){
canvas.beginPath();canvas.strokeStyle='#333';canvas.lineWidth=2;canvas.arc(w/2,h/2,radius,0,Math.PI*2);canvas.stroke();}
function drawCar(car){
let angle=(car.x/ringLength)*Math.PI*2;
let x=w/2+radius*Math.cos(angle),y=h/2+radius*Math.sin(angle);
let nextX=w/2+radius*Math.cos((car.x+1)/ringLength*Math.PI*2),
nextY=h/2+radius*Math.sin((car.x+1)/ringLength*Math.PI*2);
canvas.beginPath();
canvas.strokeStyle=`hsl(${(car.speed/maxSpeed)*360},50%,40%)`;
canvas.moveTo(x,y);canvas.lineTo(nextX,nextY);canvas.stroke();}
function update(){
let nextCars=cars.map(car=>({x:car.x,speed:car.speed,maxSpeed:car.maxSpeed,reactionTime:car.reactionTime}));
for(let i=0;i<nCars;i++){
let car=cars[i],nextCar=(i==nCars-1?cars[0]:cars[i+1]);
if(nextCar.x<=car.x)nextCar.x+=ringLength;
let distance=nextCar.x-car.x-carWidth;
distance-=car.reactionTime*car.speed;
if(distance<0)distance=0;
nextCars[i].speed=Math.min(car.speed+1,car.maxSpeed);
if(nextCars[i].speed>distance/2)nextCars[i].speed=Math.floor(distance/2);
if(Math.random()<probDecel&&nextCars[i].speed>0)nextCars[i].speed--;
nextCars[i].x=(car.x+nextCars[i].speed)%ringLength;}
cars=nextCars;
let avgSpeed=cars.reduce((a,c)=>a+c.speed,0)/nCars;
speeds.textContent=`Average Speed: ${avgSpeed.toFixed(2)} units/frame`;
requestAnimationFrame(update);}
function reset(){
cars=[];for(let i=0;i<nCars;i++)cars.push({x:i*space+Math.random()*1,speed:0,maxSpeed:maxSpeed,reactionTime:1});update();}
canvas.strokeStyle='#333';drawRing();
cars.forEach(car=>{car.x=(Math.random())*ringLength;});
requestAnimationFrame(update());
</script></body></html>
``````html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nagel-Schreckenberg Simulation</title>
<style>
body { margin: 0; }
canvas { border: solid 1px black; background: white; display: block; margin: auto; max-width: 100%; height: auto;}
</style>
</head>
<body>
<canvas id="grid" width="800" height="250"></canvas>
<script>
const canvas = document.getElementById('grid');
const ctx = canvas.getContext('2d');
let cars, maxSpeed, dawdleProb;
function init() {
reset();
animate();
}
function reset() {
const numCars = 80;
maxSpeed = 15;
dawdleProb = 0.3;
const spacing = canvas.width / (numCars + 1);
cars = Array.from({ length: numCars }, () => ({
x: i => i * spacing,
speed: () => Math.floor(Math.random() * maxSpeed) + 1,
color: () => `hsl(${speed() * 20}, 100%, 50%)`
}));
requestAnimationFrame(animate);
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCars();
cars = cars.map((car, i) => accelerateCar(dawdleCar(...car), breakCar(car)));
const avgSpeed = cars.reduce((acc, car) => acc + car.speed(), 0) / cars.length;
ctx.font = '16px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.fillText(`Average Speed: ${avgSpeed.toFixed(2)}`, 50, canvas.height - 25);
requestAnimationFrame(animate);
}
function drawCars() {
cars.forEach((car) => {
const carLength = maxSpeed * 10;
ctx.fillStyle = car.color();
ctx.fillRect(car.x(), canvas.height / 2, carLength, 35); // x, y, width, height
});
}
function accelerateCar(car) {
const newSpeed = Math.min(maxSpeed, car.speed() + 1);
return { ...car, speed: () => newSpeed };
}
function dawdleCar({x}, i) {
if (Math.random() < dawdleProb) x(); // random dawdling
return cars[(i + 1) % cars.length].x();
}
function breakCar(car, prevCar = cars[cars.length - 1]) {
const carLength = maxSpeed * 10;
const distanceToPrevCar = (prevCar.x() - car.x()) / spacing;
if (distanceToPrevCar < car.speed()) {
return { ...car, speed: () => Math.max(distanceToPrevCar, 0) }; // avoid collisions
}
return car;
}
init();
</script>
</body>
</html>
```<think>
Okay, I need to create a self-contained HTML file that simulates traffic on a ring road using the Nagel-Schreckenberg model. Let me recall the rules. The model has cars moving on a single lane, and each step involves acceleration, deceleration to avoid collisions, random slowing, and then moving. The cars should be evenly spaced initially to form a phantom jam. The visualization should show the ring road and color cars based on their speed.
First, I'll structure the HTML. The canvas element must be included. I'll set the width and height attributes, maybe 800x400px. Then, the JavaScript part will handle the simulation and animation.
I need to initialize the canvas context. Let's use a 2D context. The main loop will use requestAnimationFrame for smooth animation.
For the traffic model, the road is a ring, so the positions wrap around. I need an array of cars. Each car has a position and speed. Initially, the cars are equally spaced. Let me think: if the road is length L, then spacing is L / num_cars. Maybe use an array of objects with pos and speed properties.
The Nagel-Schreckenberg rules: each step, for each car:
1. Accelerate if below max speed. Max speed can be set, maybe 3 or 4.
2. Check the distance to the car ahead. Decelerate so that the new speed doesn't make the next position exceed the distance to the next car minus 1 (since positions are integers).
3. With a certain probability (like 20%), the car slows down by 1, but not below 0.
4. Then, move the car by its current speed.
Wait, the order is important. The steps are done in parallel for all cars each step. So, during each simulation step, all updates are based on the previous state, not intermediate changes.
So, I need to process each car in order, perhaps, but store the new positions/speeds in a temporary array or directly update the cars array after calculating all changes in a buffer to avoid interference.
Hmm, maybe first calculate for each car the new speed and position based on the current state (before any updates). Then apply all the changes at once.
The parameters: let's choose max speed (v_max), slowing probability (p), and the road length (N). The number of cars should be less than N. To start with a phantom jam, the cars should be evenly spaced but maybe with some small perturbation? Or just evenly spaced and see the jam form naturally.
Wait, Nagel-Schreckenberg model can form jams even with random noise. Since the initial setup is evenly spaced, when a random deceleration happens, that might trigger the jam.
Let me set up the initial cars. Let's say the road length is, say, 100 units. Number of cars is maybe 30. So each starts spaced by 100/30 ≈ 3.33, but since positions are integers, maybe start at 0,3,6,9 etc.
Wait, positions can be arranged in a circle. So each car's initial position is i * (N / num_cars) for i from 0 to num_cars-1, but rounded to integer? Need to ensure that spacing is correct.
Alternatively, place them at positions 0, N/num_cars, 2*N/num_cars, etc. Since N must be divisible by num_cars? Hmm, maybe pick a N that's a multiple of the number of cars. Or maybe use N=100 and num_cars=30, spacing 100/30 ≈ 3.333, but since it's integers, perhaps initial positions are spaced by 3 (so total cars would be 33), but maybe that's okay.
Alternatively, maybe use N=150 and num_cars=50 for even spacing. Let me decide on some numbers. Let's go with numCars = 30, roadLength = 100. So spacing is 100/30 ≈ 3.33, so positions would be 0,3,6,9,... but then the 30th car would be at 29*3.33 = 96.66, which is over 100. Hmm, maybe better to compute the spacing as (roadLength / numCars) and use that as their initial positions, but with integer positions.
Alternatively, perhaps start by placing the first car at position 0, then each subsequent car is spaced by roadLength/numCars, rounded to the nearest integer. But that might not perfectly fill the road.
Alternatively, use the road length as an integer, and position each car at initial positions starting at 0, then i*(roadLength/numCars) for each i. But since roadLength needs to be divisible by numCars, maybe set roadLength to 30, and numCars=20? Not sure. Maybe it's okay to have positions as floats but the cars move in integers? Wait, in the model, positions and speeds are integers.
Wait, in the Nagel model, the road is a discrete lattice with positions mod N (the length). Cars have integer positions and speeds. So each step, they move forward by their speed. The next position is (current pos + speed) mod N.
The distance to the next car is (next_pos - current_pos) mod N, but actually the distance to the preceding car is the position difference. Wait, the distance to the next car ahead would be the next car's position minus current position, but since it's a ring, if it's negative, add N. Wait, no, for the distance to the car in front, it's (next_car_pos - current_pos) mod N. But in programming terms, you can find the next car and compute the distance as (next_car_pos - current_pos) if positive, else N + (next_car_pos - current_pos). Alternatively, you can sort the cars by position and compute the distances between consecutive cars, then wrap around for the last one to the first.
Hmm, that might be a bit complex. Alternatively, for each car, find the distance to the next car ahead. To do that, maybe sort the cars by position, then the next car for each is next in the array, except the last which wraps to first. Then the distance would be (next_pos - current_pos) if next_pos > current_pos else next_pos + (N - current_pos).
Alternatively, for each car, iterate through all other cars to find the next one ahead. Not efficient but manageable for a small number of cars like 30.
Alternatively, pre-sort the cars by position once per step, then compute the distances between consecutive cars.
Maybe that's better. Let me think of steps:
Each step:
1. Sort the cars by position in increasing order.
2. For each car in the sorted list:
a. Find the next car ahead (next in list or first if last)
b. Compute distance to next car.
c. Update speed based on Nagel rules.
Then after all cars are processed, update their positions.
Wait, but in the Nagel model, the order of processing might matter. Since all changes are based on the current state.
Alternatively, perhaps process each car in order and store the new speed and position in a temporary array, then update the cars.
Wait, the exact steps for each car in each time step are:
- For each car, in parallel (so using previous state):
a. Accelerate: if speed < v_max, then speed +=1.
b. Look ahead to the next car. The distance is (pos_next - pos_current) mod N. The distance is (pos_next - pos_current) if pos_next > pos_current, else N - (pos_current - pos_next). So, the distance to the next car ahead is (next_pos - pos) if next_pos > pos, else N - (pos - next_pos).
Wait, actually, the distance between the current car and the next car ahead is (next_pos - current_pos) mod N. But since it's a ring, it's actually the minimal distance forward. So the distance ahead is (next_pos - current_pos) if next_pos > current_pos, else N - (current_pos - next_pos). But that's the distance. The distance in cells to the next car is (next_pos - current_pos) if next_pos > current_pos, else (next_pos + N - current_pos). Because the road is circular.
The idea is that the next car is the one that's closest in the forward direction.
So for each car, the distance to the next car ahead is (next_car.pos - car.pos) if next_car.pos > car.pos else (next_car.pos + N - car.pos). Wait, but how to find the next car?
Alternatively, after sorting the cars by position, the next car for each is the next in the list, except for the last which wraps around to first. The distance is then (next.pos - car.pos) if next is after, else N - (car.pos - next.pos). Wait, not sure.
Alternatively, for each car, the next car ahead is the first car in the list with a position greater than the current car's position. If none exist, then it's the first car (since it's a ring).
This could be done by sorting the cars and then for each car at index i, the next is i+1, except last which wraps to 0.
Then the distance is (cars[(i+1)%numCars].pos - cars[i].pos).
But that only works if the cars are sorted in order of increasing position. If they are sorted, then the distance between consecutive cars is just next.pos - current.pos, but for the last car, the next is first, so distance is (cars[0].pos + N - cars[last].pos).
Wait, the distance between last car (car at position L) and first car (position F) is F + N - L, because it's a circular road. But in an array sorted by position, the first car's position is smallest, so if the current car is last in the array (highest position), then next is first, so the distance would be first.pos + N - current.pos.
So perhaps in code, after sorting the cars by position, for each car i:
nextCarIndex = (i + 1) % numCars;
nextCar = cars[nextCarIndex];
distance = nextCar.pos - car.pos;
if (distance < 0) distance += N;
Then the distance to the next car is distance.
Wait, but nextCar's position is after the current car only if we sorted correctly. Wait, if the list is sorted in increasing order, the nextCar is the next in the list, so the distance is nextCar.pos minus current.pos. But if it's the last car, next is first, so nextCar.pos is less than current.pos, so distance is nextCar.pos + N - current.pos.
Wait, the calculation above would give the correct distance. So:
distance = (nextCar.pos - car.pos + N) % N;
Wait, not exactly. Let me think:
Suppose N=100.
Car is at 95, next is at 5 (the first car). The distance between them is 10 (5 + 100 -95 = 10). The calculation (5 -95) is -90, adding N gives 10. So yes, distance = (nextCar.pos - car.pos + N) % N.
Wait, but (nextCar.pos - car.pos) could be negative, so adding N and mod N gives the positive distance.
Wait, actually, (nextCar.pos - car.pos) mod N gives the correct distance. Because mod N will give a value between 0 and N-1. However, since the next car is ahead, the distance is positive. Wait but mod N could also give a value between 0 and N-1, but if the next car is behind, the mod would still give the correct distance in the forward direction.
Wait, perhaps the distance is (nextCar.pos - car.pos + N) % N.
Yes, that would give the minimal distance in the forward direction.
So, once cars are sorted by position, for each car, the distance to the next car ahead is (nextCar.pos - car.pos + N) % N.
But since the cars are in order, the next car should be ahead, so the distance is nextCar.pos - car.pos if nextCar is in front, else (nextCar.pos + N - car.pos). So this formula works.
Once we have the distance, the deceleration step: the car will reduce speed if it's higher than the distance minus 1. Because the new position after moving would be current_pos + speed + 1? Wait, the Nagel rules:
After accelerating, the speed is min( speed + 1, v_max )
Then, it looks ahead to the distance to the next car, and speeds down so that:
speed = min( current_speed, (distance_to_next_car - 1) )
Because if the speed is higher than (distance -1), then after moving, the position would be current_pos + speed, which would be beyond the next car's position minus 1 (since the next car is at distance d). So to prevent collisions, speed can't exceed d-1.
Wait, the distance is d. The next car is at d away. So the car's next position should not be >= nextCar's current position. Because nextCar is moving as well.
Wait, actually, in the model, each car's position is updated after all cars have their speed calculated. Because all the speed updates are based on the previous state.
Hmm, this is a bit tricky. Let me recall the Nagel-Schreckenberg model steps:
The algorithm is:
For each time step:
1. Accelerate: if current speed < v_max, then speed +=1
2. Look ahead to the next car's position. The distance is the number of cells to the next car ahead.
Then, if (current_speed > (distance -1)), set speed to (distance -1).
3. Randomization: with probability p, decrease speed by 1 (if >0)
4. Move: position += speed mod N.
Wait, but all these steps are done in parallel. So all cars' new speeds are computed based on their previous positions and speeds.
Therefore, the distance to the next car is computed based on the previous positions (before any moves), and the speed changes are all based on previous data.
So, steps in code:
- Sort the cars by position.
- For each car, compute the next car and distance.
- Then, for each car in parallel (so using temporary arrays):
a. Accelerate (speed +=1, capped at v_max)
b. decelerate: set speed to min(speed, distance -1)
c. randomize: with probability p, speed = max(0, speed -1)
d. record new speed.
- After all cars have their new speed, compute new positions: new_pos = (current_pos + speed) mod N.
Wait, but in code, need to first calculate all the new speeds and new positions based on the original positions.
Therefore, in code steps:
Each step:
1. Sort cars by position.
2. Compute next cars and distances for each.
3. Create an array of new_speeds.
4. For each car:
a. new_speed = car.speed
b. accelerate: new_speed = Math.min(new_speed +1, v_max)
c. decelerate: new_speed = Math.min(new_speed, distance -1) (distance is stored earlier)
d. randomize: if Math.random() < p, new_speed = Math.max(0, new_speed -1)
e. store new_speed in new_speeds array.
5. After all new_speeds are computed, update each car's speed and position.
Wait, but the position is updated as (old position + new_speed) mod N? Wait, no: the new speed determines how much they move. So the new position is (current_pos + new_speed) mod N.
Wait, but all new speeds are computed in parallel, so positions are updated based on those new speeds.
Yes.
So steps in code:
- For each car, after calculating new_speed, set new_pos = (car.pos + new_speed) % N.
Therefore, after calculating all new_speeds, we can loop again to update each car's speed and position.
Alternatively, collect all the new_speeds and new_positions in temporary arrays, then assign them after processing all cars.
Hmm.
Now, the visualization. The ring road can be drawn as a circle or a loop. To draw a circular road, perhaps using canvas's arc method. The cars can be drawn as small rectangles or circles along the circumference.
Alternatively, since it's a single lane, perhaps draw the road as a loop, but represent cars as points along the circumference.
Let me think of the drawing:
The canvas is 800x400. Maybe draw the ring as a circle with a radius of 150, centered at (400, 200). The circumference is 2πr ≈ 942 units. But the road length N can be 100 units, so each unit corresponds to 9.42 pixels along the circumference.
Wait, but maybe it's easier to parameterize the angle for each position. The road is a circle, so each position corresponds to an angle. Let's say the road length N is mapped to the circumference. For example, if N is 100, then each unit is 360 degrees / 100 = 3.6 degrees per unit.
Therefore, for a car at position s on the road (0 <= s < N), its angle is (s / N) * 360 degrees, then converted to radians.
So, the coordinates on the circle can be calculated as:
center_x = canvas.width / 2
center_y = canvas.height / 2
radius = 150 (for example)
angle = ( (s / N) * 2 * Math.PI ) radians
x = center_x + radius * Math.cos(angle)
y = center_y + radius * Math.sin(angle)
So, each car is drawn as a small circle or rectangle at (x,y). The color could be based on their speed.
Alternatively, cars can be drawn as small arcs or lines along the circumference.
The drawing steps:
- Clear the canvas.
- Draw the ring (white or gray).
- For each car, compute its position on the circumference.
- Draw the car as a small circle, color based on speed.
Maybe green to red, depending on speed.
Alternatively, use the current speed to determine color.
Now, code structure:
Initialization:
- Set canvas size.
- Set parameters: N = 100 (road length), numCars = e.g., 20.
- Cars array: each has pos (0..N-1), speed (initially 0 or random?)
Wait, initial positions can be spaced evenly. To start, maybe distribute cars evenly around the ring. Or randomly but not overlapping.
Wait, in code, when initializing, perhaps:
for (let i=0; i<numCars; i++) {
let pos = i * (N / numCars) % N;
let car = { pos: pos % N, speed: 0 };
cars.push(car);
}
But this ensures no overlap initially.
Or random positions with some spacing.
But for simplicity, even distribution.
Variables:
- N = 100 (road length)
- v_max = 5 (maximum speed)
- p = 0.3 (probability of slowing down)
- frame rate: use requestAnimationFrame.
- Draw function:
clear canvas.
draw ring (circle outline).
for each car:
compute angle based on pos.
draw a small circle at (x,y), with color based on speed.
Then, the animation loop:
function animate() {
update() // compute new positions and speeds.
draw();
requestAnimationFrame(animate);
}
The update function:
cars.sort( (a,b)=>a.pos - b.pos );
let nextCars = [];
for (let i=0; i<numCars; i++) {
let nextIndex = (i+1) % numCars;
nextCars[i] = cars[nextIndex];
}
// compute distances for each car.
let distances = [];
for (let i=0; i<numCars; i++) {
let car = cars[i];
let nextCar = nextCars[i];
let distance = (nextCar.pos - car.pos + N) % N;
distances[i] = distance;
}
// compute new speeds.
let newSpeeds = [];
for (let i=0; i<numCars; i++) {
let car = cars[i];
let speed = car.speed;
// accelerate
speed = Math.min(speed +1, v_max);
// decelerate
let distance = distances[i];
speed = Math.min(speed, distance -1);
// randomization
if (Math.random() < p) {
speed = Math.max(0, speed -1);
}
newSpeeds[i] = speed;
}
// now update speeds and positions.
for (let i=0; i<numCars; i++) {
let car = cars[i];
car.speed = newSpeeds[i];
// new position
let newPos = (car.pos + newSpeeds[i]) % N;
car.pos = newPos;
}
Then, after this, the cars will have their new positions and speeds.
Wait, but after updating the positions, the cars are no longer sorted, so in the next frame, we need to re-sort them again.
Therefore, this is correct.
Now, in the drawing code, to get the current position, we can use the car's pos.
Potential issues:
- When cars overtake each other, their positions can cross, so in the next step, the sorted order will change.
But the code correctly sorts them each time.
Now, implementing this in JavaScript.
Additional considerations:
- When the road length N is 100, the circumference can be mapped as 100 units, so each unit corresponds to an angle of (360/100) degrees.
- The canvas coordinates: for a canvas of 800x400, center at (400,200), radius 150.
- Drawing the ring: ctx.beginPath(); ctx.arc(400,200,150,0,2*Math.PI); ctx.stroke();
- Each car is drawn as a small circle: radius 5 or so.
Color mapping: speed ranges from 0 to v_max (e.g., up to 5). Maybe using a gradient.
Alternatively, color = 'hsl(' + (speed / v_max * 120) + ', 50%, 50%)';
So speed 0 is red (0 degrees), speed 5 is green (60 degrees? Wait, hsl 120 is green. Wait, 0 is red, 120 is green, 240 is blue.
Wait, if v_max is 5, then for speed 5, hue=5/5 * 120 = 120 (green). Speed 0 is 0 (red). That could work.
Now, putting it all together.
But let me think about some possible errors:
When computing nextIndex = (i+1)%numCars, but after sorting, the cars are in order, so nextCars[i] is the next in sorted order.
Wait, in the code above, after sorting, nextCars is created as nextCars[i] = cars[ (i+1) % numCars ].
Wait no, in the code:
cars are sorted, and nextCars is an array where nextCars[i] is the next car in the sorted list.
Wait, in code:
nextCars is an array where each element nextCars[i] is cars[ (i+1) % numCars ]
But since the cars are already sorted by pos, the nextCars array correctly points to the next car ahead on the road.
Wait but the next car is the next in the sorted array, so their positions are in order.
Therefore, the distance between car[i] and nextCar[i] is (nextCar.pos - car.pos + N) % N, which is correct.
Another possible error is when computing new positions:
newPos = (car.pos + newSpeed) % N.
Yes, since movement is along the circular track.
Testing this code:
Suppose a car is at position 95, and its speed is 5 (v_max), nextCar is at position 5. distance = (5 -95 +100) % 100 = 10. So distance is 10.
Then, after acceleration (speed was 5 can't increase further), deceleration: speed is min(5, 10-1 =9) so remains 5. Then randomization. So new speed is 5.
Thus, new position is 95 +5 =100 mod100 =0. So the new position is 0. Which is correct, moving around the track.
Another example: two cars at position 0 and 50. N=100. The first car's next is the second, distance is 50. Suppose first car is at speed 0. After accelerating, speed becomes 1. Then decelerate: 1 <=50-1, so stays 1. Then maybe randomization. So moves to 1. The second car has next car as first (since it's a circle). distance is (0 -50 +100) mod100=50. So same as before.
Hmm.
Now, implementing this in code.
Possible code outline:
HTML:
<canvas id="simCanvas" width="800" height="400"></canvas>
JavaScript:
const canvas = document.getElementById('simCanvas');
const ctx = canvas.getContext('2d');
const N = 100; // length of the road
const v_max = 5;
const p_slowdown = 0.3;
const numCars = 20;
let cars = [];
initialize();
function initialize() {
cars = [];
for (let i = 0; i < numCars; i++) {
// distribute cars evenly
let pos = (i * (N / numCars)) % N;
cars.push({ pos: pos, speed: 0 });
}
}
function update() {
// sort cars by position
cars.sort((a, b) => a.pos - b.pos);
let nextCars = [];
let distances = [];
// compute nextCars and distances
for (let i = 0; i < numCars; i++) {
const nextIndex = (i + 1) % numCars;
const nextCar = cars[nextIndex];
nextCars[i] = nextCar;
const distance = (nextCar.pos - cars[i].pos + N) % N;
distances[i] = distance;
}
let newSpeeds = [];
for (let i = 0; i < numCars; i++) {
let currentCar = cars[i];
let currentSpeed = currentCar.speed;
// Acceleration
currentSpeed = Math.min(currentSpeed + 1, v_max);
// Deceleration based on distance
let distance = distances[i];
currentSpeed = Math.min(currentSpeed, distance - 1);
// Random slowdown
if (Math.random() < p_slowdown) {
currentSpeed = Math.max(currentSpeed - 1, 0);
}
newSpeeds[i] = currentSpeed;
}
// Update positions and speeds
for (let i = 0; i < numCars; i++) {
const car = cars[i];
car.speed = newSpeeds[i];
const newPos = (car.pos + newSpeeds[i]) % N;
car.pos = newPos;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the circular road
ctx.strokeStyle = '#888';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(400, 200, 150, 0, Math.PI * 2);
ctx.stroke();
// Draw each car
ctx.fillStyle = '#000';
cars.forEach(car => {
const { pos } = car;
const angle = (pos / N) * 2 * Math.PI;
const centerX = 400 + 150 * Math.cos(angle - Math.PI / 2);
const centerY = 200 + 150 * Math.sin(angle - Math.PI / 2);
// Color based on speed
const speed = car.speed;
const hue = (speed / v_max) * 120;
ctx.fillStyle = `hsl(${hue}, 50%, 50%)`;
ctx.beginPath();
ctx.arc(centerX, centerY, 5, 0, Math.PI * 2);
ctx.fill();
});
}
function animate() {
update();
draw();
requestAnimationFrame(animate);
}
initialize();
animate();
Wait, but in the drawing code, for position to angle mapping:
The cars' pos is along a linear track of length N=100, but the circle is 360 degrees.
So, pos=0 would be angle 0 (right side?), but when drawing on canvas, the angle in radians.
Wait, need to map pos to the circumference properly.
Assuming that pos 0 is at angle 90 degrees (top of the circle), and increasing clockwise.
Wait, perhaps better to start at angle 0 (right side), going counter-clockwise.
Alternatively, the calculation:
The angle in radians is (pos / N) * 2 * Math.PI.
But to place the car on the circumference:
The coordinates are:
x = center.x + radius * Math.cos(angle)
y = center.y + radius * Math.sin(angle)
But angle starts at 0 (to the right), increasing counter-clockwise.
So, for pos=0, angle = 0: x = 400+150, y=200.
pos=25 would be 90 degrees (top), angle=pi/2 radians.
pos=50: 180 degrees (left), etc.
This is correct.
Wait, but in the code above, the angle is computed as:
angle = (pos / N) * 2 * Math.PI;
Thus, pos=0 is angle 0 (right), pos=N is angle 2pi (same as 0).
Yes.
Thus, drawing is correct.
Testing this code should show cars moving around the track, with colors changing based on speed.
Possible adjustments:
- Adjust the radius or canvas size.
- Adjust the number of cars or parameters.
But this should work.
Potential issues:
- When the cars are sorted by pos, but after moving, their positions can be anywhere, so in the next frame, the sorting is necessary again.
Yes, that's handled correctly in the update function.
Another thing: when two cars are at the same pos? The code should handle that, but initial setup ensures no duplicates.
Overall, this should work.<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Ring Traffic</title><style>html,body{margin:0;height:100%;background:#111;color:#eee;font:16px system-ui}body{display:grid;place-items:center}canvas{width:100vw;height:100vh;display:block}</style></head><body><canvas id=c></canvas><script>
const C=c,x=C.getContext('2d');let W,H,R,cx,cy,L=180,N=54,V=5,P=.32,stepMs=90,t=0,last=0,s=0,cars=[];
function size(){let d=devicePixelRatio||1;W=innerWidth;H=innerHeight;C.width=W*d;C.height=H*d;x.setTransform(d,0,0,d,0,0);cx=W/2;cy=H/2;R=Math.min(W,H)*.34}onresize=size;size();
function init(){cars=[];let sp=L/N;for(let i=0;i<N;i++)cars.push({p:Math.floor(i*sp),o:Math.floor(i*sp),v:i%9?2:0});s=0}init();
function sim(){cars.sort((a,b)=>a.p-b.p);let old=cars.map(a=>a.p),mv=0;for(let i=0;i<N;i++){let a=cars[i],b=cars[(i+1)%N],g=(b.p-a.p-1+L)%L;a.v=Math.min(a.v+1,V);if(a.v>g)a.v=g;if(a.v&&Math.random()<P)a.v--;a.o=a.p;a.p=(a.p+a.v)%L;mv+=a.v}t=0;s++;if(s>5200)init();return mv/N}
let avg=0;function col(v){let h=5+v/V*125;return`hsl(${h} 90% 55%)`}
function draw(q){x.clearRect(0,0,W,H);x.lineWidth=Math.max(18,Math.min(W,H)*.035);x.strokeStyle='#2a2d34';x.beginPath();x.arc(cx,cy,R,0,7);x.stroke();x.lineWidth=2;x.strokeStyle='#6b7280';x.setLineDash([10,16]);x.beginPath();x.arc(cx,cy,R,0,7);x.stroke();x.setLineDash([]);for(let a of cars){let p=a.o+a.v*q;if(p>=L)p-=L;let A=p/L*Math.PI*2-Math.PI/2,rr=Math.max(6,Math.min(W,H)*.012);x.save();x.translate(cx+Math.cos(A)*R,cy+Math.sin(A)*R);x.rotate(A+Math.PI/2);x.fillStyle=col(a.v);x.shadowColor=x.fillStyle;x.shadowBlur=10;x.beginPath();x.roundRect(-rr*.8,-rr*1.35,rr*1.6,rr*2.7,rr*.45);x.fill();x.restore()}x.fillStyle='#eee';x.textAlign='center';x.font='600 '+Math.max(22,Math.min(W,H)*.055)+'px system-ui';x.fillText('Nagel-Schreckenberg',cx,cy-14);x.font='500 '+Math.max(16,Math.min(W,H)*.03)+'px system-ui';x.fillStyle='#b7beca';x.fillText('average speed '+avg.toFixed(2),cx,cy+26)}
function loop(n){if(!last)last=n;let d=n-last;last=n;t+=d;while(t>=stepMs){avg=sim();t-=stepMs}draw(t/stepMs);requestAnimationFrame(loop)}requestAnimationFrame(loop)
</script></body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Nagel-Schreckenberg Ring</title>
<style>
html,body{margin:0;padding:0;background:#0b0f14;overflow:hidden;height:100%}
canvas{display:block}
#hud{position:fixed;top:10px;left:14px;color:#cfe8ff;font:14px/1.4 monospace;text-shadow:0 1px 3px #000;pointer-events:none}
</style></head>
<body>
<canvas id="c"></canvas>
<div id="hud"></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,cx,cy,R;
function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2;R=Math.min(W,H)*0.38;}
addEventListener('resize',resize);resize();
const L=140,VMAX=5,P=0.32,MAXSTEPS=650;
let N,cars,stepCount,acc=0,last=0;
const STEP_MS=220;
function initSim(){
N=22+Math.floor(Math.random()*10);
cars=[];
const gap=L/N;
for(let i=0;i<N;i++){
const p0=Math.floor(i*gap);
cars.push({pos:p0,v:Math.floor(Math.random()*(VMAX+1)),dispS:p0,dispE:p0});
}
stepCount=0;acc=0;
}
function nasch(){
const n=cars.length,newV=new Array(n);
for(let i=0;i<n;i++){
const ahead=cars[(i+1)%n];
const gap=((ahead.pos-cars[i].pos-1)%L+L)%L;
let v=cars[i].v;
v=Math.min(v+1,VMAX);
v=Math.min(v,gap);
if(v>0&&Math.random()<P)v--;
newV[i]=v;
}
for(let i=0;i<n;i++){
const c=cars[i];
c.dispS=c.pos;
c.v=newV[i];
c.dispE=c.pos+newV[i];
c.pos=(c.pos+newV[i])%L;
}
}
function speedColor(v){
const h=(v/VMAX)*120;
return 'hsl('+h+',85%,55%)';
}
function draw(t){
ctx.clearRect(0,0,W,H);
ctx.beginPath();
ctx.arc(cx,cy,R,0,Math.PI*2);
ctx.strokeStyle='#22303c';
ctx.lineWidth=18;
ctx.stroke();
ctx.beginPath();
ctx.arc(cx,cy,R,0,Math.PI*2);
ctx.strokeStyle='#12181f';
ctx.lineWidth=1;
ctx.stroke();
let sumV=0;
for(const c of cars){
const ip=c.dispS+(c.dispE-c.dispS)*t;
const a=(ip/L)*Math.PI*2-Math.PI/2;
const x=cx+R*Math.cos(a),y=cy+R*Math.sin(a);
ctx.beginPath();
ctx.arc(x,y,7.5,0,Math.PI*2);
ctx.fillStyle=speedColor(c.v);
ctx.shadowColor=ctx.fillStyle;
ctx.shadowBlur=10;
ctx.fill();
ctx.shadowBlur=0;
sumV+=c.v;
}
const avg=(sumV/cars.length).toFixed(2);
hud.innerHTML='Nagel-Schreckenberg ring · N='+cars.length+' cars · L='+L+' cells · v_max='+VMAX+' · p='+P+'<br>average speed: '+avg+' cells/step · step '+stepCount+'/'+MAXSTEPS;
}
function frame(ts){
if(!last)last=ts;
let dt=ts-last;last=ts;
if(dt>200)dt=200;
acc+=dt;
while(acc>=STEP_MS){
acc-=STEP_MS;
nasch();
stepCount++;
if(stepCount>=MAXSTEPS){initSim();}
}
draw(acc/STEP_MS);
requestAnimationFrame(frame);
}
initSim();
requestAnimationFrame(frame);
</script>
</body></html><!DOCTYPE html><html><head><title>Traffic</title></head><body style="margin:0;background:#000;display:flex;justify-content:center;align-items:center;height:100vh"><canvas id="c"></canvas><div id="i" style="position:absolute;top:10px;left:10px;color:#0f0;font-family:mono;font-size:10px"></div><script>
const c=document.getElementById('c'),x=c.getContext('2d'),i=document.getElementById('i');c.width=c.height=400;
const r=150,nc=30,vmax=5,p_slow=0.1;let cars=[];for(let j=0;j<nc;j++){cars.push({pos:j*r*2*Math.PI/nc,v:2});}
function d(){const cx=200,cy=200;x.fillStyle='#000';x.fillRect(0,0,400,400);x.strokeStyle='#333';x.lineWidth=2;x.beginPath();x.arc(cx,cy,r,0,Math.PI*2);x.stroke();x.beginPath();x.arc(cx,cy,r-15,0,Math.PI*2);x.stroke();for(let j=0;j<cars.length;j++){let c1=cars[j],c2=cars[(j+1)%nc];let d_gap=(c2.pos-c1.pos+r*2*Math.PI)%(r*2*Math.PI);c1.v=Math.min(c1.v+1,vmax);if(d_gap<25)c1.v=Math.max(0,d_gap/10);if(Math.random()<p_slow)c1.v=Math.max(0,c1.v-1);c1.pos=(c1.pos+c1.v)%(r*2*Math.PI);}let s_v=0;for(let c1 of cars){const a=c1.pos/r;const x1=cx+r*Math.cos(a),y1=cy+r*Math.sin(a);x.fillStyle=`hsl(${c1.v*12},100%,50%)`;x.fillRect(x1-5,y1-5,10,10);s_v+=c1.v;}x.fillStyle='#fff';x.font='12px mono';x.fillText(`Avg speed: ${(s_v/nc).toFixed(1)}`,10,20);i.textContent=`Cars: ${nc} | AvgV: ${(s_v/nc).toFixed(2)}`;}(function a(){d();requestAnimationFrame(a);})();
</script></body></html>| Model | Blind score | Latency | Status |
|---|---|---|---|
| gemma4:26b | — | — | harness |
| qwen3.5:9b | — | 43.5 s | OK |
| llama3.1:8b | — | — | DNF |
| mistral-small:24b | — | — | DNF |
| qwen3:8b | — | — | harness |
| qwen3-coder:30b | — | 57.0 s | OK |
| deepseek-r1:14b | — | 149.6 s | OK |
| qwen3:14b | — | 24.5 s | OK |
| deepseek-r1:32b | — | 65.2 s | OK |
| command-r:35b | — | 114.4 s | OK |
| qwq:32b | — | 217.5 s | OK |