Code · blind round
R84 · Voronoi cells with moving seeds
blind round
3/8 local models answered
The field: deepseek-r1:14b · gemma4:26b · llama3.1:8b · mistral-small:24b · qwen3-coder:30b · qwen3:14b · qwen3:8b · qwen3.5:9b — listed alphabetically, which is not the order of the cards below.
not evidence about those models. Which ones, and why, is spelled out in the reveal.
Show task
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 draws a Voronoi diagram of 25 seed points on a <canvas> and animates it. Each seed drifts slowly and bounces off the edges, and the cell boundaries update every frame so the cells visibly stretch, shrink and swap neighbours. Fill each cell in its own colour and mark the seeds. Show the number of cells and the area of the largest one. 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 — blind
Local models (Brain cluster) — identical prompt, anonymized order
MODEL A qwen3:14b ERR BLANK FORMAT This one's best ▶ Playstarts, but throws a JavaScript error Show code ```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Voronoi Diagram</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #111; }
canvas { border: 1px solid #444; }
</style>
</head>
<body>
<canvas id="voronoiCanvas"></canvas>
<script>
const canvas = document.getElementById('voronoiCanvas');
const ctx = canvas.getContext('2d');
let W, H;
const NUM_SEEDS = 25;
const GRID_SIZE = 30; // Samples per dimension (e.g., 30x30 grid)
const SPEED = 1.5;
const BUMP_ENERGY = 0.8;
let seeds = [];
let animationFrameId;
function init() {
W = H = window.innerWidth * 0.9 / 2; // Set canvas size dynamically, respecting aspect ratio
if (W > 800) W = 800;
if (H > 600) H = 600;
canvas.width = W;
canvas.height = H;
seeds = [];
for (let i = 0; i < NUM_SEEDS; i++) {
seeds.push({
x: Math.random() * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * SPEED * 0.8,
vy: (Math.random() - 0.5) * SPEED * 0.8
});
}
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
animate();
}
function updateSeeds() {
seeds.forEach((s, i) => {
s.x += s.vx;
s.y += s.vy;
// Bounce off walls
if (s.x < 0 || s.x > W) {
s.vx *= -BUMP_ENERGY;
s.x = Math.max(0, Math.min(W, s.x));
}
if (s.y < 0 || s.y > H) {
s.vy *= -BUMP_ENERGY;
s.y = Math.max(0, Math.min(H, s.y));
}
// Simple damping/slow movement over time
s.vx *= 0.995;
s.vy *= 0.995;
});
}
function calculateVoronoi() {
const imageData = ctx.getImageData(0, 0, W, H);
let data = imageData.data;
let maxAreaSeed = new Array(NUM_SEEDS).fill(0);
let totalPoints = 0;
// We use a sampling grid approach for efficiency and visual effect
const stepX = Math.max(1, W / GRID_SIZE);
const stepY = Math.max(1, H / GRID_SIZE);
for (let sy = 0; sy < GRID_SIZE; sy++) {
for (let sx = 0; sx < GRID_SIZE; sx++) {
// Calculate position of the sample point
const px = sx * stepX + Math.random() * (stepX / 2);
const py = sy * stepY + Math.random() * (stepY / 2);
let minDistSq = Infinity;
let closestSeedIndex = -1;
// Find the nearest seed
for (let i = 0; i < NUM_SEEDS; i++) {
const dx = px - seeds[i].x;
const dy = py - seeds[i].y;
const distSq = dx * dx + dy * dy;
if (distSq < minDistSq) {
minDistSq = distSq;
closestSeedIndex = i;
}
}
// Assign color based on the closest seed index
let dataIndex = ((Math.floor(px) % W) * 4 + (Math.floor(py) % H)) * 4;
if (dataIndex >= data.length) continue; // Safety check
const i = closestSeedIndex;
totalPoints++;
maxAreaSeed[i]++;
// Color generation: Use HSV model based on seed index for distinct colors
const hue = (360 / NUM_SEEDS) * i;
ctx.fillStyle = `hsl(${hue}, 80%, ${50 + Math.floor(Math.random() * 10)}%)`;
// Drawing a small square representing the sample point's cell ownership
data[dataIndex] = parseInt(ctx.fillStyle.match(/(\d+)%/)[0].replace('%', '')); // R (Simplified)
data[dataIndex + 1] = parseInt(ctx.fillStyle.match(/(\d+)%/)[0].replace('%', '')); // G (Simplified)
data[dataIndex + 2] = parseInt(ctx.fillStyle.match(/(\d+)%/)[0].replace('%', '')); // B (Simplified)
}
}
// Restore the image data after sampling to draw seeds on top
ctx.putImageData(imageData, 0, 0);
// Find the index of the largest cell area/sample count
let maxArea = 0;
let winnerIndex = -1;
for (let i = 0; i < NUM_SEEDS; i++) {
if (maxAreaSeed[i] > maxArea) {
maxArea = maxAreaSeed[i];
winnerIndex = i;
}
}
// Display metrics using temporary text drawing
ctx.fillStyle = 'white';
const statsText = `Cells: ${NUM_SEEDS} | Largest Area Sample Count: ${Math.round(maxArea / (GRID_SIZE * GRID_SIZE))} units`;
ctx.font = "14px monospace";
ctx.fillText(statsText, 10, H - 10);
}
function animate() {
// Clear the canvas for a fresh frame
ctx.fillStyle = '#111';
ctx.fillRect(0, 0, W, H);
updateSeeds();
calculateVoronoi();
animationFrameId = requestAnimationFrame(animate);
}
window.addEventListener('resize', () => {
// Re-init on resize to fit new dimensions
canvas.width = window.innerWidth * 0.9 / 2;
canvas.height = Math.min(600, window.innerHeight * 0.9);
W = canvas.width; H = canvas.height;
});
init();
</script>
</body>
</html>
```
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
▶ Play Show code ```html
<!DOCTYPE html>
<html>
<head>
<title>Animated Voronoi Diagram</title>
<style>body{margin:0;background:#111}canvas{display:block}#info{position:absolute;color:white;font-family:monospace;padding:10px;z-index:10;}
</style>
</head>
<body>
<canvas id="voronoiCanvas"></canvas>
<div id="info"></div>
<script>
const canvas = document.getElementById('voronoiCanvas');
const ctx = canvas.getContext('2d');
let W, H;
// Configuration Constants
const NUM_SEEDS = 25;
const STEP = 8; // Sampling step size (affects detail vs performance)
const VELOCITY_SCALE = 0.3;
let seeds = [];
let vels = [];
let colors = [];
let areas = [];
function init(width, height) {
W = width;
H = height;
canvas.width = W;
canvas.height = H;
seeds = [];
vels = [];
colors = [];
areas = new Array(NUM_SEEDS).fill(0);
for (let i = 0; i < NUM_SEEDS; i++) {
// Initialize seeds randomly, ensuring they are far from edges
seeds.push({ x: Math.random() * W * 0.8 + W * 0.1, y: Math.random() * H * 0.8 + H * 0.1 });
vels.push({ vx: (Math.random() - 0.5) * VELOCITY_SCALE, vy: (Math.random() - 0.5) * VELOCITY_SCALE });
// Assign a unique color (using Hue cycle for visual variety)
const hue = Math.floor(360 / NUM_SEEDS * i);
colors.push(`hsl(${hue}, 80%, 50%)`);
}
}
function updateSeeds() {
for (let i = 0; i < NUM_SEEDS; i++) {
// Apply movement
seeds[i].x += vels[i].vx;
seeds[i].y += vels[i].vy;
// Boundary collision detection and bounce
if (seeds[i].x < 0 || seeds[i].x > W) {
vels[i].vx *= -1;
seeds[i].x = Math.max(0, Math.min(W, seeds[i].x)); // Clamp position
}
if (seeds[i].y < 0 || seeds[i].y > H) {
vels[i].vy *= -1;
seeds[i].y = Math.max(0, Math.min(H, seeds[i].y)); // Clamp position
}
// Slight random drift to prevent perfect cycles
vels[i].vx += (Math.random() - 0.5) * 0.01;
vels[i].vy += (Math.random() - 0.5) * 0.01;
}
}
function drawVoronoi() {
// Reset areas for the current frame
areas.fill(0);
ctx.clearRect(0, 0, W, H);
for (let y = STEP / 2; y < H; y += STEP) {
for (let x = STEP / 2; x < W; x += STEP) {
// Sample point coordinates
const px = x + STEP / 2;
const py = y + STEP / 2;
let minDstSq = Infinity;
let closestSeedIndex = -1;
// Find the nearest seed
for (let i = 0; i < NUM_SEEDS; i++) {
const dx = seeds[i].x - px;
const dy = seeds[i].y - py;
const dstSq = dx * dx + dy * dy;
if (dstSq < minDstSq) {
minDstSq = dstSq;
closestSeedIndex = i;
}
}
// Draw the cell segment corresponding to this sample point
ctx.fillStyle = colors[closestSeedIndex];
ctx.fillRect(x, y, STEP, STEP);
// Accumulate area (using step^2 as approximation)
areas[closestSeedIndex] += STEP * STEP;
}
}
}
function drawSeedsAndInfo() {
// Draw seeds on top of the cells
ctx.fillStyle = 'white';
for (let i = 0; i < NUM_SEEDS; i++) {
const s = seeds[i];
ctx.beginPath();
ctx.arc(s.x, s.y, 4, 0, Math.PI * 2);
ctx.fill();
// Draw a small distinguishing marker for the seed center
ctx.fillStyle = colors[i];
ctx.fillRect(s.x - 1, s.y - 1, 2, 2);
}
// Update info panel
const maxArea = Math.max(...areas);
document.getElementById('info').innerHTML = `Cells: ${NUM_SEEDS}<br>Largest Area: ${Math.round(maxArea / 1000)} sq units`;
}
function loop() {
updateSeeds();
drawVoronoi();
drawSeedsAndInfo();
requestAnimationFrame(loop);
}
window.onload = function() {
// Set canvas dimensions to fill the window
W = window.innerWidth;
H = window.innerHeight - 30; // Leave space for info box
init(W, H);
loop();
};
</script>
</body>
</html>
```
▶ Play Show code ```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Voronoi Animation</title>
<style>body {margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#111;}canvas {border:2px solid #444;}</style>
</head>
<body>
<canvas id="voronoiCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('voronoiCanvas');
const ctx = canvas.getContext('2d');
let seeds = [];
let velocities = [];
let W = canvas.width;
let H = canvas.height;
function init() {
seeds = [];
velocities = [];
for (let i = 0; i < 25; i++) {
seeds.push({ x: Math.random() * W, y: Math.random() * H });
velocities.push({ vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5 });
}
}
function updateSeeds(dt) {
for (let i = 0; i < seeds.length; i++) {
const s = seeds[i];
const v = velocities[i];
s.x += v.vx * dt;
s.y += v.vy * dt;
if (Math.abs(s.x) < 0 || Math.abs(s.x - W) < 10) {
v.vx *= -1;
s.x = Math.max(0, Math.min(W, s.x));
}
if (Math.abs(s.y) < 0 || Math.abs(s.y - H) < 10) {
v.vy *= -1;
s.y = Math.max(0, Math.min(H, s.y));
}
}
}
function drawVoronoi() {
ctx.clearRect(0, 0, W, H);
const scale = 4;
const gridStep = scale; // Sampling step for performance
let cellMap = new Map();
let maxArea = 0;
let currentCellAreas = {};
for (let x = 0; x < W; x += gridStep) {
for (let y = 0; y < H; y += gridStep) {
let minDistSq = Infinity;
let closestSeedIndex = -1;
for (let i = 0; i < seeds.length; i++) {
const dx = x - seeds[i].x;
const dy = y - seeds[i].y;
const distSq = dx * dx + dy * dy;
if (distSq < minDistSq) {
minDistSq = distSq;
closestSeedIndex = i;
}
}
// Color the sampled point based on closest seed
ctx.fillStyle = `hsl(${closestSeedIndex * 360 / seeds.length}, 70%, ${50 + (closestSeedIndex % 3) * 10}%)`;
ctx.fillRect(x, y, gridStep, gridStep);
// Area tracking (approximated by point count)
const key = closestSeedIndex;
currentCellAreas[key] = (currentCellAreas[key] || 0) + 1;
}
}
let cellCount = seeds.length;
let maxAreaFound = 0;
for (let i = 0; i < seeds.length; i++) {
if ((area = currentCellAreas[i] || 0) > maxAreaFound) {
maxAreaFound = area;
}
}
// Draw seeds and info text
ctx.fillStyle = 'white';
for (let i = 0; i < seeds.length; i++) {
ctx.beginPath();
ctx.arc(seeds[i].x, seeds[i].y, 4, 0, Math.PI * 2);
ctx.fill();
}
ctx.fillStyle = '#ccc';
const infoText = `Cells: ${cellCount}, Max Area (Samples): ${maxAreaFound}`;
ctx.font = '16px monospace';
ctx.fillText(infoText, 10, H - 10);
}
let lastTime = 0;
function animationLoop(time) {
const dt = (time - lastTime) / 50; // Normalize time step for smooth movement
lastTime = time;
updateSeeds(dt);
drawVoronoi();
requestAnimationFrame(animationLoop);
}
init();
requestAnimationFrame(animationLoop);
</script>
</body>
</html>
```
No usable answer reached the harness (ERR). Counted as a did-not-finish.
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
Reveal the models — compare the answers first, then open. Names, blind scores and latencies are hidden until you do.