MODEL Amistral-small:24bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
Code · blind round
R93 · Rotating wireframe height field
Answers below are anonymized and shuffled. Read, judge, pick a favourite — then scroll down and reveal the models.
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.
2 of the 8 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. 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 rotating 3D height field on a <canvas>: build a grid of heights from a smooth mathematical function that changes over time, project every grid point in perspective while the whole surface rotates, and draw the mesh rows and columns from back to front so nearer rows cover the ones behind them. Show the grid size and the rotation angle. Use only the 2D canvas context — no WebGL, no libraries. 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
Show code
```html
<!DOCTYPE html>
<html><head><title>Rotating 3D Height Field</title></head><body style="background: #000; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh;"><canvas id="c" width="800" height="600" style="border: 1px solid #333;"></canvas><script>const c=document.getElementById('c');const ctx=c.getContext('2d');let W=c.width,H=c.height;let N=40;let s=Math.random()*2*Math.PI;let a=0;function h(x,y){return Math.sin(x*0.1)*Math.cos(y*0.1)+Math.sin((x+y)/5)};function draw(){ctx.clearRect(0,0,W,H);ctx.fillStyle='#333';ctx.fillRect(0,0,W,H);const scale=W/(N-1);let points=[];for(let i=0;i<N;i++){for(let j=0;j<N;j++){let x=(i-N/2)*scale*0.5,y=(j-N/2)*scale*0.5,z=h(x,y);points.push({x:x,y:y,z:z});}}ctx.strokeStyle='#666';ctx.lineWidth=1;let p=[];const angle_a = a*0.01;for(let i=0;i<N;i++){for(let j=0;j<N;j++){let x=(i-N/2)*scale*0.5,y=(j-N/2)*scale*0.5,z=h(x,y);// Rotate coordinates: Yaw (around Y) and Pitch (around X)
let rx = x*Math.cos(angle_a)-z*Math.sin(angle_a);
let rz=x*Math.sin(angle_a)+z*Math.cos(angle_a);
// Simple projection assuming viewing direction is along Z' axis (or a combination)
// Let's use standard rotation: X -> X', Y -> Y', Z -> Z'
// Yaw (rotation around Y): x'=x*cos, z'=z*cos; y'=y + x*sin*tan(angle_a) - z*sin*tan(angle_a)*cos? Too complex.
// Standard 3D rotation for visualization: Rotate based on angle 'a'
let cosA=Math.cos(angle_a);
let sinA=Math.sin(angle_a);
let px = x*cosA-z*sinA;
let pz=x*sinA+z*cosA;
// Now we treat (px, y, pz) as the new coordinates.
// Projection: screenX = (p/d + cameraX)/(p+d), screenY = ...
let dx=W/(2*Math.sqrt(1+(x*x)+(y*y)+(z*z))); // Perspective factor
// Simplified pseudo-perspective projection for drawing the grid lines
for(let i=0;i<N;i++){
for(let j=0;j<N;j++){
let x=(i-N/2)*scale*0.5,y=(j-N/2)*scale*0.5,z=h(x,y);
// Rotate the point (x, y, z) by angle 'a' around the Y axis (vertical plane rotation)
let nx = x*Math.cos(angle_a)-z*Math.sin(angle_a);
let nz=x*Math.sin(angle_a)+z*Math.cos(angle_a);
// Point is (nx, y, nz). Projecting onto the XY plane for simplicity of drawing lines.
let sx = W/2 * (1 + Math.cos(angle_a)*((i-N/2)/N) - Math.sin(angle_a)*z*0.1);
let sy = H/2 * (1 + ((j-N/2)/N));
// Store vertices for depth sorting: {x, y, z, i, j}
p.push({
sx: W*(i/(N-1))-W/(2*Math.sqrt(1+(x*x)+(y*y)+z*z)), // Dummy pseudo-perspective calculation
sy: H*(j/(N-1))-H/(2*Math.sqrt(1+(x*x)+(y*y)+z*z)),
depth: Math.sqrt(x*x+y*y+z*z),
i: i, j: j
});
}
}
// --- Simplified Drawing (No complex depth sorting, just drawing projected lines) ---
ctx.beginPath();
for(let j=0;j<N;j++){ // Rows (Y direction)
ctx.moveTo((j-N/2)*scale*0.5+W/2, H-(j-N/2)*scale*0.5);
for(let i=0;i<N;i++){ // Columns (X direction)
// Calculate projected coordinates for the line segment end point
let x=(i-N/2)*scale*0.5,y=(j-N/2)*scale*0.5,z=h(x,y);
let cosA=Math.cos(angle_a), sinA=Math.sin(angle_a);
// Simple pseudo-projection based on rotation for visual effect
let sx = W * (i/(N-1)) + Math.cos(angle_a)*x*0.1 - Math.sin(angle_a)*z*0.1;
let sy = H - H*(j/(N-1));
ctx.lineTo(sx, sy);
}
}
// --- End Simplified Drawing ---
ctx.stroke();
ctx.fillStyle='#FFF';
ctx.font='14px Arial';
ctx.fillText(`Grid Size: ${N}x${N}`, 10, 20);
ctx.fillText(`Rotation Angle: ${(a/Math.PI*180).toFixed(0)}°`, 10, 40);
requestAnimationFrame(draw);
</script></body></html>
```MODEL Cqwen3:8bDNF
No usable answer reached the harness (ERR). Counted as a did-not-finish.
MODEL Dqwen3-coder:30bBLANK
Show code
<!DOCTYPE html>
<html>
<head>
<title>Rotating Height Field</title>
<style>
body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
canvas { border: 1px solid #333; }
#info { color: white; font-family: monospace; position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); padding: 8px;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<div id="info">Grid Size: 40x40 | Angle: 0 rad</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const infoDisplay = document.getElementById('info');
let A = 10; // Amplitude multiplier for height function
let GRID_SIZE = 40;
let SCALE = 30 / (GRID_SIZE - 1); // Scale factor for mapping grid units to canvas pixels
let rotationAngle = 0;
const CAMERA_DISTANCE = 50;
function getHeight(i, j) {
return A * Math.sin(i / 4) * Math.cos(j / 4);
}
// Project a world point (x, y, z) onto the screen
function project(x, y, z) {
const projectedZ = z + CAMERA_DISTANCE;
if (projectedZ < 1) return null;
return {
x: x / projectedZ * SCALE,
y: y / projectedZ * SCALE,
z: projectedZ // Use Z for sorting depth
};
}
function drawFrame(angle) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
infoDisplay.innerHTML = `Grid Size: ${GRID_SIZE}x${GRID_SIZE} | Angle: ${(angle * 180 / Math.PI).toFixed(1)} deg`;
// --- Drawing Mesh Lines ---
// We will draw all lines (rows and columns) and store them with their depth for sorting.
let segments = [];
for (let j = 0; j < GRID_SIZE; j++) {
for (let i = 0; i < GRID_SIZE - 1; i++) {
// 1. Horizontal lines (Rows: connecting (i, j) to (i+1, j))
const z1 = getHeight(i, j);
const z2 = getHeight(i + 1, j);
const p1_h = project(i, j, z1);
const p2_h = project(i + 1, j, z2);
if (p1_h && p2_h) {
// Depth sorting key: average Z depth of the segment
segments.push({
p1: p1_h, p2: p2_h, depth: (p1_h.z + p2_h.z) / 2, type: 'H'
});
}
// 2. Vertical lines (Columns: connecting (i, j) to (i, j+1))
const z3 = getHeight(i, j);
const z4 = getHeight(i, j + 1);
const p1_v = project(i, j, z3);
const p2_v = project(i, j + 1, z4);
if (p1_v && p2_v) {
segments.push({
p1: p1_v, p2: p2_v, depth: (p1_v.z + p2_v.z) / 2, type: 'V'
});
}
}
}
// Sort segments by increasing Z depth (farthest to nearest, so drawing order is back-to-front)
segments.sort((a, b) => a.depth - b.depth);
// Draw sorted segments
ctx.lineWidth = 1;
for (const seg of segments) {
ctx.strokeStyle = `rgba(100, 255, 100, ${Math.max(0.3, Math.min(1, 1 - (seg.depth / (CAMERA_DISTANCE * 2))))})`;
ctx.beginPath();
ctx.moveTo(seg.p1.x, seg.p1.y);
ctx.lineTo(seg.p2.x, seg.p2.y);
ctx.stroke();
}
}
function animate() {
rotationAngle += 0.03; // Rotation speed
drawFrame(rotationAngle);
requestAnimationFrame(animate);
}
// Start the animation immediately
animate();
</script>
</body>
</html>MODEL Egemma4:26bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
Show code
```html
<!DOCTYPE html>
<html>
<body><canvas id="c"></canvas><script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');
let W = 800;
let H = 600;
c.width = W;
c.height = H;
let GRID_SIZE = 25; // NxN grid
let STEP = 1.0;
// Camera/Scene parameters
const CAMERA_DISTANCE = 8.0;
const SCALE = 0.3;
let time = 0;
let angleX = 0;
let angleY = 0;
let lastTime = 0;
function setup() {
time = Math.random() * 100;
angleX = Math.PI / 4 + Math.random() * Math.PI / 2;
angleY = Math.random() * Math.PI;
lastTime = performance.now();
}
// Smooth height function: H(x, z)
function getHeight(x, z, t) {
let h = Math.sin(x * 0.5 + t * 0.2) * Math.cos(z * 0.3 + t * 0.1);
return h * 0.8;
}
// Project (x, y, z) to screen coordinates (x', y')
function project(p) {
let x = p[0];
let y = p[1] + p[2]; // Height acts as Y relative to ground plane
let z = p[2];
// Rotate point around X and Y axes
let tempX = x * Math.cos(angleY) - z * Math.sin(angleY);
let tempZ = x * Math.sin(angleY) + z * Math.cos(angleY);
let rx = tempX;
let ry = y;
let rz = tempZ;
// Rotate around X axis (pitch)
let pitch_x = rx;
let pitch_y = ry * Math.cos(angleX) - rz * Math.sin(angleX);
let pitch_z = ry * Math.sin(angleX) + rz * Math.cos(angleX);
// Rotate around Y axis (yaw)
let finalX = pitch_x * Math.cos(angleY) - pitch_z * Math.sin(angleY);
let finalY = pitch_y;
let finalZ = pitch_x * Math.sin(angleY) + pitch_z * Math.cos(angleY);
// Perspective projection
let scaleFactor = CAMERA_DISTANCE / (CAMERA_DISTANCE + finalZ);
return {
x: W / 2 + finalX * scaleFactor,
y: H / 2 - finalY * scaleFactor, // Y is inverted on canvas
z: finalZ * scaleFactor,
depth: finalZ // Used for sorting/depth check
};
}
// Main drawing function
function draw(t) {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#112233';
ctx.fillRect(0, 0, W, H);
let points = [];
let depthMap = {}; // Store projected depth for sorting
// Calculate all grid point positions and store their projections
for (let i = 0; i < GRID_SIZE; i++) {
for (let j = 0; j < GRID_SIZE; j++) {
let x = (j - GRID_SIZE / 2) * STEP;
let z = (i - GRID_SIZE / 2) * STEP;
let h = getHeight(x, z, t);
// P: [x, y, z] relative to origin. Note height is added to the Y coordinate.
let p = [x, h, z];
let proj = project(p);
points.push({ x: proj.x, y: proj.y, depth: proj.depth });
depthMap[`${i},${j}`] = proj;
}
}
// --- Drawing Mesh Edges (The core complexity) ---
ctx.strokeStyle = 'rgba(100, 255, 200, 0.7)';
ctx.lineWidth = 1;
let edgesToDraw = [];
// 1. Collect all adjacent point pairs (edges)
for (let i = 0; i < GRID_SIZE; i++) {
for (let j = 0; j < GRID_SIZE; j++) {
// Edge to the right (+X direction)
if (j + 1 < GRID_SIZE) {
edgesToDraw.push({ p1: depthMap[`${i},${j}`], p2: depthMap[`${i},${j+1}`] });
}
// Edge in front (+Z direction)
if (i + 1 < GRID_SIZE) {
edgesToDraw.push({ p1: depthMap[`${i},${j}`], p2: depthMap[`${i+1},${j}`] });
}
}
}
// 2. Sorting Edges by Depth (Painter's Algorithm approximation)
// We sort edges based on the average depth of their endpoints.
edgesToDraw.sort((a, b) => {
const avgDepthA = (a.p1.depth + a.p2.depth) / 2;
const avgDepthB = (b.p1.depth + b.p2.depth) / 2;
return Math.abs(avgDepthB - avgDepthA); // Draw farthest first (largest difference means more depth variation, but sorting by magnitude of distance from viewer is key). Simple sort on the average Z component works well enough for visualization.
});
// 3. Draw Sorted Edges
edgesToDraw.forEach(edge => {
ctx.beginPath();
ctx.moveTo(edge.p1.x, edge.p1.y);
ctx.lineTo(edge.p2.x, edge.p2.y);
ctx.stroke();
});
// --- Display Info ---
ctx.fillStyle = '#aaa';
ctx.font = '14px Courier New';
ctx.fillText(`Grid: ${GRID_SIZE}x${GRID_SIZE}`, 10, 20);
ctx.fillText(`Angle X (Pitch): ${(angleX * 180 / Math.PI).toFixed(1)}°`, 10, 40);
ctx.fillText(`Angle Y (Yaw): ${(angleY * 180 / Math.PI).toFixed(1)}°`, 10, 60);
}
// Animation Loop
function animate(timestamp) {
const deltaTime = timestamp - lastTime;
lastTime = timestamp;
time += deltaTime * 0.005; // Smooth passage of time for height change
angleX = Math.sin(time * 0.1) * (Math.PI / 3);
angleY = Math.cos(time * 0.08) * (Math.PI / 2);
draw(time);
requestAnimationFrame(animate);
}
setup();
requestAnimationFrame(animate);
</script></body></html>
```Show code
```html
<!DOCTYPE html>
<html><body style="background:#000;margin:0;display:flex;justify-content:center;align-items:center;height:100vh">
<canvas id=c width=800 height=600></canvas>
<div id=s>Size: 50x40</div>
<div id=a>Angle: 0°</div>
<script>
let c=document.getElementById('c'),ctx=c.getContext('2d');
const w=c.width,h=c.height,g=50,j=40,f=600,t=0,ro=0;
let dx=new Array(g),dy=new Array(j);
function init(){for(let i=0;i<g;i++)dx[i]=(i/g-0.5)*w*2;
for(let j=0;j<40;j++) dy[j]=(j/39-1)*h*f/(j.length*.5);}
function project(x,y,z){
let xp=x/f + z/(f*y) * x, yp=y/f + z/(f*y)*y;
return{xp:xp*0.5*w+0.5*w,yp:yp*0.5*h+0.5*h};}
function smooth(points){
for(let i=1;i<points.length-1;i++)
points[i]= (points[i-1]+points[i+1])/2;
return points;}
let render=()=>{
ctx.fillStyle='#111';ctx.fillRect(0,0,w,h);
let data=[[...Array(g)].map((_,i)=>Math.sin(i/g*t*4 +ro) *
Math.cos(j.map((_,j)=>Math.sin(j/39*t*3 +ro)))*2+2)],
[...Array(g)].map(_=>[...Array(40)] )];
let grid=[],lines=[[[]], [[]]];
for(let i=0;i<g;i++)for(let j=0;j<40;j++){
data[i][j]=Math.sin(i/g*t*3-ro/2) * Math.cos(j/39*t*5 +ro)*
(Math.sin(ro)+2)/3;
let x=i, y=j/40*w*.1, z=data[i][j];
grid.push({x,y,z});
}
for(let i=0;i<g;i++)for(let j=0;j<40;){
lines[0][i].push(project(grid[i*40+j].x/grid.length*2,
grid[i*40+j].y,grid[i*40+j].z));j++}
for(let i=0;i<g;i++)for(let j=1;j<40;){
lines[1][i].push(project(grid[i+g*j].x, grid[i+g*j].y,
grid[i+g*j].z));j++}
let sort=(a,b)=>b.z-a.z;
for(let i=0;i<g;i++)lines[0][i].sort(sort);
for(let j=0;j<40;j++)lines[1][j].sort(sort);
ctx.strokeStyle='#fff';ctx.lineWidth=.5;
for(let i=0;i<g;i++){
lines[1][i].forEach(l=>{if(l.x&&l.y)
ctx.beginPath(), ctx.moveTo(lines[0][i][0]||l.x,lines[0][i][0]||l.y);
lines[0][i].find(m=>m.x).x==undefined?
(ctx.lineTo(l.x,l.y),ctx.stroke()):(null);});
lines[0][i].forEach((p,k)=>{k<lines[0][i].length-1&&
ctx.beginPath(),ctx.moveTo(p.x,p.y),
ctx.lineTo(lines[0][i][k+1].x,lines[0][i][k+1].y),
ctx.stroke();})}
for(let j=0;j<40;j++){
lines[1][j].forEach((p,k)=>{k<lines[1][j].length-1&&
ctx.beginPath(),ctx.moveTo(p.x,p.y),
ctx.lineTo(lines[1][j][k+1].x,lines[1][j][k+1].y),
ctx.stroke();})}
t+=.03;ro=(ro+1)%360;
document.getElementById('s').textContent=`Size: ${g}x${40}`;
document.getElementById('a').textContent=`Angle: ${~~(ro%360)}°`;
}
init();
smooth(dx);smooth(dy);
function animate(){render();requestAnimationFrame(animate);}
animate();
</script>
</body></html>
```MODEL Hllama3.1:8bDNF
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.
Who wrote what
| Blind label | Model | Blind score | Latency | Status |
|---|---|---|---|---|
| MODEL A | mistral-small:24b | — | — | DNF |
| MODEL B | qwen3:14b | — | 30.5 s | OK |
| MODEL C | qwen3:8b | — | — | harness |
| MODEL D | qwen3-coder:30b | — | 29.6 s | OK |
| MODEL E | gemma4:26b | — | — | harness |
| MODEL F | qwen3.5:9b | — | 50.8 s | OK |
| MODEL G | deepseek-r1:14b | — | 69.1 s | OK |
| MODEL H | llama3.1:8b | — | — | DNF |