Code · blind round

R69 · Replanning when the map changes

blind round 9/11 local models answered

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.

A frontier reference answered the same task (Claude Opus 5) — outside the field and deliberately unscored, further down the page.

Show task

Create ONE self-contained HTML file (STRICT LIMIT: max 120 lines total) that animates a robot navigating a 30x20 grid to a goal on a <canvas> while the map changes underneath it. Plan a shortest path, then move the robot along it one cell at a time; every few steps drop a new wall somewhere ahead of the robot. When the current path is blocked, visibly replan from the robot's present position and draw the new path in a different colour. Show the number of replans and the steps taken. 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.

The answers

Local models (Brain cluster) — identical prompt, shuffled order (the sequence is not a ranking)

llama3.1:8bHANGLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
  border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c" width="300" height="200"></canvas>

<script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');
const w = 30;
const h = 20;
let g = Array(h).fill(null).map(() => Array(w).fill(0));
let r = {x: Math.floor(Math.random() * w), y: Math.floor(Math.random() * h)};
let p = [{x: r.x, y: r.y}];
let walls = [];
let steps = 0;
let replans = 0;

function drawMap() {
  ctx.clearRect(0, 0, c.width, c.height);
  for (let i = 0; i < w; i++) {
    for (let j = 0; j < h; j++) {
      if (g[j][i] === 1) {
        ctx.fillStyle = 'black';
        ctx.fillRect(i * 10, j * 10, 10, 10);
      }
      if (g[j][i] === 2) {
        ctx.fillStyle = 'red';
        ctx.fillRect(i * 10, j * 10, 10, 10);
      }
    }
  }
}

function shortestPath() {
  const openSet = [{x: r.x, y: r.y, f: 0}];
  const cameFrom = {};
  while (openSet.length > 0) {
    let current = openSet[0];
    for (let i = 1; i < openSet.length; i++) {
      if (openSet[i].f < current.f) {
        current = openSet[i];
      }
    }
    if (current.x === w - 2 && current.y === h - 2) return reconstructPath(cameFrom, current);
    openSet.splice(openSet.indexOf(current), 1);
    for (let i = -1; i <= 1; i++) {
      for (let j = -1; j <= 1; j++) {
        if (i !== 0 || j !== 0) {
          let x = current.x + i;
          let y = current.y + j;
          if (x >= 0 && x < w && y >= 0 && y < h && g[y][x] === 0) {
            let neighbor = {x, y, f: Math.abs(w - 2 - x) + Math.abs(h - 2 - y)};
            if (!cameFrom[`${x},${y}`]) {
              cameFrom[`${x},${y}`] = current;
              openSet.push(neighbor);
            }
          }
        }
      }
    }
    openSet.sort((a, b) => a.f - b.f);
  }
}

function reconstructPath(cameFrom, current) {
  let path = [current];
  while (cameFrom[`${current.x},${current.y}`]) {
    current = cameFrom[`${current.x},${current.y}`];
    path.unshift(current);
  }
  return path;
}

function drawPath(path) {
  ctx.fillStyle = 'blue';
  for (let i = 0; i < path.length - 1; i++) {
    let x1 = path[i].x * 10 + 5;
    let y1 = path[i].y * 10 + 5;
    let x2 = path[i + 1].x * 10 + 5;
    let y2 = path[i + 1].y * 10 + 5;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
  }
}

function moveRobot() {
  if (r.x === w - 2 && r.y === h - 2) return;
  let path = shortestPath();
  for (let i = 0; i < p.length - 1; i++) {
    g[p[i].y][p[i].x] = 0;
  }
  if (path[0].x !== r.x || path[0].y !== r.y) {
    let dx = Math.abs(path[0].x - r.x);
    let dy = Math.abs(path[0].y - r.y);
    if (dx > dy) {
      if (r.x < path[0].x) {
        r.x++;
      } else {
        r.x--;
      }
    } else {
      if (r.y < path[0].y) {
        r.y++;
      } else {
        r.y--;
      }
    }
  }
  p.push(r);
  drawMap();
  g[r.y][r.x] = 1;
  drawPath(p);
  steps++;
}

function addWall() {
  let x = Math.floor(Math.random() * w);
  let y = Math.floor(Math.random() * h);
  if (g[y][x] === 0) {
    g[y][x] = 2;
    walls.push({x, y});
  }
}

requestAnimationFrame(drawMap);
setInterval(() => {
  moveRobot();
  addWall();
}, 500);

</script>

</body>
</html>
```

qwen3.5:9bBLANKLIM

Show code

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Pathfinding Robot</title>
<style>
body { background: #111; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
canvas { border: 2px solid #333; background: #000; }
#stats { color: #fff; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-family: monospace; }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="stats"></div>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const statsDiv = document.getElementById('stats');

const GRID_W = 30;
const GRID_H = 20;
const CELL_SIZE = 18;
canvas.width = GRID_W * CELL_SIZE;
canvas.height = GRID_H * CELL_SIZE;

let grid = [];
let robotPos = { x: 0, y: 0 };
let goalPos = { x: GRID_W - 1, y: GRID_H - 1 };
let currentPath = [];
let stepIndex = 0;
let stepsCount = 0;
let replanCount = 0;
let gameRunning = true;
let lastTime = 0;

function initializeGrid() {
    grid = Array(GRID_H).fill(0).map(() => Array(GRID_W).fill(0)); // 0=open, 1=wall
    robotPos = { x: 2, y: GRID_H - 3 };
    goalPos = { x: GRID_W - 2, y: 2 };
    stepsCount = 0;
    replanCount = 0;
    currentPath = [];
    stepIndex = 0;

    for (let y = 0; y < GRID_H; y++) {
        for (let x = 0; x < GRID_W; x++) {
            if ((x % 5 === 0 && y > 0 && y < GRID_H - 1) || (y % 5 === 0 && x > 0 && x < GRID_W - 1)) {
                grid[y][x] = Math.random() * 2;
            } else {
                grid[y][x] = 0;
            }
        }
    }

    robotPos.x = 2; robotPos.y = GRID_H - 3;
}

function findPath(start, end) {
    let queue = [{ x: start.x, y: start.y, path: [] }];
    let visited = new Set();
    visited.add(`${start.x},${start.y}`);

    while (queue.length > 0) {
        let current = queue.shift();
        if (current.x === end.x && current.y === end.y) return [...current.path, start, ...current.path];

        let neighbors = [[0, 1], [0, -1], [1, 0], [-1, 0]];
        for (const [dx, dy] of neighbors) {
            let nx = current.x + dx;
            let ny = current.y + dy;

            if (nx >= 0 && nx < GRID_W && ny >= 0 && ny < GRID_H && !visited.has(`${nx},${ny}`) && grid[ny][nx] === 0) {
                visited.add(`${nx},${ny}`);
                let newPath = [...current.path, { x: current.x, y: current.y }];
                queue.push({ x: nx, y: ny, path: newPath });
            }
        }
    }
    return null; 
}

function dropWall() {
    let placed = false;
    while (!placed) {
        let wx = Math.floor(Math.random() * (GRID_W - 2)) + 1;
        let wy = Math.floor(Math.random() * (GRID_H - 2)) + 1;

        if (grid[wy][wx] === 0 && !(wx === robotPos.x && wy === robotPos.y) && !(wx === goalPos.x && wy === goalPos.y)) {
            // Ensure the wall doesn't block immediate passage or create a trivial loop
            let neighbors = [[0, 1], [0, -1], [1, 0], [-1, 0]];
            if (neighbors.some(([dx, dy]) => grid[wy + dy][wx + dx] === 0)) {
                grid[wy][wx] = 1;
                placed = true;
            }
        }
    }
}

function updateState() {
    if (!gameRunning) return;

    // Wall generation control (drop a wall every 5 steps)
    if (stepsCount > 0 && stepsCount % 5 === 0) {
        dropWall();
    }

    let newPath = findPath(robotPos, goalPos);

    if (!newPath || newPath.length < 2) {
        // Path blocked or already at goal
        if (stepsCount > 1 && currentPath.length === 0) {
             gameRunning = false;
        }
        return;
    }

    let nextTarget = newPath[1];
    
    // Check if the current path is invalid due to a dropped wall or blocked cell
    if (currentPath.length > 0 && 
        (nextTarget.x !== currentPath[stepIndex + 1].x || nextTarget.y !== currentPath[stepIndex + 1].y) ) {

         // Replan required
        replanCount++;
        currentPath = newPath;
    } else if (currentPath.length === 0) {
        // Initial plan
        currentPath = newPath;
    }


    if (stepIndex < currentPath.length - 1) {
        let target = currentPath[Math.min(stepIndex + 1, currentPath.length - 1)];
        robotPos.x = target.x;
        robotPos.y = target.y;
        stepIndex++;
    } else if (currentPath.length > 0) {
         // Reached goal or cannot move further
         gameRunning = false;
    }

    stepsCount++;
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let y = 0; y < GRID_H; y++) {
        for (let x = 0; x < GRID_W; x++) {
            if (grid[y][x] === 1) {
                ctx.fillStyle = '#444'; // Wall color
                ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
            } else {
                ctx.fillStyle = '#000'; // Open space
                ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
            }
        }
    }

    // Draw Path (Initial path color: Green)
    if (currentPath.length > 1) {
        ctx.strokeStyle = 'rgba(0, 255, 0, 0.8)';
        ctx.lineWidth = CELL_SIZE * 0.6;
        ctx.beginPath();
        for (let i = 0; i < currentPath.length - 1; i++) {
            const p = currentPath[i];
            const n = currentPath[i+1];
            ctx.moveTo(p.x * CELL_SIZE + CELL_SIZE/2, p.y * CELL_SIZE + CELL_SIZE/2);
            ctx.lineTo(n.x * CELL_SIZE + CELL_SIZE/2, n.y * CELL_SIZE + CELL_SIZE/2);
        }
        ctx.stroke();
    }

    // Draw Replan Path (New path color: Yellow) - Only draw the segment ahead of the robot
    if (currentPath.length > 1 && currentPath[stepIndex] !== undefined) {
         ctx.strokeStyle = 'rgba(255, 255, 0, 0.8)';
         ctx.lineWidth = CELL_SIZE * 0.6;
         ctx.beginPath();
         for (let i = stepIndex + 1; i < currentPath.length - 1 && i <= currentPath.length; i++) {
            const p = currentPath[i];
            const n = currentPath[i+1];
             ctx.moveTo(p.x * CELL_SIZE + CELL_SIZE/2, p.y * CELL_SIZE + CELL_SIZE/2);
            ctx.lineTo(n.x * CELL_SIZE + CELL_SIZE/2, n.y * CELL_SIZE + CELL_SIZE/2);
         }
        ctx.stroke();
    }

    // Draw Robot (Blue circle)
    ctx.fillStyle = '#00ccff';
    ctx.beginPath();
    ctx.arc(robotPos.x * CELL_SIZE + CELL_SIZE / 2, robotPos.y * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE * 0.4, 0, Math.PI * 2);
    ctx.fill();

    // Draw Goal (Red circle)
    ctx.fillStyle = '#ff3333';
    ctx.beginPath();
    ctx.arc(goalPos.x * CELL_SIZE + CELL_SIZE / 2, goalPos.y * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE * 0.4, 0, Math.PI * 2);
    ctx.fill();

    // Update Stats
    statsDiv.innerHTML = `Steps: ${stepsCount} | Replans: ${replanCount} | Status: ${gameRunning ? 'Moving' : (currentPath.length > 0 ? 'Goal Reached!' : 'Blocked')}`;
}


function gameLoop(timestamp) {
    if (!lastTime) lastTime = timestamp;
    const delta = timestamp - lastTime;

    draw();
    updateState();
    lastTime = timestamp;

    if (gameRunning && stepsCount < 1000) { // Safety break to prevent infinite loop visualization
        requestAnimationFrame(gameLoop);
    } else if (!gameRunning && currentPath.length > 0) {
         // Stop animation when goal is reached or blocked
    } else if

mistral-small:24bOKFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Robot Navigation</title>
<style>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
canvas { border: 1px solid black; }
#info { position: absolute; top: 20px; left: 20px; font-size: 20px; color: white; background: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="600" height="400"></canvas>
<div id="info">Steps: 0 Replans: 0</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 30;
const cellSize = 20;
const info = document.getElementById('info');
let steps = 0, replans = 0;

function drawGrid() {
    for (let x = 0; x < gridSize; x++) {
        for (let y = 0; y < 20; y++) {
            ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
        }
    }
}

function drawRobot(x, y) {
    ctx.fillStyle = 'red';
    ctx.fillRect(x * cellSize + 1, y * cellSize + 1, cellSize - 2, cellSize - 2);
}

function drawWall(x, y) {
    ctx.fillStyle = 'black';
    ctx.fillRect(x * cellSize + 1, y * cellSize + 1, cellSize - 2, cellSize - 2);
}

function replanPath(start, goal, walls) {
    const queue = [start];
    const cameFrom = {};
    cameFrom[start] = null;
    while (queue.length > 0) {
        const current = queue.shift();
        if (current === goal) break;
        for (const dir of [[1, 0], [-1, 0], [0, 1], [0, -1]]) {
            const next = [current[0] + dir[0], current[1] + dir[1]];
            if (next[0] >= 0 && next[0] < gridSize && next[1] >= 0 && next[1] < 20 && !walls.includes(next.toString())) {
                if (!cameFrom.hasOwnProperty(next.toString())) {
                    cameFrom[next.toString()] = current;
                    queue.push(next);
                }
            }
        }
    }
    const path = [];
    let step = goal;
    while (step) {
        path.unshift(step);
        step = cameFrom[step];
    }
    return path.slice(1);
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid();
    const start = [Math.floor(Math.random() * gridSize), Math.floor(Math.random() * 20)];
    const goal = [Math.floor(Math.random() * gridSize), Math.floor(Math.random() * 20)];
    let path = replanPath(start, goal, walls);
    let index = 1;
    let robotX = start[0], robotY = start[1];
    drawRobot(robotX, robotY);

    function loop() {
        if (index < path.length) {
            ctx.clearRect(robotX * cellSize, robotY * cellSize, cellSize, cellSize);
            robotX = path[index][0];
            robotY = path[index][1];
            drawRobot(robotX, robotY);
            steps++;
            info.textContent = `Steps: ${steps} Replans: ${replans}`;
        } else {
            if (Math.random() < 0.5) {
                const wallPos = [Math.floor(Math.random() * gridSize), Math.floor(Math.random() * 20)];
                walls.push(wallPos.toString());
                ctx.fillStyle = 'black';
                drawWall(wallPos[0], wallPos[1]);
            }
            path = replanPath([robotX, robotY], goal, walls);
            index = 1;
            if (path.length > 1) {
                replans++;
                info.textContent = `Steps: ${steps} Replans: ${replans}`;
            }
        }
        requestAnimationFrame(loop);
    }

    loop();
}

const walls = [];
animate();

</script>
</body>
</html>
```

qwen3:8bharness

No answer reached us (ERR) — and the reason lies with our setup, not with the model: reasoning consumed the entire token budget and the answer stayed empty; the gateway rejects budgets above 3000 tokens Counted as a did-not-finish, but it is not evidence about this model.

gemma4:26bharness

No answer reached us (THIN) — and the reason lies with our setup, not with the model: reasoning consumed the entire token budget (3 min 28 s, zero characters of answer); larger budgets are refused by the gateway Counted as a did-not-finish, but it is not evidence about this model.

deepseek-r1:14bERRBLANKFORMAT

Show code

```html
<!DOCTYPE html>
<html><body style="margin:0;overflow:hidden">
<canvas id=c></canvas>
<div id=d></div>
<style>canvas{border:1px solid #333}#d{position:absolute;top:20;left:20;color:#fff}</style>
<script>
const c=document.getElementById('c'),d=document.getElementById('d');
const w=30,h=20,csize=c.width/(w*2),hSize=c.height/h;
let scale=Math.min(csize,hSize);
c.width=w*scale*2;c.height=h*scale*2;
const grid=[],start={x:0,y:0},goal={x:w-1,y:h-1};
for(let y=0;y<h;y++)grid[y]=new Array(w).fill(0);
function aStar(start,goal){
    const open=new Set();closed=new Set();
    open.add({x:start.x,y:start.y,f:0});
    const cameFrom={};
    while(open.size>0){
        let current=null;let minF=Infinity;
        for(let pos of open){if(pos.f<minF){current=pos,minF=pos.f}}
        if(current.x==goal.x&&current.y==goal.y)return [];
        open.delete(current);
        closed.add(current);
        const neighbors=[{x:current.x+1,y:current.y},{x:current.x-1,y:current.y},
            {x:current.x,y:current.y+1},{x:current.x,y:current.y-1}];
        for(let n of neighbors){
            if(n.x<0||n.x>=w||n.y<0||n.y>=h||grid[n.y][n.x]||closed.has(n))continue;
            const newF=current.f+1+(Math.abs(n.x-goal.x)+Math.abs(n.y-goal.y));
            const state={x:n.x,y:n.y,f:newF};
            if(!open.has(state)){
                cameFrom[JSON.stringify(state)]=current;
                open.add(state);
            }
        }
    }
    return [];
}
let robot={x:0,y:0,path:[],step:0,replans:0},path=aStar(start,goal);
function draw(){c.getContext('2d').clearRect(0,0,c.width,c.height);
    // Draw grid
    for(let y=0;y<h;y++)for(let x=0;x<w;x++)if(grid[y][x])draw.rect(x*scale,y*scale,scale,scale,'red');
    // Draw path
    path.forEach((p,i)=>{if(i<robot.step)draw.line(p.x*scale,p.y*scale,(i+1).x*scale,(i+1).y*scale,'blue');});
    // Current position
    draw.rect(robot.x*scale,robot.y*scale,scale-2,scale-2,'green');
    // Goal
    draw.rect((w-1)*scale,(h-1)*scale,scale-2,scale-2,'yellow');
}
function move(){
    if(robot.step<path.length){
        robot.x=robot.path[robot.step].x;
        robot.y=robot.path[robot.step].y;
        robot.step++;
        if(robot.step%30==0&&Math.random()<.1){let x=Math.floor(Math.random()*w),y=Math.floor(Math.random()*h);
            if(!grid[y][x]&&(robot.x+Math.sign(x-robot.x)>0||robot.y+Math.sign(y-robot.y)>0)){
                grid[y][x]=1;
                path=aStar({x:robot.x,y:robot.y},goal);
                robot.replans++;
            }
        }
    }else{
        c.width=c.width;location.reload();
    }
}
function drawLine(x1,y1,x2,y2,color){
    const ctx=c.getContext('2d');ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.strokeStyle=color;
    ctx.lineWidth=2;ctx.stroke();
}
function rect(x,y,width,height,color){const ctx=c.getContext('2d');ctx.fillStyle=color;ctx.fillRect(x,y,width,height);}
let lastTime=null,interpolate=0;
function animate(timestamp){
    if(!lastTime)lastTime=timestamp;
    const deltaTime=timestamp-lastTime;
    lastTime=timestamp;
    interpolate+=deltaTime/1000*.5;
    move();
    draw();
    d.textContent=`Steps: ${robot.step} | Replans: ${robot.replans}`;
    requestAnimationFrame(animate);
}
animate(0);
</script>
</body></html>
```

qwen3:14bERRBLANKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Grid Navigation</title>
    <style>body { background: #111; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } canvas { border: 2px solid #333; }</style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        let COLS = 30, ROWS = 20;
        let CELL_SIZE = 20;
        canvas.width = COLS * CELL_SIZE;
        canvas.height = ROWS * CELL_SIZE;

        let map = Array(ROWS).fill(0).map(() => Array(COLS).fill(false)); // false=open, true=wall
        let robotPos = { x: 1, y: 1 };
        let goalPos = { x: COLS - 2, y: ROWS - 2 };
        let currentPath = [];
        let stepCount = 0;
        let replanCounter = 0;
        let gameRunning = true;

        function initializeMap() {
            map = Array(ROWS).fill(0).map(() => Array(COLS).fill(false));
            for (let i = 1; i < ROWS - 1; i++) {
                for (let j = 1; j < COLS - 1; j++) {
                    if ((i + j) % 5 === 0 && Math.random() > 0.7) map[i][j] = true;
                }
            }
        }

        function heuristic(a, b) { return Math.abs(a.x - b.x) + Math.abs(a.y - b.y); }

        function findPathAStar() {
            const start = robotPos;
            const goal = goalPos;
            let openSet = [start];
            let cameFrom = {};
            let gScore = Array(ROWS).fill(0).map(() => Array(COLS).fill(Infinity));
            gScore[start.y][start.x] = 0;

            while (openSet.length > 0) {
                openSet.sort((a, b) => heuristic(a, goal) - heuristic(b, goal));
                let current = openSet.shift();

                if (current.x === goal.x && current.y === goal.y) break;

                for (const [dx, dy] of [[0, 1], [0, -1], [1, 0], [-1, 0]]) {
                    let neighbor = { x: current.x + dx, y: current.y + dy };

                    if (neighbor.x < 0 || neighbor.x >= COLS || neighbor.y < 0 || neighbor.y >= ROWS) continue;
                    if (map[neighbor.y][neighbor.x]) continue; // Cannot move through walls

                    let tentativeGScore = gScore[current.y][current.x] + 1;
                    if (tentativeGScore < gScore[neighbor.y][neighbor.x]) {
                        cameFrom[JSON.stringify(neighbor)] = current;
                        gScore[neighbor.y][neighbor.x] = tentativeGScore;
                        if (!openSet.some(n => n.x === neighbor.x && n.y === neighbor.y)) openSet.push(neighbor);
                    }
                }
            }

            let path = [];
            let currentKey = JSON.stringify({ x: goal.x, y: goal.y });
            while (cameFrom[currentKey]) {
                let current = { x: parseInt(currentKey.split(',')[0]), y: parseInt(currentKey.split(',')[1]) };
                path.unshift(current);
                let next = cameFrom[currentKey];
                currentKey = JSON.stringify(next);
            }
            return path;
        }

        function draw() {
            ctx.fillStyle = '#222';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw walls
            for (let y = 0; y < ROWS; y++) {
                for (let x = 0; x < COLS; x++) {
                    if (map[y][x]) {
                        ctx.fillStyle = '#666';
                        ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
                    }
                }
            }

            // Draw path
            ctx.strokeStyle = 'rgba(0, 150, 255, 0.8)';
            ctx.lineWidth = CELL_SIZE / 3;
            if (currentPath.length > 0) {
                ctx.beginPath();
                for (let i = 0; i < currentPath.length - 1; i++) {
                    const p1 = currentPath[i];
                    const p2 = currentPath[i+1];
                    if (i === 0) ctx.moveTo(p1.x * CELL_SIZE + CELL_SIZE / 2, p1.y * CELL_SIZE + CELL_SIZE / 2);
                    ctx.lineTo(p2.x * CELL_SIZE + CELL_SIZE / 2, p2.y * CELL_SIZE + CELL_SIZE / 2);
                }
                ctx.stroke();
            }

            // Draw robot
            ctx.fillStyle = '#FFD700';
            ctx.beginPath();
            ctx.arc(robotPos.x * CELL_SIZE + CELL_SIZE / 2, robotPos.y * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE / 3, 0, Math.PI * 2);
            ctx.fill();

            // Draw goal
            ctx.fillStyle = '#4CAF50';
            ctx.beginPath();
            ctx.arc(goalPos.x * CELL_SIZE + CELL_SIZE / 2, goalPos.y * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE / 3, 0, Math.PI * 2);
            ctx.fill();

            // Draw stats
            ctx.fillStyle = 'white';
            ctx.font = '14px Arial';
            ctx.fillText(`Steps: ${stepCount}`, 10, 20);
            ctx.fillText(`Replans: ${replanCounter}`, 10, 40);
        }

        function placeWall(x, y) {
            if (x >= 1 && x <= COLS - 2 && y >= 1 && y <= ROWS - 2 && !map[y][x]) {
                map[y][x] = true;
            }
        }

        function dropNewWall() {
            const randX = Math.floor(Math.random() * (COLS - 4)) + 1;
            const randY = Math.floor(Math.random() * (ROWS - 4)) + 1;
            placeWall(randX, randY);
        }

        function updateGame() {
            if (!gameRunning) return;

            // 1. Movement/Path Following
            let nextStep = currentPath[0];
            if (nextStep && nextStep.x === robotPos.x && nextStep.y === robotPos.y) {
                // We reached the target of the path segment
                currentPath.shift(); // Consume the step
                robotPos = currentPath.length > 0 ? currentPath[0] : goalPos;

            } else if (nextStep) {
                // Move to the next step
                robotPos = nextStep;
                currentPath.shift();
            } else if (robotPos.x === goalPos.x && robotPos.y === goalPos.y) {
                 gameRunning = false; // Reached goal
            }

            stepCount++;

            // 2. Check for Blockage and Replanning
            const nextTarget = currentPath[0]; 
            let blocked = false;
            if (nextTarget && map[nextTarget.y][nextTarget.x]) {
                blocked = true;
            } else if (!nextTarget) {
                 // Check theoretical next move toward goal if the path was completed
                 const requiredMove = { x: Math.sign(goalPos.x - robotPos.x), y: Math.sign(goalPos.y - robotPos.y) };

                 if (Math.abs(goalPos.x - robotPos.x) > 0 && map[robotPos.y][robotPos.x + requiredMove.x]) {
                    blocked = true; // Cannot move in the direction of goal due to new wall
                } else if (Math.abs(goalPos.y - robotPos.y) > 0 && map[robotPos.y + requiredMove.y][robotPos.x]) {
                     blocked = true;
                }
            }

            if (blocked || !nextTarget) {
                replanCounter++;
                currentPath = findPathAStar();
                if (currentPath.length > 0) {
                    // Set the immediate next step for movement in the subsequent frame
                } else {
                    gameRunning = false; // Truly stuck
                }
            }

            // 3. Wall Generation (Every 15 steps)
            if (stepCount % 15 === 0) {
                 dropNewWall();
            }

            draw();
        }

        function animate() {
            updateGame();
            requestAnimationFrame(animate);
        }

        // Setup and start
        initializeMap();
        currentPath = findPathAStar();
        if (currentPath.length > 0) {
            robotPos = currentPath[0]; // Start at the first path point
        } else {
             console.error("Failed to calculate initial path.");
        }

        animate();
    </script>
</body>
</html>
```

qwen3-coder:30bOKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Pathfinding Robot</title>
    <style>body { background: #222; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: monospace; color: white;} canvas { border: 1px solid #444; }</style>
</head>
<body>
    <canvas id="gridCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gridCanvas');
        const ctx = canvas.getContext('2d');

        const COLS = 30;
        const ROWS = 20;
        const CELL_SIZE = Math.min(canvas.width, canvas.height) / Math.max(COLS, ROWS);

        let map = [];
        let robotPos = { x: 1, y: 1 };
        let goalPos = { x: COLS - 2, y: ROWS - 2 };
        let currentPath = [];
        let stepsTaken = 0;
        let replanCount = 0;
        let lastMoveTime = 0;
        const MOVE_INTERVAL = 150; // ms

        function initMap() {
            map = Array(ROWS).fill(0).map(() => Array(COLS).fill(false));
            for (let r = 0; r < ROWS; r++) {
                for (let c = 0; c < COLS; c++) {
                    if ((r === 0 || r === ROWS - 1 || c === 0 || c === COLS - 1) && !(c === robotPos.x && r === robotPos.y)) {
                        map[r][c] = true; // Wall/Blocked initially
                    } else if (r === goalPos.y && c === goalPos.x) {
                         map[r][c] = false; 
                    } else {
                        map[r][c] = false;
                    }
                }
            }
            robotPos = { x: 1, y: 1 };
            goalPos = { x: COLS - 2, y: ROWS - 2 };
        }

        function bfs(start, end) {
            let queue = [{ pos: start, path: [start] }];
            let visited = new Set();
            visited.add(`${start.x},${start.y}`);

            while (queue.length > 0) {
                let { pos, path } = queue.shift();
                if (pos.x === end.x && pos.y === end.y) return path;

                [[0, 1], [0, -1], [1, 0], [-1, 0]].forEach(([dx, dy]) => {
                    let next = { x: pos.x + dx, y: pos.y + dy };
                    if (next.x >= 0 && next.x < COLS && next.y >= 0 && next.y < ROWS && !map[next.y][next.x] && !visited.has(`${next.x},${next.y}`)) {
                        let newPath = [...path, next];
                        visited.add(`${next.x},${next.y}`);
                        queue.push({ pos: next, path: newPath });
                    }
                });
            }
            return null;
        }

        function generateWall(safePos) {
            let x = safePos.x + Math.floor(Math.random() * 5) - 2;
            let y = safePos.y + Math.floor(Math.random() * 5) - 2;
            if (x < 0 || x >= COLS || y < 0 || y >= ROWS) return false;
            return map[y][x] = true;
        }

        function planPath() {
            currentPath = bfs(robotPos, goalPos);
            if (currentPath) {
                // The path includes the start point (which is where we are now). We only need steps *after* the current position.
                currentPath = currentPath.slice(1); 
            } else {
                currentPath = [];
            }
        }

        function updateGame() {
            const currentTime = Date.now();
            if (currentTime - lastMoveTime < MOVE_INTERVAL) return;
            lastMoveTime = currentTime;

            if (!currentPath || currentPath.length === 0) {
                planPath();
            }

            if (robotPos.x === goalPos.x && robotPos.y === goalPos.y) {
                // Game finished, force replan to restart loop
                initMap();
                planPath();
                stepsTaken = 0;
                replanCount = 0;
            } else if (currentPath.length > 0) {
                let nextStep = currentPath[0];

                // Check for blocked path BEFORE moving
                if (map[nextStep.y][nextStep.x]) {
                    replanCount++;
                    planPath(); // Attempt to replan
                    return;
                }

                // Move robot
                robotPos.x = nextStep.x;
                robotPos.y = nextStep.y;
                currentPath.shift();
                stepsTaken++;
            } else {
                 // Stuck or finished path
                 if (replanCount > 0) planPath();
            }

            // Dynamic Wall Generation: Block the immediate area ahead of the robot, but not the current path segment.
            let nextTarget = currentPath[0] || goalPos;
            if (Math.random() < 0.5 && stepsTaken > 5) {
                generateWall(nextTarget);
            }

        }

        function drawMap() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let y = 0; y < ROWS; y++) {
                for (let x = 0; x < COLS; x++) {
                    let color = map[y][x] ? '#333' : '#1a1a1a'; // Wall or empty ground
                    ctx.fillStyle = color;
                    ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1);
                }
            }

            // Draw Goal
            ctx.fillStyle = '#4CAF50';
            ctx.fillRect(goalPos.x * CELL_SIZE, goalPos.y * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1);

            // Draw Path (Current plan)
            if (currentPath.length > 0) {
                for (let i = 0; i < currentPath.length; i++) {
                    const p = currentPath[i];
                    ctx.fillStyle = '#44bbff'; // Blue path color
                    ctx.fillRect(p.x * CELL_SIZE, p.y * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1);
                }
            }

            // Draw Robot
            ctx.fillStyle = '#FFD700';
            ctx.beginPath();
            ctx.arc(robotPos.x * CELL_SIZE + CELL_SIZE / 2, robotPos.y * CELL_SIZE + CELL_SIZE / 2, Math.min(CELL_SIZE, 8), 0, Math.PI * 2);
            ctx.fill();
        }

        function drawStats() {
            ctx.fillStyle = '#aaa';
            ctx.font = '14px monospace';
            let statsText = `STEPS: ${stepsTaken} | REPLANS: ${replanCount}`;
            if (currentPath && currentPath[0]) {
                statsText += ` | NEXT: (${currentPath[0].x}, ${currentPath[0].y})`;
            } else if (robotPos.x === goalPos.x && robotPos.y === goalPos.y) {
                 statsText = "GOAL REACHED! Restarting...";
            }
            ctx.fillText(statsText, 10, 20);
        }

        function gameLoop() {
            updateGame();
            drawMap();
            drawStats();
            requestAnimationFrame(gameLoop);
        }

        // Initialization and Start
        initMap();
        planPath();
        gameLoop();
    </script>
</body>
</html>
```

qwq:32bSTAT

Show code

<think>
Okay, I need to create a self-contained HTML file that animates a robot navigating a grid on a canvas. The user wants the robot to find the shortest path to the goal, move step by step, and have the map change by dropping new walls periodically. When the path is blocked, the robot should replan, show the new path in a different color, and keep track of replans and steps. The animation should use requestAnimationFrame, no user input, and restart automatically.

First, I'll structure the HTML with a canvas element and a script tag. The script should handle everything. Let me start by setting up the canvas and the initial variables. I'll need the grid dimensions (30x20 cells), the robot's current position, the goal, walls, and some counters for steps and replans. Since it's a grid, each cell can be a square. Maybe set cell size to 20px, so the canvas is 600x400 (30*20, 20*20). 

Next, the pathfinding. The user wants the shortest path, so I'll need Dijkstra's algorithm or A*. Since the grid can change dynamically, each time the path is blocked, we need to replan. I'll implement a function to compute the shortest path using BFS or Dijkstra's. Wait, BFS is okay for unweighted grids. Let me think, the grid cells can have walls, so the pathfinding function needs to ignore blocked cells.

The main steps are: initialize the grid with some random walls, place the robot and the goal. Then compute the initial path. The robot moves along the path step by step. Every few steps (maybe every 3 steps), a new wall is added ahead of the robot. But how to determine "ahead"? Maybe in a random direction from the current path's next cells? Or just randomly in the grid but in front? Hmm, perhaps each time a wall is added, check if the current path is blocked. If blocked, replan.

I need to track the current path as an array of positions. The robot moves one cell at a time, so the animation loop can step through the path array. Each frame moves the robot to the next position in the path. But when a wall is added, the path array may become invalid. So, after adding a wall, check if the path is still valid. If not, replan from the current position.

Wait, the problem says "every few steps drop a new wall somewhere ahead of the robot". So after moving, every few steps (maybe every 3 steps), add a wall in a random cell ahead. But how to define "ahead"? Maybe in the general direction towards the goal, but not sure. Alternatively, pick a random cell in the grid but in the area ahead (like within the current path's direction? Maybe just any cell but not the current position or the goal). To avoid blocking immediately, perhaps add walls in unblocked cells.

The animation loop needs to be smooth, using requestAnimationFrame. The loop will handle moving the robot, checking for path validity, adding walls, and rendering.

Variables: currentPath (array of positions), currentStep (index into the path), stepsTaken, replansCount. The walls array holds blocked cells.

The initialization step: randomly place robot and goal, ensuring they are not blocked. Then generate some initial walls, but not blocking the initial path. Hmm, maybe not necessary; initial path can be found after walls are placed. Wait, the initial walls are part of the grid, so the initial path is computed after walls are set.

In the setup:

- Create grid as a 2D array, with some random walls (maybe 20% chance per cell initially, except robot and goal cells).
- Randomly place robot and goal in open cells.
- Compute initial path.

The animation loop steps:

- Move robot along current path until blocked.
- Every N steps (like 3 steps), add a new wall somewhere ahead.
- Check if the current path is blocked. If so, increment replans, compute new path from current position.

But how to detect the path is blocked? Maybe when moving to the next cell in the path, that cell is now blocked. So, during movement, after moving, check if the next cell is blocked. Or, when adding a wall, check if the new wall is in the current path.

Alternatively, after adding a wall, check if any cell in the current path is blocked. If yes, then replan.

Wait, perhaps the wall addition can be done in a way that it's more likely to block the path. Maybe place the wall in a random cell along the current path's direction? Or just anywhere except the current position.

The wall addition code:

function addWall() {
  let x, y;
  do {
    x = Math.floor(Math.random() * gridWidth);
    y = Math.floor(Math.random() * gridHeight);
  } while (walls[y][x] || (x == robot.x && y == robot.y) || (x == goal.x && y == goal.y));
  walls[y][x] = true;
}

But this might not be "ahead". Alternatively, when the robot is moving along the path, the next wall could be placed somewhere in the direction the path was going. Maybe pick a cell that is in the path's future, but that's complicated. Maybe simpler to just randomly place walls in the grid.

The pathfinding function:

Implement BFS to find the shortest path. Let's see:

function findPath(startX, startY, targetX, targetY) {
  let queue = [[startX, startY, []]];
  let visited = new Array(gridHeight).fill().map(() => new Array(gridWidth).fill(false));
  visited[startY][startX] = true;

  while (queue.length > 0) {
    let [x, y, path] = queue.shift();
    if (x == targetX && y == targetY) return path.concat([[x, y]]);
    let neighbors = getNeighbors(x, y);
    for (let [nx, ny] of neighbors) {
      if (!visited[ny][nx] && !walls[ny][nx]) {
        visited[ny][ny] = true; // Wait no, indexes are [ny][nx]?
        visited[ny][nx] = true;
        queue.push([nx, ny, path.concat([[x,y]])]);
      }
    }
  }
  return null;
}

Wait, the path should track the steps. Alternatively, BFS can track the predecessors and then backtrack. Maybe it's better to track the path as we go. The above approach might work but needs careful coding.

Alternatively, here's a BFS approach where each element in the queue holds the current position and the path taken so far. Once the target is found, return the path.

The getNeighbors function would return adjacent cells (up, down, left, right) within the grid.

Once the path is found, the robot follows it step by step. The currentStep variable is the index in the path array.

In the animation loop:

- If the path is blocked (next cell in path is blocked), then replan.
- Else, move to next step.

But how to check if the current path is blocked? Each time we add a wall, we can check if the wall is in the current path. Alternatively, when moving, check if the next cell in the path is blocked.

Wait, in each frame:

if (currentStep < currentPath.length) {
  let nextCell = currentPath[currentStep];
  if (walls[nextCell.y][nextCell.x]) { // is the next step blocked?
    // Block detected

command-r:35bBLANKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Robot Navigation</title>
    <style>
        body { margin: 0; }
        canvas { border: 2px solid black; display: block; }
    </style>
</head>
<body>

    <canvas id="gameCanvas" width="640" height="480"></canvas>

    <script>
        
        const WALL = '#';
        const EMPTY = ' ';
        const ROBOT = '@';
        const GOAL = '$';

        let canvas, ctx;
        let gridWidth = 30;
        let gridHeight = 20;
        let cellSize = 16;
        let map, robotPos, goalPos, path, numReplans = 0, steps = 0, animationFrame;

        window.onload = function() {
            canvas = document.getElementById('gameCanvas');
            ctx = canvas.getContext('2d');

            // Initial setup and random map generation
            map = generateMap();
            robotPos = getRandomRobotPosition(map);
            goalPos = getRandomGoalPosition(map, robotPos);
            path = planPath(robotPos, goalPos, map);

            animate();
        }

        function generateMap() {
            let newMap = [];
            for (let i = 0; i < gridHeight; i++) {
                newMap[i] = Array.from({ length: gridWidth }, () => randomElement([WALL, EMPTY]));
            }
            return newMap;
        }

        function getRandomRobotPosition(map) {
            let validPos = map[0].filter((_, i) => map[1][i] === EMPTY).indexOf(EMPTY);
            return [2, validPos]; // Start at second row to avoid wall
        }

        function getRandomGoalPosition(map, robotPos) {
            do {
                goalPos = [gridHeight - 1, randomRange(0, gridWidth-1)]; // Last row
            } while (goalPos[1] === robotPos[1]); // Not same column as robot

            return goalPos;
        }

        function planPath(start, end, m) {
            let openList = [start];
            const closedList = new Set();
            const parentGrid = Array.from({ length: gridHeight }, () => []);
            while (openList.length > 0) {
                let current = openList.shift();
                
                if (current[1] === end[1]) {
                    // Reached goal column, trace back path
                    let p = [];
                    while (parentGrid[current[0]][current[1]] !== undefined) {
                        p.push(parentGrid[current[0]][current[1]]);
                        current = parentGrid[current[0]][current[1]];
                    }
                    return p;
                }

                // Check neighbours and add to open list if not in closed set or wall
                let neighbours = [[current[0] - 1, current[1]], [current[0], current[1] + 1]].filter(pos => {
                    const x = pos[0]; const y = pos[1];
                    return (x >= 0 &&
                        y < m.length &&
                        !closedList.has(`${x},${y}`) &&
                        m[x][y] !== WALL);
                });

                for (let neighbour of neighbours) {
                    if (!openList.includes(neighbour)) openList.push(neighbour);
                    parentGrid[neighbour[0]][neighbour[1]] = current; // Update parent
                }

                closedList.add(`${current[0]},${current[1]}`);
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            if (!path) return; // No path planned yet
            
            drawMap();
            drawRobot();
            drawGoal();
            if (steps < path.length-1) {
                steps++;
                moveRobot();
                dropRandomWall();
            } else {
                numReplans++;
                robotPos = [path[steps][0], path[steps][1]]; // Update robot position
                path = planPath(robotPos, goalPos, map); // Replan from current pos
                steps++; // Move to next step in new path
            }

            animationFrame = requestAnimationFrame(animate);
        }

        function drawMap() {
            for (let i = 0; i < gridHeight; i++) {
                for (let j = 0; j < gridWidth; j++) {
                    let cellVal = map[i][j];
                    if (cellVal === WALL) ctx.fillStyle = '#545a62'; // Dark grey wall
                    else if (path && path.length > steps && [i,j] == path[steps]) ctx.fillStyle = '#b0d87c'; // Light green current step
                    else if (path && path.some(pos => pos[0] === i && pos[1] === j)) ctx.fillStyle = 'orange'; // Orange planned path
                    else ctx.fillStyle = '#e3eaeb'; // Light grey empty cell

                    ctx.fillRect(j * cellSize, i * cellSize, cellSize - 1, cellSize - 1);
                }
            }
        }

        function drawRobot() {
            ctx.save();
            const robotImg = new Image();
            robotImg.src = 'robot-sprite.png'; // Replace with actual image path/URL
            
            if (steps <= map[robotPos[0]][robotPos[1]]) ctx.drawImage(robotImg, 2 * cellSize + steps * cellSize, robotPos[0] * cellSize);
            else ctx.drawImage(robotImg, (path[steps][1] - robotPos[1]) * cellSize + 2 * cellSize, path[steps][0] * cellSize); // Offset by planned step
            
            ctx.restore();
        }

        function drawGoal() {
            if (goalPos) {
                ctx.fillStyle = '#379b48'; // Light green goal
                ctx.fillRect(goalPos[1] * cellSize, goalPos[0] * cellSize, cellSize - 1, cellSize - 1);
            }
        }

        function moveRobot() {
            if (path && path.length > steps) {
                robotPos = [path[steps][0], path[steps][1]];
                map[robotPos[0]][robotPos[1]] = ROBOT; // Update map with new robot position
            }
        }

        function dropRandomWall() {
            if (Math.random() < 0.2 && steps > 3) { // Drop wall ahead of current path every 5th step
                const nextStep = [path[steps+1][0], path[steps+1][1]];
                map[nextStep[0]][nextStep[1]] = WALL;
            }
        }

        function randomElement(arr) {
            return arr[Math.floor(Math.random() * arr.length)];
        }

        function randomRange(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

    </script>
</body>
</html>
```

deepseek-r1:32bSTATFORMAT

Show code

```html
<!DOCTYPE html>
<html><head><title>Robot Navigation</title><style>canvas{border:1px solid #ccc;display:block;margin:20px auto}body{background:#f0f0f0;text-align:center;font-family:sans-serif}</style></head><body>
<canvas id=c width=600 height=400></canvas>
<script>
let c=document.getElementById('c'),ctx=c.getContext('2d'),W=30,H=20,CELL=20,walls=[],robot={x:1,y:1},goal={x:28,y:18},path=[],steps=0,replans=0,running=true;
function drawGrid(){for(let y=0;y<H;y++)for(let x=0;x<W;x++)ctx.fillStyle='#f0f0f0',ctx.fillRect(x*CELL,y*CELL,CELL-1,CELL-1)}
function drawWalls(){walls.forEach(w=>{ctx.fillStyle='black';ctx.fillRect(w.x*CELL,w.y*CELL,CELL-1,CELL-1)})}
function drawRobot(){ctx.fillStyle='blue';ctx.beginPath();ctx.arc(robot.x*CELL+CELL/2,robot.y*CELL+CELL/2,CELL/2-.5,0,Math.PI*2);ctx.fill()}
function drawGoal(){ctx.fillStyle='green';ctx.fillRect(goal.x*CELL,goal.y*CELL,CELL-1,CELL-1)}
function drawPath(color){if(!path.length)return;color=color||'cyan';ctx.strokeStyle=color;ctx.lineWidth=CELL/4;ctx.beginPath();path.forEach(p=>{if(p==path[0])ctx.moveTo((p.x+.5)*CELL,(p.y+.5)*CELL);else ctx.lineTo((p.x+.5)*CELL,(p.y+.5)*CELL)});ctx.stroke()}
function distance(a,b){return Math.abs(a.x-b.x)+Math.abs(a.y-b.y)}
function dijkstra(start,goal){
    let queue=[],distances={},prev={};
    distances[start.x+'_'+start.y]=0;
    queue.push({x:start.x,y:start.y,d:0});
    while(queue.length>0){
        queue.sort((a,b)=>a.d-b.d);
        let current=queue.shift();
        if(current.x==goal.x&&current.y==goal.y)break;
        for(let dx=-1;dx<=1;dx++)for(let dy=-1;dy<=1;dy++){
            if(dx||dy){
                let nx=current.x+dx,ny=current.y+dy;
                if(nx>=0&&nx<W&&ny>=0&&ny<H&&!walls.some(w=>w.x==nx&&w.y==ny)){
                    let key=nx+'_'+ny,d=newDistance=distances[current.x+'_'+current.y]+1;
                    if(!distances[key]||newDistance<distances[key]){
                        distances[key]=newDistance;
                        prev[nx+'_'+ny]={x:current.x,y:current.y};
                        queue.push({x:nx,y:ny,d:newDistance});
                    }
                }
            }
        }
    }
    let path=[],p={x:goal.x,y:goal.y};
    while(p.x!=start.x||p.y!=start.y){
        path.unshift(p);
        p=prev[p.x+'_'+p.y];
    }
    return path;
}
function updatePath(){path=dijkstra(robot,{x:goal.x,y:goal.y})}
function animate(){
    if(!running)return;
    ctx.clearRect(0,0,c.width,c.height);
    drawGrid();
    drawWalls();
    drawGoal();
    drawRobot();
    updatePath();
    drawPath(steps%10==9?'red':'cyan');
    let target=path[1];
    if(target){
        steps++;
        robot.x=target.x;
        robot.y=target.y;
        if(Math.random()<0.3&&steps%5==0){
            let aheadX=robot.x+Math.floor((goal.x-robot.x)/Math.abs(goal.x-robot.x||1));
            let aheadY=robot.y+Math.floor((goal.y-robot.y)/Math.abs(goal.y-robot.y||1));
            for(let i=0;i<3;i++){
                let x=(aheadX+i*(Math.abs(goal.x-robot.x)||1))%W;
                let y=(aheadY+i*(Math.abs(goal.y-robot.y)||1))%H;
                if(!walls.some(w=>w.x==x&&w.y==y))walls.push({x,y});
            }
        }
    }
    if(distance(robot,goal)<2){
        running=false;
        setTimeout(()=>{
            steps=0;replans=0;walls=[];robot={x:1,y:1};path=[];running=true;
            ctx.clearRect(0,0,c.width,c.height);
            animate();
        },2000);
    }
    requestAnimationFrame(animate);
}
function drawStats(){
ctx.fillStyle='black';ctx.font='20px sans-serif';
ctx.fillText(`Steps: ${steps} | Replans: ${replans}`,10,30);
}
animate();
</script></body></html>
```

Outside the Brain cluster — same task, same character budget, collected through their own tooling (response times not comparable)

GPT-5.5 (Codex)frontier referenceOK

Show code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Robot Replanner</title>
<style>
html,body{margin:0;height:100%;background:#111;color:#eee;font:16px system-ui;display:grid;place-items:center}
#wrap{position:relative}
canvas{background:#181b20;box-shadow:0 0 0 1px #333;width:min(96vw,900px);height:auto}
#hud{position:absolute;left:12px;top:10px;background:#0009;padding:6px 10px;border-radius:6px}
</style>
</head>
<body>
<div id="wrap"><canvas id="c" width="900" height="600"></canvas><div id="hud"></div></div>
<script>
const W=30,H=20,S=30,c=document.getElementById("c"),x=c.getContext("2d"),hud=document.getElementById("hud");
let g,bot,goal,path,pi,t,from,to,steps,replans,colors,ci,last,blockTick,done;
function key(p){return p.x+","+p.y}
function eq(a,b){return a.x==b.x&&a.y==b.y}
function rand(n){return Math.floor(Math.random()*n)}
function pathfind(a,b){
 let q=[a],seen=new Set([key(a)]),prev={},dirs=[[1,0],[-1,0],[0,1],[0,-1]];
 for(let h=0;h<q.length;h++){
  let p=q[h]; if(eq(p,b)){let r=[p];while(!eq(r[0],a))r.unshift(prev[key(r[0])]);return r}
  for(let d of dirs){let n={x:p.x+d[0],y:p.y+d[1]},k=key(n);
   if(n.x>=0&&n.y>=0&&n.x<W&&n.y<H&&!g[n.y][n.x]&&!seen.has(k)){seen.add(k);prev[k]=p;q.push(n)}
  }
 }
 return null;
}
function fresh(){
 g=Array.from({length:H},()=>Array(W).fill(0));bot={x:0,y:0};goal={x:W-1,y:H-1};
 for(let i=0;i<95;i++){let p={x:rand(W),y:rand(H)};if(!eq(p,bot)&&!eq(p,goal))g[p.y][p.x]=1}
 while(!(path=pathfind(bot,goal)))fresh();
 pi=0;t=0;from=to=bot;steps=0;replans=0;ci=0;last=0;blockTick=4;done=0;
 colors=["#43d9ad","#ffb000","#7aa2ff","#ff5f7e","#b7f34b","#d07cff"];
}
function replan(){
 path=pathfind(bot,goal);replans++;ci=(ci+1)%colors.length;pi=0;
 if(!path){for(let y=0;y<H;y++)for(let x0=0;x0<W;x0++)g[y][x0]=0;path=pathfind(bot,goal)}
}
function dropWall(){
 if(!path||path.length<4)return;
 let cand=path.slice(Math.min(pi+2,path.length-1),Math.min(pi+8,path.length-1));
 if(!cand.length)return;
 let p=cand[rand(cand.length)];
 if(!eq(p,goal)&&!eq(p,bot)){g[p.y][p.x]=1;if(path.some(v=>g[v.y][v.x]))replan()}
}
function draw(r){
 x.clearRect(0,0,c.width,c.height);
 for(let y=0;y<H;y++)for(let i=0;i<W;i++){x.fillStyle=g[y][i]?"#3d4652":"#20252d";x.fillRect(i*S,y*S,S-1,S-1)}
 if(path){x.strokeStyle=colors[ci];x.lineWidth=5;x.beginPath();for(let i=0;i<path.length;i++){let p=path[i],px=p.x*S+S/2,py=p.y*S+S/2;i?x.lineTo(px,py):x.moveTo(px,py)}x.stroke()}
 x.fillStyle="#35e06f";x.fillRect(goal.x*S+6,goal.y*S+6,S-12,S-12);
 let bx=(from.x+(to.x-from.x)*r)*S+S/2,by=(from.y+(to.y-from.y)*r)*S+S/2;
 x.fillStyle="#ddd";x.beginPath();x.arc(bx,by,11,0,7);x.fill();
 x.fillStyle="#222";x.fillRect(bx-6,by-4,4,4);x.fillRect(bx+2,by-4,4,4);
 x.strokeStyle="#ddd";x.lineWidth=3;x.beginPath();x.moveTo(bx,by-11);x.lineTo(bx,by-18);x.stroke();
 hud.textContent="replans: "+replans+"  steps: "+steps;
}
function loop(ms){
 if(!last)last=ms;let dt=Math.min(0.06,(ms-last)/1000);last=ms;t+=dt*3.2;
 if(t>=1&&!done){bot=to;steps++;t=0;if(eq(bot,goal)){done=1;setTimeout(fresh,700)}
  else{if(steps%blockTick==0){dropWall();blockTick=3+rand(4)}
   if(!path||pi>=path.length-1||g[path[pi+1].y][path[pi+1].x])replan();
   from=bot;to=path[Math.min(++pi,path.length-1)];
  }}
 draw(done?1:t);requestAnimationFrame(loop);
}
fresh();requestAnimationFrame(loop);
</script>
</body>
</html>

Claude Sonnet 5frontier referenceOK

Show code

<!DOCTYPE html><html><head><meta charset="utf8"><title>Robot Replan</title><style>
body{margin:0;background:#111;color:#eee;font-family:monospace}canvas{display:block;margin:20px auto;background:#181818}
</style></head><body>
<canvas id="c" width="900" height="640"></canvas>
<script>
const cv=document.getElementById('c'),cx=cv.getContext('2d');
const W=30,H=20,cell=28,ox=10,oy=50;
let grid,robot,goal,path,pIdx,replans,steps,frame,phase,pause,pathColor;
function key(x,y){return x+','+y}
function inb(x,y){return x>=0&&x<W&&y>=0&&y<H}
function bfs(sx,sy,gx,gy){
 let q=[[sx,sy]],seen={};seen[key(sx,sy)]=null;
 while(q.length){
  let[x,y]=q.shift();
  if(x===gx&&y===gy){
   let p=[[x,y]],k=key(x,y);
   while(seen[k]!==null){k=seen[k];let[a,b]=k.split(',').map(Number);p.push([a,b])}
   return p.reverse()
  }
  for(let[dx,dy]of[[1,0],[-1,0],[0,1],[0,-1]]){
   let nx=x+dx,ny=y+dy;
   if(inb(nx,ny)&&grid[nx][ny]===0&&!(key(nx,ny) in seen)){seen[key(nx,ny)]=key(x,y);q.push([nx,ny])}
  }
 }
 return null
}
function reset(){
 grid=[];for(let i=0;i<W;i++){grid.push(new Array(H).fill(0))}
 for(let k=0;k<60;k++){let x=Math.floor(Math.random()*W),y=Math.floor(Math.random()*H);grid[x][y]=1}
 robot={x:0,y:Math.floor(H/2)};goal={x:W-1,y:Math.floor(Math.random()*H)};
 grid[robot.x][robot.y]=0;grid[goal.x][goal.y]=0;
 path=bfs(robot.x,robot.y,goal.x,goal.y);
 if(!path){reset();return}
 pIdx=0;replans=0;steps=0;frame=0;phase='move';pause=0;pathColor='#4af'
}
function dropWall(){
 if(!path||pIdx>=path.length-2)return;
 for(let tries=0;tries<20;tries++){
  let i=pIdx+1+Math.floor(Math.random()*Math.min(6,path.length-1-pIdx));
  if(i<=pIdx||i>=path.length)continue;
  let[x,y]=path[i];
  if((x===robot.x&&y===robot.y)||(x===goal.x&&y===goal.y))continue;
  grid[x][y]=1;
  return
 }
}
function step(){
 if(robot.x===goal.x&&robot.y===goal.y){phase='done';pause=90;return}
 let blocked=false;
 for(let i=pIdx;i<path.length-1;i++){let[x,y]=path[i+1];if(grid[x][y]===1){blocked=true;break}}
 if(blocked){
  let np=bfs(robot.x,robot.y,goal.x,goal.y);
  if(np){path=np;pIdx=0;replans++;pathColor='hsl('+(replans*67%360)+',80%,60%)'}
  else{phase='stuck';pause=90;return}
 }
 pIdx++;
 if(pIdx<path.length){robot.x=path[pIdx][0];robot.y=path[pIdx][1];steps++}
 if(steps>0&&steps%4===0)dropWall()
}
function draw(){
 cx.fillStyle='#181818';cx.fillRect(0,0,cv.width,cv.height);
 for(let x=0;x<W;x++)for(let y=0;y<H;y++){
  cx.fillStyle=grid[x][y]===1?'#844':'#222';
  cx.fillRect(ox+x*cell,oy+y*cell,cell-2,cell-2)
 }
 if(path){
  cx.strokeStyle=pathColor;cx.lineWidth=3;cx.beginPath();
  for(let i=pIdx;i<path.length;i++){let[x,y]=path[i];let px=ox+x*cell+cell/2,py=oy+y*cell+cell/2;i===pIdx?cx.moveTo(px,py):cx.lineTo(px,py)}
  cx.stroke();cx.lineWidth=1
 }
 cx.fillStyle='#3c3';cx.beginPath();cx.arc(ox+goal.x*cell+cell/2,oy+goal.y*cell+cell/2,cell/2-3,0,7);cx.fill();
 cx.fillStyle='#fd0';cx.beginPath();cx.arc(ox+robot.x*cell+cell/2,oy+robot.y*cell+cell/2,cell/2-3,0,7);cx.fill();
 cx.fillStyle='#fff';cx.font='18px monospace';cx.textAlign='left';
 cx.fillText('Replans: '+replans+'   Steps: '+steps+(phase==='done'?'   GOAL REACHED':phase==='stuck'?'   BLOCKED':''),20,25);
}
function loop(){
 frame++;
 if(phase==='move'){if(frame%10===0)step()}
 else if(phase==='done'||phase==='stuck'){pause--;if(pause<=0)reset()}
 draw();
 requestAnimationFrame(loop)
}
reset();loop();
</script></body></html>

Claude Haiku 4.5frontier referenceOK

Show code

<!DOCTYPE html><html><head><title>r69</title></head><body><canvas id="c"></canvas><script>
let c=document.getElementById('c'),x=c.getContext('2d');c.width=800;c.height=600;
let W=30,H=20,g=Array(H).fill(0).map(()=>Array(W).fill(0));
let rx=2,ry=2,gx=W-2,gy=H-2,path=[],t=0,rep=0,steps=0;
function astar(){
  let open=[{x:rx,y:ry,f:0,g:0}],closed=new Set(),par=new Map();
  while(open.length){
    open.sort((a,b)=>a.f-b.f);let cur=open.shift();
    if(cur.x===gx&&cur.y===gy){
      path=[{x:gx,y:gy}];
      while(par.has(cur.x+","+cur.y)){let p=par.get(cur.x+","+cur.y);path.unshift(p);cur=p;}
      return true;
    }
    closed.add(cur.x+","+cur.y);
    for(let[dx,dy]of[[1,0],[-1,0],[0,1],[0,-1]]){
      let nx=cur.x+dx,ny=cur.y+dy;
      if(nx<0||nx>=W||ny<0||ny>=H||g[ny][nx]||closed.has(nx+","+ny))continue;
      let ng=cur.g+1,nf=ng+Math.abs(nx-gx)+Math.abs(ny-gy);
      if(!open.find(o=>o.x===nx&&o.y===ny)){open.push({x:nx,y:ny,f:nf,g:ng});par.set(nx+","+ny,cur);}
    }
  }
  return false;
}
astar();
function draw(){
  x.fillStyle="#fff";x.fillRect(0,0,800,600);
  let s=Math.floor(400/W);
  // Grid
  for(let i=0;i<H;i++)for(let j=0;j<W;j++){
    x.fillStyle=g[i][j]?"#333":"#fff";x.fillRect(j*s,i*s,s,s);
    x.strokeStyle="#ccc";x.strokeRect(j*s,i*s,s,s);
  }
  // Path
  x.strokeStyle="#0f0";x.lineWidth=1;x.beginPath();
  if(path.length)path.forEach((p,i)=>{if(i===0)x.moveTo(p.x*s+s/2,p.y*s+s/2);else x.lineTo(p.x*s+s/2,p.y*s+s/2);});
  x.stroke();
  // Robot
  x.fillStyle="#f00";x.fillRect(rx*s+2,ry*s+2,s-4,s-4);
  // Goal
  x.fillStyle="#00f";x.fillRect(gx*s+2,gy*s+2,s-4,s-4);
  // Move robot
  if(path.length>1){let p=path[1];rx=p.x;ry=p.y;path.shift();steps++;}
  else if(t++%30===0){let wax=Math.floor(Math.random()*W),way=Math.floor(Math.random()*H);if((wax!==rx||way!==ry)&&(wax!==gx||way!==gy)){g[way][wax]=1;rep++;astar();}}
  x.fillStyle="#000";x.font="14px mono";x.fillText("Replans:"+rep+" Steps:"+steps,500,50);
  requestAnimationFrame(draw);
}draw();
</script></body></html>

Results at a glance— every model in this round with score, response time and status.

Who wrote what

Model	Blind score	Latency	Status
llama3.1:8b	—	148.3 s	OK
qwen3.5:9b	—	73.6 s	OK
mistral-small:24b	—	153.9 s	OK
qwen3:8b	—	—	harness
gemma4:26b	—	—	harness
deepseek-r1:14b	—	75.5 s	OK
qwen3:14b	—	59.9 s	OK
qwen3-coder:30b	—	32.2 s	OK
qwq:32b	—	150.5 s	OK
command-r:35b	—	158.0 s	OK
deepseek-r1:32b	—	149.1 s	OK

Frontier reference — outside the blind field

These models answered the identical prompt outside the blind field. They are deliberately not scored and not part of the blind comparison — they are there so you can see where a frontier model lands on the same task.

Collected differently from the blind field: the local models run through a plain API harness, the frontier references through a context-free agent, one shot, no retries. Response times are therefore not comparable and are not shown. On two English tasks the reference answer came back in German — an artefact of that harness, flagged on the affected rounds.

Claude Opus 5frontier reference

Show code

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dynamic Replanning Robot</title>
<style>
:root{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 0%,#141c34 0%,#070a14 70%);color:#e6ecff;font:14px/1.4 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;padding:18px}
.wrap{width:min(760px,100%)}
h1{margin:0 0 10px;font-size:17px;letter-spacing:.02em;font-weight:650}
.hud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.p{background:#151d33;border:1px solid #263252;border-radius:8px;padding:6px 10px;font-variant-numeric:tabular-nums}
.p b{color:#8fa4d4;font-weight:500;margin-right:6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
canvas{width:100%;height:auto;display:block;border:1px solid #263252;border-radius:10px;background:#0b1020}
.leg{margin-top:9px;color:#8fa4d4;font-size:12px}
</style></head>
<body><div class="wrap">
<h1>Robot replanning on a changing map</h1>
<div class="hud"><div class="p"><b>Steps</b><span id="s">0</span></div><div class="p"><b>Replans</b><span id="r">0</span></div><div class="p"><b>Walls</b><span id="w">0</span></div><div class="p"><b>Status</b><span id="t">planning</span></div></div>
<canvas id="c"></canvas>
<div class="leg">Breadth-first shortest path on a 30&times;20 grid. New walls appear ahead of the robot; a blocked route triggers an immediate replan from its current cell, drawn in a fresh colour.</div>
</div>
<script>
const W=30,H=20,CS=25,COL=["#38bdf8","#f472b6","#facc15","#4ade80","#c084fc","#fb923c","#22d3ee"];
const cv=document.getElementById("c");cv.width=W*CS;cv.height=H*CS;const ctx=cv.getContext("2d");
const el=i=>document.getElementById(i);
let g,path,pi,rob,goalI,steps,replans,nwalls,t,ci,pulse,done,status;
const ix=(x,y)=>y*W+x,X=i=>i%W,Y=i=>(i/W)|0,ri=n=>(Math.random()*n)|0;
function bfs(s,e){const pv=new Int32Array(W*H).fill(-1),q=[s];pv[s]=s;let h=0;
 while(h<q.length){const c=q[h++];if(c===e){const p=[];let k=c;while(k!==pv[k]){p.push(k);k=pv[k]}p.push(k);return p.reverse()}
  const cx=X(c),cy=Y(c);
  for(const[dx,dy]of[[1,0],[0,1],[-1,0],[0,-1]]){const nx=cx+dx,ny=cy+dy;if(nx<0||ny<0||nx>=W||ny>=H)continue;const n=ix(nx,ny);if(g[n]||pv[n]>=0)continue;pv[n]=c;q.push(n)}}
 return null}
function init(){for(;;){g=new Uint8Array(W*H);nwalls=0;
  for(let i=0;i<W*H;i++)if(Math.random()<.13){g[i]=1;nwalls++}
  const s=ix(1+ri(3),1+ri(H-2)),e=ix(W-2-ri(3),1+ri(H-2));if(s===e)continue;
  g[s]=0;g[e]=0;const p=bfs(s,e);if(!p)continue;
  rob=s;goalI=e;path=p;pi=0;steps=0;replans=0;t=0;ci=0;pulse=[];done=0;status="following path";return}}
function remainingBlocked(){for(let k=pi;k<path.length;k++)if(g[path[k]])return true;return false}
function dropWall(){const ahead=[];for(let k=pi+2;k<path.length-1;k++)ahead.push(path[k]);
 let c=-1;
 if(ahead.length&&Math.random()<.85)c=ahead[ri(Math.min(ahead.length,6))];
 else{for(let a=0;a<40;a++){const q=ix(ri(W),ri(H));if(!g[q]&&q!==goalI&&q!==rob){c=q;break}}}
 if(c<0||c===goalI||c===rob)return;g[c]=1;nwalls++;pulse.push({c,t:.7})}
function replan(){const p=bfs(rob,goalI);
 if(!p){status="trapped - new map";done=1.1;return}
 path=p;pi=0;replans++;ci=(ci+1)%COL.length;status="replanned";}
function stepDone(){pi++;steps++;rob=path[pi];
 if(rob===goalI){status="goal reached";done=1.4;return}
 if(steps%3===0)dropWall();
 if(remainingBlocked())replan();else if(status==="replanned")status="following path"}
function cell(i,pad,col,rad){ctx.fillStyle=col;ctx.beginPath();ctx.roundRect(X(i)*CS+pad,Y(i)*CS+pad,CS-2*pad,CS-2*pad,rad);ctx.fill()}
function draw(now){ctx.fillStyle="#0b1020";ctx.fillRect(0,0,cv.width,cv.height);
 ctx.strokeStyle="rgba(140,170,255,.07)";ctx.lineWidth=1;ctx.beginPath();
 for(let x=0;x<=W;x++){ctx.moveTo(x*CS+.5,0);ctx.lineTo(x*CS+.5,H*CS)}
 for(let y=0;y<=H;y++){ctx.moveTo(0,y*CS+.5);ctx.lineTo(W*CS,y*CS+.5)}ctx.stroke();
 for(let i=0;i<W*H;i++)if(g[i])cell(i,1,"#2b3a5e",3);
 const c=COL[ci];
 for(let k=pi;k<path.length;k++)cell(path[k],CS*.36,c+"55",2);
 for(const p of pulse){const a=p.t/.7;ctx.strokeStyle="rgba(255,90,90,"+a+")";ctx.lineWidth=2;ctx.strokeRect(X(p.c)*CS+1.5,Y(p.c)*CS+1.5,CS-3,CS-3)}
 const gp=.5+.5*Math.sin(now/260);
 ctx.strokeStyle="rgba(74,222,128,"+(.45+.5*gp)+")";ctx.lineWidth=2;
 ctx.strokeRect(X(goalI)*CS+3.5,Y(goalI)*CS+3.5,CS-7,CS-7);
 cell(goalI,CS*.34,"#4ade80",2);
 let px=X(rob),py=Y(rob);
 if(!done&&pi+1<path.length){const n=path[pi+1];px+=(X(n)-px)*t;py+=(Y(n)-py)*t}
 const rx=px*CS+CS/2,ry=py*CS+CS/2;
 ctx.fillStyle=c+"33";ctx.beginPath();ctx.arc(rx,ry,CS*.72,0,7);ctx.fill();
 ctx.fillStyle=c;ctx.beginPath();ctx.arc(rx,ry,CS*.34,0,7);ctx.fill();
 ctx.fillStyle="#0b1020";ctx.beginPath();ctx.arc(rx,ry,CS*.13,0,7);ctx.fill()}
let last=0;
function frame(ts){const dt=Math.min(.05,last?(ts-last)/1000:0);last=ts;
 if(done>0){done-=dt;if(done<=0)init()}
 else{t+=dt*8.5;let guard=0;while(t>=1&&!done&&guard++<4){t-=1;stepDone()}if(done)t=0}
 for(const p of pulse)p.t-=dt;pulse=pulse.filter(p=>p.t>0);
 el("s").textContent=steps;el("r").textContent=replans;el("w").textContent=nwalls;el("t").textContent=status;
 draw(ts);requestAnimationFrame(frame)}
init();requestAnimationFrame(frame);
</script></body></html>