Overview › Code › R92
Code · blind round

R92 · Rotating wireframe solids with depth sorting

blind round 7/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.

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 rotates a small cluster of wireframe solids on a <canvas>: define the vertices and edges of a cube and one other polyhedron, rotate them around two axes with rotation matrices, project them in perspective, and draw the edges so that nearer solids are drawn over farther ones by sorting on average depth. Fade distant edges to convey depth. Show the number of edges drawn. 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

Local models (Brain cluster) — identical prompt, shuffled order (the sequence is not a ranking)
llama3.1:8bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html>
<head>
<title>Rotating Solids</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c" width="600" height="400"></canvas>

<script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');

// Cube
function cubeVertices() {
return [[-1, -1], [1, -1], [1, 1], [-1, 1],
[-0.5, -0.5], [0.5, -0.5], [0.5, 0.5], [-0.5, 0.5]];
}

// Cube edges
function cubeEdges() {
return [[0, 1], [1, 2], [2, 3], [3, 0],
[4, 5], [5, 6], [6, 7], [7, 4],
[0, 4], [1, 5], [2, 6], [3, 7]];
}

// Cube faces
function cubeFaces() {
return [[0, 1, 2, 3], [4, 5, 6, 7],
[0, 1, 5, 4], [1, 2, 6, 5],
[2, 3, 7, 6], [3, 0, 4, 7]];
}

// Tetrahedron
function tetVertices() {
return [[-1.5, -1.5, -1.5], [-1.5, 1.5, -1.5],
[1.5, 1.5, -1.5], [0, 0, 4]];
}

// Tetrahedron edges
function tetEdges() {
return [[0, 1], [1, 2], [2, 3], [3, 0]];
}

let cube = cubeVertices();
let cubeE = cubeEdges();
let tet = tetVertices();

const rotateX = (angle) => {
let x = ctx.width / 2;
let y = ctx.height / 2;
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
};
const rotateY = (angle) => {
let x = ctx.width / 2;
let y = ctx.height / 2;
ctx.save();
ctx.translate(x, y);
ctx.rotate(-angle * Math.PI / 180);
};

function project(v) {
const f = 1;
const a = v[0] + f;
const b = v[1] + f;
return [a / (b - f), ctx.height - b / (b - f)];
}

let angle_x = 45, angle_y = 30;

function draw() {
ctx.clearRect(0, 0, ctx.width, ctx.height);
rotateX(angle_x);
rotateY(angle_y);
ctx.beginPath();

// Cube
for (const face of cubeFaces()) {
if (face[2] === 4) continue;
const v1 = project(cube[face[0]]);
const v2 = project(cube[face[1]]);
const v3 = project(cube[face[2]]);

if (v1[1] > ctx.height * 0.8) {
ctx.strokeStyle = `rgba(255, 255, 255, 0.5)`;
} else {
ctx.strokeStyle = 'black';
}

ctx.moveTo(v1[0], v1[1]);
for (let i = 2; i < face.length; ++i) {
const v = project(cube[face[i]]);
ctx.lineTo(v[0], v[1]);
}
ctx.stroke();
}

// Tetrahedron
for (const edge of tetEdges()) {
const v1 = project(tet[edge[0]]);
const v2 = project(tet[edge[1]]);

if (v1[1] > ctx.height * 0.8) {
ctx.strokeStyle = `rgba(255, 255, 255, 0.5)`;
} else {
ctx.strokeStyle = 'black';
}

ctx.moveTo(v1[0], v1[1]);
ctx.lineTo(v2[0], v2[1]);
ctx.stroke();
}

const edgesDrawn = cubeE.length + tetEdges().length;
document.getElementById('edges').textContent = `Edges drawn: ${edgesDrawn}`;
requestAnimationFrame(draw);
};

draw();

// Initial random rotation
angle_x += 10;
angle_y += 20;

</script>

<div id="edges"></div>
</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.
mistral-small:24bDNF
No usable answer reached the harness (ERR). Counted as a did-not-finish.
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.
qwen3.5:9bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><head><style>body{margin:0;overflow:hidden}canvas{display:block}</style></head><body id="b"><canvas id="c" width="800" height="600"></canvas><script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let angleX = 0;
let angleY = 0;

// Define vertices and edges for the Cube (A) and Octahedron (B)
// Vertices are relative to a center point.
const V_A = [[-1, -1, -1], [1, -1, -1], [1, 1, -1], [-1, 1, -1], [-1, -1, 1], [1, -1, 1], [1, 1, 1], [-1, 1, 1]];
const E_A = [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [1, 5], [2, 6], [3, 7]];

const V_B = [[0, 1, 0], [-1, 0, 1], [0, -1, 0], [1, 0, -1], [0, 1, 0]];
// Note: For the octahedron, we'll reuse some points and define connectivity based on a simple structure.
const V_B_full = [[0, 1, 0], [-1, 0, 1], [0, -1, 0], [1, 0, -1], [0, 1, 0]]; // Adjusted for simplicity/stability (Using a pyramid or similar structure might be safer)
// Let's stick to the Cube and define a simple second shape: A Tetrahedron centered at origin.
const V_T = [[ 1,  1,  1], [-1, -1,  1], [ 1, -1, -1], [-1, 1, -1]]; // Vertices of the tetrahedron

// Edges for the Tetrahedron (A simple non-coplanar shape)
const E_T = [[0, 1], [0, 2], [0, 3], [1, 2], [1, 3], [2, 3]];

// Combine all data structures
const Shapes = [{ V: V_A, E: E_A }];
Shapes.push({ V: V_T, E: E_T });


function rotate(v, angleX, angleY) {
    let x = v[0], y = v[1], z = v[2];
    let cosX = Math.cos(angleX), sinX = Math.sin(angleX);
    let cosY = Math.cos(angleY), sinY = Math.sin(angleY);

    // Rotation around X axis
    let y_temp = y * (Math.cosX) - z * (Math.sinX);
    z = y * (Math.sinX) + z * (Math.cosX);
    y = y_temp;

    // Rotation around Y axis
    let x_temp = x * Math.cosY + z * Math.sinY;
    z = -x * Math.sinY + z * Math.cosY;
    x = x_temp;

    return [x, y, z];
}

function project(v) {
    // Simple perspective projection assuming camera distance D=5 units (or adjust based on scale)
    const d = 6; 
    let [x, y, z] = v;
    if (z + d < 0.1) return null; // Avoid division by near zero/negative Z
    let pX = x * d / (d + z);
    let pY = y * d / (d + z);
    return { [Symbol.iterator]: function() { return [pX, pY, d + z]; } }; // Return iterable for easy destructuring
}

function drawScene(shapes) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let allEdges = [];

    for (const shape of shapes) {
        let vertices3D = [];
        for (const v of shape.V) {
            vertices3D.push(rotate(v, angleX, angleY));
        }

        // 1. Calculate projected points and depth for all edges
        let projectedEdgesData = [];
        for (const [i, j] of shape.E) {
            let v1_r = vertices3D[i];
            let v2_r = vertices3D[j];

            // Projecting both endpoints to get 2D position and depth for the edge center
            let p1 = project(v1_r);
            let p2 = project(v2_r);

            if (!p1 || !p2) continue;

            // Calculate average projected coordinates and approximate depth (midpoint of Z)
            let [x1, y1, z1] = [...p1];
            let [x2, y2, z2] = [...p2];
            
            let x_avg = (x1 + x2) / 2;
            let y_avg = (y1 + y2) / 2;
            let z_avg = ((z1 + z2)/2);

            // Store edge data: [depth, start_point, end_point]
            projectedEdgesData.push({ depth: z_avg, p1: {x: x1, y: y1}, p2: {x: x2, y: y2} });
        }

        // 2. Sort edges by depth (farthest first, so near ones are processed last and drawn over)
        projectedEdgesData.sort((a, b) => a.depth - b.depth);

        allEdges.push(...projectedEdgesData);
    }

    let edgeCount = 0;
    // Draw edges (Depth sorted: Nearer objects overwrite farther ones)
    for (const edge of allEdges) {
        edgeCount++;
        
        // Calculate fade factor based on depth (closer to camera/larger Z means less fade)
        // Assuming z_max is roughly 10 units away, and we want edges close (z=15+) to be fully visible.
        let [_, __, depth] = edge;
        let scaleFactor = Math.min(1, Math.max(0.2, depth / 15));
        let alpha = scaleFactor * 0.8 + 0.2; // Ensure minimum visibility

        ctx.strokeStyle = `rgba(200, 200, 255, ${alpha})`;
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(edge.p1.x, edge.p1.y);
        ctx.lineTo(edge.p2.x, edge.p2.y);
        ctx.stroke();
    }

    // Display edge count
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.font = "14px monospace";
    ctx.fillText(`Edges Drawn: ${edgeCount}`, 10, 30);

    // Update angles for next frame
    angleX += 0.01;
    angleY += 0.015;
}


function animate() {
    drawScene(Shapes);
    requestAnimationFrame(animate);
}

animate();
</script></body></html>
```
deepseek-r1:14bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><body style="background:black;margin:0;display:flex;justify-content:center;align-items:center;height:100vh">
<canvas id=c></canvas>
<script>
const canvas=document.getElementById('c');
const ctx=canvas.getContext('2d');
let w=h=Math.min(window.innerWidth,window.innerHeight);
canvas.width=w;canvas.height=h;
let cubes=[],tetras=[];
function Vertex(x,y,z){return [x,y,z]}
let cubeVertices=[new Vertex(-1,-1,-1),new Vertex(1,-1,-1),new Vertex(1,1,-1),new Vertex(-1,1,-1),new Vertex(-1,-1,1),new Vertex(1,-1,1),new Vertex(1,1,1),new Vertex(-1,1,1)];
let cubeEdges=[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]];
let tetraVertices=[new Vertex(-1,-1,-1),new Vertex(1,1,-1),new Vertex(1,-1,1),new Vertex(-1,1,1)];
let tetraEdges=[[0,1],[1,2],[2,3],[3,0],[0,2],[1,3]];
function mat(x,y,z,a,b,c,d,e,f){return function(v,w){let u=[v[0],v[1],v[2]];u=x*u[0]+a*u[1]+d*u[2];let t=y*u[0]+b*u[1]+e*u[2];let s=z*u[0]+c*u[1]+f*u[2];return [s,t,Math.abs(u[2])/(u[2]<0?1:-1)]};}
let rX=rY=f=0;function rotate(){rX+=.02;rY+=.03;let cX=Math.cos(rX),sX=Math.sin(rX);let cY=Math.cos(rY),sY=Math.sin(rY);let RX=[[1,0,0],[0,cX,-sX],[0,sX,cX]];let RY=[[cY,0,sY],[0,1,0],[-sY,0,cY]];for(let o of cubes.concat(tetras)){o.points=o.points.map(p=>{let res=RX[0][0]*p[0]+RX[0][1]*p[1]+RX[0][2]*p[2];res+=RX[1][0]*p[0]+RX[1][1]*p[1]+RX[1][2]*p[2];res+=RX[2][0]*p[0]+RX[2][1]*p[1]+RX[2][2]*p[2];return res;});}}
let center=[0,0,1];function project(p){return [w/2 + (p[0]-center[0])/(p[2]-center[2])*h/3,(h/2 + (p[1]-center[1])/(p[2]-center[2]))*(-h/4),Math.abs(p[2])];}
function render(){let edges=[];cubes.forEach(c=>{c.edges=cubeEdges.map(e=>[c.points[e[0]],c.points[e[1]]]);edges.push(...c.edges)});tetras.forEach(t=>{t.edges=tetraEdges.map(e=>[t.points[e[0]],t.points[e[1]]]);edges.push(...t.edges)});edges.sort((a,b)=>{let dA=(a[0][2]+a[1][2])/2;let dB=(b[0][2]+b[1][2])/2;return dB-dA;});ctx.fillStyle='black';ctx.fillRect(0,0,w,h);edges.forEach(([p1,p2],i)=>{if(i>50)cubes.length=tetras.length=0;let x1=project(p1)[0];let y1=project(p1)[1];let x2=project(p2)[0];let y2=project(p2)[1];let depth=(project(p1)[2]+project(p2][2])/2;let factor=Math.exp(-depth/4);ctx.strokeStyle=`rgba(255,255,255,${factor})`;ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();}).length++;requestAnimationFrame(render);}}
rotate();render();
</script>
</body></html>
```
qwen3-coder:30bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><head><title>Wireframe Animation</title></head><body style="margin:0;background:#111;"><canvas id="c"></canvas><script>
const c=document.getElementById('c');
const ctx=c.getContext('2d');
c.width=600;c.height=400;

let angleA = Math.random() * 2 * Math.PI;
let angleB = Math.random() * 2 * Math.PI;

// Polyhedron definitions: [Vertices, Edges]
const solids=[
    // Cube vertices (8)
    {V:[[-1,-1,-1],[1,-1,-1],[1,1,-1],[-1,1,-1],[-1,-1,1],[1,-1,1],[1,1,1],[-1,1,1]], E:[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]]},
    // Octahedron vertices (6)
    {V:[[-1,-1,0],[1,-1,0],[-1,1,0],[1,1,0],[0,-1,1],[0,1,1]], E:[[0,1],[0,2],[1,3],[2,3],[4,0],[4,1],[5,0],[5,2],[5,3]]}
];

// Math Helper Functions (Vector and Transformation)
function rot(x,y,z,a,b) {
    const ca=Math.cos(a),sa=Math.sin(a);
    const cb=Math.cos(b),sb=Math.sin(b);
    let x2=x,y2=y,z2=z;
    let nx = x2*ca - y2*sa;
    let ny = x2*sa + y2*ca;
    let nz = z2;

    let nnx = nx*cb - ny*sb;
    let nny = nx*sb + ny*cb;
    let nnz = nz;

    return [nnx, nny, nnz];
}

function project(p) {
    const L=150; // Focal length/scaling factor
    const px = p[0] * (L / (L + p[2]));
    const py = p[1] * (L / (L + p[2]));
    return [px, py];
}

function draw(solid) {
    let vertices=solid.V;
    let edges=solid.E;
    let projectedPoints=[];
    let depthSum=0;
    const N=vertices.length;

    // 1. Transform and Project all vertices
    for(let i=0; i<N; ++i) {
        [let x,y,z]=[vertices[i]...];
        [x,y,z]=[...rot(x,y,z,angleA,angleB)];
        projectedPoints.push(project([x,y,z]));
        depthSum+=Math.max(0.1, z); // Use Z for depth calculation
    }

    // 2. Sort solids by average depth (Z)
    let avgDepth=depthSum / N;
    return {points: projectedPoints, edges: edges, depth: avgDepth};
}

function drawScene(transformedSolids){
    ctx.clearRect(0,0,600,400);
    ctx.fillStyle='#111';
    ctx.fillRect(0,0,600,400);
    ctx.strokeStyle='rgba(255,255,255,0.8)';

    // Sort by depth (front-to-back: highest depth value first)
    transformedSolids.sort((a,b)=>b.depth-a.depth);

    let edgesDrawn=0;

    for(const s of transformedSolids){
        const p=s.points;
        ctx.beginPath();
        for(const [v1_idx, v2_idx] of s.edges) {
            const p1=[p[v1_idx]*0.9+300, p[v1_idx]*0.9]; // Scale and center translation
            const p2=[p[v2_idx]*0.9+300, p[v2_idx]*0.9];

            // Fade effect based on depth (z component)
            let z1=s.points[v1_idx][2]||0;
            let z2=s.points[v2_idx][2]||0;
            let avgZ=(Math.max(0.1,z1+z2)/2);
            let alpha = Math.min(1, 0.5 + (avgZ / 300)); // Simple depth visualization

            ctx.strokeStyle=`rgba(100,150,255,${alpha})`;
            ctx.lineWidth=1;
            ctx.moveTo(p1[0], p1[1]);
            ctx.lineTo(p2[0], p2[1]);
        }
        // Note: Since we are iterating over edges and using moveTo/lineTo for each, 
        // the explicit strokeRect is not needed, but we must draw it now.
        ctx.stroke(); 
        edgesDrawn+=s.edges.length;
    }

    document.getElementById('edgeCount').textContent=`Edges Drawn: ${edgesDrawn}`;
}

function animate() {
    angleA += 0.015;
    angleB += 0.02;

    const results=[];
    for(let i=0; i<solids.length; ++i) {
        results.push(draw(solids[i]));
    }
    
    drawScene(results);
    requestAnimationFrame(animate);
}

// Setup initial display for edge count
const body = document.body;
let countDiv=document.createElement('div');
countDiv.id='edgeCount';
countDiv.style.cssText='position:absolute;bottom:10px;left:50%;transform:translateX(-50%);color:#999;font-family:monospace;font-size:12px;';
body.appendChild(countDiv);

// Start animation loop
requestAnimationFrame(animate);
</script></body></html>
```
qwen3:14bERRBLANKMINIFIEDFORMAT
Show code
```html
<!DOCTYPE html><html><canvas id="c"></canvas><script>const c=document.getElementById('c');const ctx=c.getContext('2d');c.width=600;c.height=400;let a={v:[[1,1,1],[1,-1,1],[-1,-1,1],[-1,1,1],[1,1,-1],[1,-1,-1],[-1,-1,-1],[-1,1,-1]],e:[[0,1],[0,3],[0,4],[1,2],[1,5],[2,6],[2,3],[3,7],[4,7],[5,7],[0,7],[6,7]],name:"Cube"};let b={v:[[1.5,0,0],[0,1.5,0],[0,0,1.5],[-1.5,0,0],[0,-1.5,0],[0,0,-1.5]],e:[[0,1],[1,2],[2,0],[3,4],[4,3],[2,3]]};let s={a:a,b:b,thetaX:Math.random()*Math.PI*2,thetaY:Math.random()*Math.PI*2};function p(p,q,r){return Math.sqrt(p*p+q*q+r*r)}function r(v,t,s){let x=v[0],y=v[1],z=v[2];let nx=x*Math.cos(t)+y*Math.sin(t)*z;let ny=x*Math.sin(t)-y*Math.cos(t)*z;let nz=z;return [nx,ny,nz]}function t(v,t,s){let x=v[0],y=v[1],z=v[2];let nx=x*Math.cos(s)+z*Math.sin(s);let ny=y;let nz=-x*Math.sin(s)+z*Math.cos(s);return [nx,ny,nz]}function transform(solid){for(let i=0;i<solid.v.length;i++){let v=[...solid.v[i]];if(solid===a)v=r(v,s.thetaX,s.thetaY);else v=t(v,s.thetaX,s.thetaY);}return v}function project(v){const scale=150/(Math.max(1, Math.abs(v[2]))+1);let x=(v[0]*scale)/(v[2]+100),y=(v[1]*scale)/(v[2]+100);return [x,y];}function drawEdges(solid){const v=transform(solid).map(project);ctx.beginPath();for(let i=0;i<solid.e.length;i){const p1=v[solid.e[i][0]];const p2=v[solid.e[i][1]];const d=Math.max(Math.abs(p1[2]-p2[2]),Math.abs(p1[0]-p2[0]),Math.abs(p1[1]-p2[1]))/600*2+0.2;ctx.strokeStyle=`rgba(255,255,${Math.floor(255*(1-d))}),${Math.floor(255*(1-d))},${Math.floor(255*(1-d)))}`+(1-d)*1.2)`;ctx.lineWidth=0.8*d+0.5;ctx.moveTo(p1[0],p1[1]);ctx.lineTo(p2[0],p2[1]);ctx.stroke();}function render(){ctx.clearRect(0,0,600,400);let solids=[s.a,s.b];solids.sort((o,n)=>{const avgD=(v,e)=>{let s=0;for(let i=0;i<e.length;i++){const v1'=transform({v:[...v[e[i][0]]],e:[]});const v2'=transform({v:[...v[e[i][1]]],e:[]});s+=Math.min(v1'[2],v2'[2]);return s/e.length;};return avgD(o,solids.a.e)-avgD(n,solids.b.e)});for(let i=0;i<solids.length;i++){drawEdges(solids[i]);}function animate(){s.thetaX+=0.01;s.thetaY+=0.008;requestAnimationFrame(animate);}animate();</script></html>
```
deepseek-r1:32bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html><html><title>Wireframe Rotation</title><style>
canvas{border:1px solid #333;background:#1a1a1a;display:block;margin:20px auto}body{background:#111;color:#fff;font-family:sans-serif}</style><canvas id=c width=640 height=480></canvas><script>
const canvas=document.getElementById('c'),ctx=canvas.getContext('2d')
let cubes=[],octa=[],edges=[],rotX=0,rotY=0,frame=0
function createCube(x,y,z){
return[
{x:x+1,y:y+1,z:z+1},
{x:x-1,y:y+1,z:z+1},
{x:x-1,y:y-1,z:z+1},
{x:x+1,y:y-1,z:z+1},
{x:x+1,y:y+1,z:z-1},
{x:x-1,y:y+1,z:z-1},
{x:x-1,y:y-1,z:z-1},
{x:x+1,y:y-1,z:z-1}
]}
function createOcta(x,y,z){
return[
{x:x,y:y+√2/2,z:z}, {x:x,y:y-√2/2,z:z},
{x:x+√2/2,y:y,z:z}, {x:x-√2/2,y:y,z:z},
{x:x,y:y,z:+√2/2},  {x:x,y:y,z:-√2/2},
{x:x+1,y:y+1,z:+1}, {x:x+1,y:y-1,z:+1},
{x:x-1,y:y+1,z:+1}, {x:x-1,y:y-1,z:+1}
]}
function rotateX(p,angle){
let c=Math.cos(angle),s=Math.sin(angle)
return{x:p.x,y:p.y*c-p.z*s,z:p.y*s+p.z*c}}
function rotateY(p,angle){
let c=Math.cos(angle),s=Math.sin(angle)
return{x:p.x*c+p.z*s,y:p.y,z:-p.x*s+p.z*c}}
function project(p,focalLength=500,size=120){
let scale=focalLength/(focalLength-p.z)
return{x:canvas.width/2+scale*p.x*size,
y:canvas.height/2+scale*p.y*size}}
function createEdges(vertices,indices=[]){
edges=[]
for(let i=0;i<vertices.length;i++){
if(indices[i]) indices[i].forEach(j=>{
edges.push({v1:i,v2:j,z:(vertices[i].z+vertices[j].z)/2})
}) else edges.push({v1:i,v2:(i+1)%4,z:(vertices[i].z+vertices[(i+1)%4].z)/2})}
}
function drawEdge(p1,p2,alpha=1){
ctx.beginPath()
ctx.strokeStyle='rgba(255,255,255,'+alpha+')'
ctx.lineWidth=0.5
ctx.moveTo(p1.x,p1.y)
ctx.lineTo(p2.x,p2.y)
ctx.stroke()}
function reset(){
cubes=[createCube(0,0,0)]
octa=createOcta(-3,0,0)
let allVertices=cubes[0].concat(octa)
edges=[]
const cubeEdges=[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]]
createEdges(cubes[0],cubeEdges)
createEdges(octa)
}
reset()
function animate(){
frame++
rotX=Math.sin(frame/80)*Math.PI/4
rotY=Math.cos(frame/80)*Math.PI/4
const solids=[cubes[0],octa]
ctx.fillStyle='#1a1a1a99'
ctx.fillRect(0,0,canvas.width,canvas.height)
let edgesToDraw=[]
solids.forEach(s=>{
s.forEach(p=>rotateX(rotateY(p,rotY),rotX))
})
edges.forEach(e=>{
const p1=solids[e.v1].x,solids[e.v2].y
const p2=project(solids[e.v2])
edgesToDraw.push({...e,p1,p2,alpha:Math.min(1,0.5*(focalLength/(focalLength-e.z)))})
})
edgesToDraw.sort((a,b)=>b.alpha-a.alpha)
let edgeCount=0
edgesToDraw.forEach(e=>{
if(Math.abs(e.p1.x-e.p2.x)+Math.abs(e.p1.y-e.p2.y)<1) return
drawEdge(e.p1,e.p2,e.alpha)
edgeCount++
})
document.title='Edges drawn: '+edgeCount
frame%1000===0&&reset()
requestAnimationFrame(animate)}
animate()</script></html>
```
command-r:35bSTAT
Show code
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>

  <body>

    <canvas id="myCanvas" width="500" height="500"></canvas>

    <script type="application/javascript">

      // Cube and another polyhedron vertices & edges
      const cubeVerts = [
        [ 1, 1, 1 ], [-1, 1, 1 ], [-1,-1, 1 ], [ 1,-1, 1 ], 
        [ 1, 1,-1 ], [-1, 1,-1 ], [-1,-1,-1 ], [ 1,-1,-1 ]
      ];

      const cubeEdges = [
        [0,1], [1,2], [2,3], [3,0], // bottom face
        [4,5], [5,6], [6,7], [7,4], // top face
        [0,4], [1,5], [2,6], [3,7]  // connecting faces
      ];

      const octaVerts = [ 
        [ 1,-1, 0 ], [-1,-1, 0 ], [-1, 1, 0 ], [ 1, 1, 0 ],
        [ 0, 0, 1 ], [ 0,-1, 1 ]
      ];

      const octaEdges = [ 
        [0,4],[0,3],[1,4],[1,2],[2,3],[3,5],[2,5] // faces of the octahedron
      ];


      // Perspective projection matrix with fov=90 degrees and aspect ratio = 1 (square)
      const perspectiveMatrix = new Float64Array([
        1,  0,  0, 0,
        0,  1,  0, 0,
        0,  0, 1.5, -0.8/2,
        0,  0,  1,  0    
      ]);

      // Angle of rotation around x and y axes in radians 
      let angleX = Math.PI / 4;
      let angleY = Math.PI / 6; 

      const xRotationMatrix = new Float64Array([
        1,  0,      0,     0,
        0,  Math.cos(angleX), -Math.sin(angleX),   0,
        0,  Math.sin(angleX),  Math.cos(angleX),   0, 
        0,  0,           0,       1
      ]);

      const yRotationMatrix = new Float64Array([
        Math.cos(angleY),    0, -Math.sin(angleY), 0,
            0,               1,                0, 0,
        Math.sin(angleY),    0,  Math.cos(angleY), 0,
        0,                   0,                 0, 1
      ]);

      // Function to project a vertex onto the canvas
      function projectVertex(vertex) {
        const proj = new Float64Array([
          perspectiveMatrix[0] * xRotationMatrix[4] * yRotationMatrix[0] * vertex[0] + 
          perspectiveMatrix[0] * xRotationMatrix[8] * yRotationMatrix[1] * vertex[1] + 
          perspectiveMatrix[0] * xRotationMatrix[12] * yRotationMatrix[2] * vertex[2],
          perspectiveMatrix[5] * xRotationMatrix[4] * yRotationMatrix[0] * vertex[0] + 
          perspectiveMatrix[5] * xRotationMatrix[8] * yRotationMatrix[1] * vertex[1] + 
          perspectiveMatrix[5] * xRotationMatrix[12] * yRotationMatrix[2] * vertex[2],
          perspectiveMatrix[10] * xRotationMatrix[4] * yRotationMatrix[0] * vertex[0] + 
          perspectiveMatrix[10] * xRotationMatrix[8] * yRotationMatrix[1] * vertex[1] + 
          perspectiveMatrix[10] * xRotationMatrix[12] * yRotationMatrix[2] * vertex[2],
          perspectiveMatrix[14] * xRotationMatrix[4] * yRotationMatrix[0] * vertex[0] + 
          perspectiveMatrix[14] * xRotationMatrix[8] * yRotationMatrix[1] * vertex[1] + 
          perspectiveMatrix[14] * xRotationMatrix[12] * yRotationMatrix[2] * vertex[2]
        ]);

        const w = proj[3];
        return [(proj[0]/w) + 1, (proj[1]/w) + 1, proj[2]/w];
      }


      // Function to draw edges on the canvas with depth-based fading
      function drawEdges(edges, vertices, ctx) {
        const n = edges.length;
        let edgeCount = 0;

        for (let i=0;i<n;i++) {
          const [a, b] = edges[i];
          const v1 = projectVertex(vertices[a]);
          const v2 = projectVertex(vertices[b]);

          if (v1[2] > -1 && v2[2] > -1) { // both vertices are in front of the camera
            ctx.beginPath();
            ctx.moveTo(v1[0], v1[1]);
            ctx.lineTo(v2[0], v2[1]);

            const avgDepth = (v1[2]+v2[2]) / 2; // average depth for fading intensity
            const fadeIntensity = Math.max(-avgDepth,0); 

            ctx.strokeStyle = `rgba(0,0,0,${fadeIntensity})`; 
            ctx.lineWidth = 1 + (3 * avgDepth); // wider lines are closer
            ctx.stroke();

            edgeCount += 1;
          }
        }

        return edgeCount;
      }


      const canvas = document.getElementById("myCanvas"); 
      const ctx = canvas.getContext("2d");

      let lastTime = 0;

      function animate(time) {
        const dt = time - lastTime; // delta t to control animation speed

        angleX += Math.PI / 4 * (dt/16); 
        angleY += Math.PI / 3 * (dt/24);
        
        if (angleX >= 2*Math.PI) angleX -= 2*Math.PI;
        if (angleY >= 2*Math.PI) angleY -= 2*Math.PI;

        xRotationMatrix[5] = Math.cos(angleX); 
        xRotationMatrix[6] = -Math.sin(angleX);  
        xRotationMatrix[9] = Math.sin(angleX);
        xRotationMatrix[10]= Math.cos(angleX);

        yRotationMatrix[0] = Math.cos(angleY); 
        yRotationMatrix[4] =  1;                 
        yRotationMatrix[8] = -Math.sin(angleY);  
        yRotationMatrix[12]=  Math.cos(angleY);   

        const cubeCount = drawEdges(cubeEdges, cubeVerts, ctx);
        const octaCount = drawEdges(octaEdges, octaVerts, ctx);
        
        ctx.fillStyle = 'rgba(0,0,0,.5)'; 
        ctx.font="16px Arial";
        ctx.fillText(`Cube: ${cubeCount}  Octa: ${octaCount}`,24,24);

        requestAnimationFrame(animate);
      }

      animate();

    </script>

  </body>
</html>
qwq:32bDNF
No usable answer reached the harness (ERR). Counted as a did-not-finish.
Outside the Brain cluster — same task, same character budget, collected through their own tooling (response times not comparable)
Claude Opus 5frontier referenceOK
Show code
<!doctype html>
<html><head><meta charset="utf-8"><title>Wireframe solids, depth sorted</title>
<style>
html,body{margin:0;height:100%;background:#060810;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#bcd8ff;
background:rgba(6,8,16,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">edges 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,cx,cy;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2}
fit();addEventListener('resize',fit);

function cube(s){
  const v=[];
  for(let i=0;i<8;i++)v.push([(i&1?s:-s),(i&2?s:-s),(i&4?s:-s)]);
  const e=[];
  for(let i=0;i<8;i++)for(let j=i+1;j<8;j++){
    let d=0;for(let b=0;b<3;b++)if(((i>>b)&1)!==((j>>b)&1))d++;
    if(d===1)e.push([i,j]);
  }
  return {v,e};
}
function octa(s){
  const v=[[s,0,0],[-s,0,0],[0,s,0],[0,-s,0],[0,0,s],[0,0,-s]];
  const e=[];
  for(const a of [0,1])for(const b of [2,3])for(const c of [4,5]){
    e.push([a,b],[b,c],[c,a]);
  }
  return {v,e};
}

const solids=[
  {geo:cube(60), pos:[-150,-40,0], sp:[.7,.9]},
  {geo:octa(85), pos:[160,30,120], sp:[-.9,.6]},
  {geo:cube(42), pos:[40,140,-140], sp:[1.3,-.5]},
];

const F=520,CAMZ=560;
function rot(p,ax,ay){
  let [x,y,z]=p;
  let ca=Math.cos(ax),sa=Math.sin(ax);
  let y2=y*ca-z*sa, z2=y*sa+z*ca;
  let cb=Math.cos(ay),sb=Math.sin(ay);
  let x2=x*cb+z2*sb, z3=-x*sb+z2*cb;
  return [x2,y2,z3];
}

let t0=0;
function frame(t){
  if(!t0)t0=t;
  const el=(t-t0)/1000;
  g.fillStyle='#060810';g.fillRect(0,0,W,H);

  const drawn=[];
  for(const s of solids){
    const pts=s.geo.v.map(p=>{
      const r=rot(p,el*s.sp[0],el*s.sp[1]);
      return [r[0]+s.pos[0],r[1]+s.pos[1],r[2]+s.pos[2]+CAMZ];
    });
    let avg=0;for(const p of pts)avg+=p[2];avg/=pts.length;
    drawn.push({pts,edges:s.geo.e,avg});
  }
  drawn.sort((a,b)=>b.avg-a.avg);

  let count=0;
  for(const s of drawn){
    for(const [i,j] of s.edges){
      const a=s.pts[i],b=s.pts[j];
      if(a[2]<20||b[2]<20)continue;
      const ka=F/a[2],kb=F/b[2];
      const near=1-Math.min(1,Math.max(0,(s.avg-360)/620));
      g.strokeStyle='rgba('+(110+near*140|0)+','+(180+near*70|0)+',255,'+(.18+near*.75)+')';
      g.lineWidth=.6+near*1.7;
      g.beginPath();
      g.moveTo(cx+a[0]*ka,cy+a[1]*ka);
      g.lineTo(cx+b[0]*kb,cy+b[1]*kb);
      g.stroke();
      count++;
    }
  }

  hud.textContent='edges '+count+'  ·  solids '+solids.length+'  ·  depth-sorted';
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script></body></html>
GPT-5.5 (Codex)frontier referenceOKMINIFIED
Show code
<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Wire Solids</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#090b10;color:#d8e6ff;font:14px system-ui}canvas{display:block;width:100%;height:100%}</style></head><body><canvas id=c></canvas><script>
const c=document.getElementById("c"),x=c.getContext("2d"),C=[[-1,-1,-1],[1,-1,-1],[1,1,-1],[-1,1,-1],[-1,-1,1],[1,-1,1],[1,1,1],[-1,1,1]],CE=[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]],T=[[0,1.25,0],[-1,-.7,-1],[1,-.7,-1],[0,-.7,1.15]],TE=[[0,1],[0,2],[0,3],[1,2],[2,3],[3,1]];
let W,H,D,objs=[],start=0,life=18000;
function rs(){let d=devicePixelRatio||1;W=c.width=innerWidth*d;H=c.height=innerHeight*d;x.setTransform(d,0,0,d,0,0);W=innerWidth;H=innerHeight}
onresize=rs;rs();
function rnd(a,b){return a+Math.random()*(b-a)}
function make(t=performance.now()){start=t;objs=[];for(let i=0;i<7;i++){let cube=Math.random()<.55,s=rnd(.45,.9),z=rnd(2.5,7.5);objs.push({v:(cube?C:T).map(p=>[p[0]*s,p[1]*s,p[2]*s]),e:cube?CE:TE,p:[rnd(-2.4,2.4),rnd(-1.4,1.4),z],r:[rnd(0,6.28),rnd(0,6.28)],w:[rnd(.35,.9)*(Math.random()<.5?-1:1),rnd(.3,.8)*(Math.random()<.5?-1:1)],h:rnd(185,220)})}}
function rot(p,a,b){let sx=Math.sin(a),cx=Math.cos(a),sy=Math.sin(b),cy=Math.cos(b),y=p[1]*cx-p[2]*sx,z=p[1]*sx+p[2]*cx,x0=p[0]*cy+z*sy;return[x0,y,-p[0]*sy+z*cy]}
function proj(p){let f=Math.min(W,H)*.78,q=f/(f*.012+p[2]);return[W/2+p[0]*q,H/2+p[1]*q,q]}
function frame(t){if(!start||t-start>life)make(t);x.fillStyle="#090b10";x.fillRect(0,0,W,H);let lines=[],n=0,tt=(t-start)/1000;for(const o of objs){let pts=o.v.map(p=>{let r=rot(p,o.r[0]+tt*o.w[0],o.r[1]+tt*o.w[1]);r[0]+=o.p[0]+Math.sin(tt*.35+o.p[2])*.25;r[1]+=o.p[1]+Math.cos(tt*.28+o.p[0])*.18;r[2]+=o.p[2];return{p:proj(r),z:r[2]}});let oz=pts.reduce((a,b)=>a+b.z,0)/pts.length;for(const e of o.e){let a=pts[e[0]],b=pts[e[1]],z=(a.z+b.z)/2;lines.push({a:a.p,b:b.p,z,oz,h:o.h});n++}}lines.sort((a,b)=>b.oz-a.oz||b.z-a.z);x.lineCap="round";for(const l of lines){let al=Math.max(.12,1-l.z/10);x.strokeStyle=`hsla(${l.h},90%,72%,${al})`;x.lineWidth=Math.max(.6,2.4-l.z*.18);x.beginPath();x.moveTo(l.a[0],l.a[1]);x.lineTo(l.b[0],l.b[1]);x.stroke()}x.fillStyle="#d8e6ff";x.fillText("edges drawn: "+n,16,24);requestAnimationFrame(frame)}
make();requestAnimationFrame(frame);
</script></body></html>
Claude Sonnet 5frontier referenceOK
Show code
<!DOCTYPE html><html><head><meta charset="utf8"><title>Wireframe Solids</title><style>
body{margin:0;background:#05070c;overflow:hidden}canvas{display:block}
#i{position:fixed;top:8px;left:8px;color:#8cf;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
function cube(s){
  const v=[];
  for(const x of [-s,s])for(const y of [-s,s])for(const z of [-s,s]) v.push([x,y,z]);
  const e=[];
  for(let i=0;i<8;i++)for(let j=i+1;j<8;j++){
    let d=0; for(let k=0;k<3;k++) if(v[i][k]!==v[j][k]) d++;
    if(d===1) e.push([i,j]);
  }
  return {v,e};
}
function octa(s){
  const v=[[s,0,0],[-s,0,0],[0,s,0],[0,-s,0],[0,0,s],[0,0,-s]];
  const e=[];
  for(let i=0;i<6;i++)for(let j=i+1;j<6;j++){
    const dx=v[i][0]+v[j][0],dy=v[i][1]+v[j][1],dz=v[i][2]+v[j][2];
    if(!(Math.abs(dx)<1e-6&&Math.abs(dy)<1e-6&&Math.abs(dz)<1e-6)) e.push([i,j]);
  }
  return {v,e};
}
function icosa(s){
  const p=(1+Math.sqrt(5))/2;
  let v=[[-1,p,0],[1,p,0],[-1,-p,0],[1,-p,0],[0,-1,p],[0,1,p],[0,-1,-p],[0,1,-p],[p,0,-1],[p,0,1],[-p,0,-1],[-p,0,1]];
  const norm=Math.sqrt(1+p*p);
  v=v.map(pt=>pt.map(c=>c/norm*s));
  const e=[];
  for(let i=0;i<12;i++)for(let j=i+1;j<12;j++){
    const dx=v[i][0]-v[j][0],dy=v[i][1]-v[j][1],dz=v[i][2]-v[j][2];
    const dist=Math.sqrt(dx*dx+dy*dy+dz*dz);
    if(dist<s*1.06) e.push([i,j]);
  }
  return {v,e};
}
let solids,ax=0,ay=0,edgeCount=0,frame=0;
function init(){
  const shapes=[octa,icosa];
  const pick=shapes[Math.floor(Math.random()*shapes.length)];
  solids=[
    {shape:cube(70),ox:-160,oy:0,oz:0,rx:0,ry:0},
    {shape:pick(75),ox:160,oy:0,oz:0,rx:0,ry:0},
    {shape:cube(45),ox:0,oy:0,oz:0,rx:0,ry:0}
  ];
  ax=Math.random()*6; ay=Math.random()*6;
}
init();
function rot(p,a,b){
  let [x,y,z]=p;
  let y1=y*Math.cos(a)-z*Math.sin(a), z1=y*Math.sin(a)+z*Math.cos(a);
  let x2=x*Math.cos(b)+z1*Math.sin(b), z2=-x*Math.sin(b)+z1*Math.cos(b);
  return [x2,y1,z2];
}
function loop(){
  ctx.fillStyle='#05070c';
  ctx.fillRect(0,0,cv.width,cv.height);
  ax+=0.008; ay+=0.013;
  const cx=cv.width/2, cy=cv.height/2, fov=420, camZ=520;
  edgeCount=0;
  const drawList=[];
  for(const s of solids){
    const pts=s.shape.v.map(p=>{
      let r=rot(p,ax,ay);
      return [r[0]+s.ox, r[1]+s.oy, r[2]+s.oz];
    });
    let sumz=0; for(const p of pts) sumz+=p[2];
    const avgz=sumz/pts.length;
    drawList.push({pts,edges:s.shape.e,avgz});
  }
  drawList.sort((a,b)=>b.avgz-a.avgz);
  for(const d of drawList){
    for(const [i,j] of d.edges){
      const p1=d.pts[i], p2=d.pts[j];
      const z1=p1[2]+camZ, z2=p2[2]+camZ;
      const s1=fov/z1, s2=fov/z2;
      const x1=cx+p1[0]*s1, y1=cy+p1[1]*s1;
      const x2=cx+p2[0]*s2, y2=cy+p2[1]*s2;
      const avgz=(p1[2]+p2[2])/2;
      const depth=Math.max(0,Math.min(1,(avgz+150)/400));
      const alpha=0.25+0.65*(1-depth);
      ctx.strokeStyle='rgba('+Math.floor(120+135*(1-depth))+','+Math.floor(180+60*(1-depth))+',255,'+alpha.toFixed(2)+')';
      ctx.lineWidth=1.4;
      ctx.beginPath();
      ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();
      edgeCount++;
    }
  }
  ctx.fillStyle='#8cf';ctx.font='14px monospace';
  ctx.fillText('edges: '+edgeCount,10,20);
  frame++;
  if(frame>2200) { init(); frame=0; }
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script></body></html>
Claude Haiku 4.5frontier referenceOKMINIFIED
Show code
<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{margin:0;background:#000;overflow:hidden}#c{display:block}#i{position:absolute;top:5px;left:5px;color:#0f0;font-family:monospace;font-size:12px}</style></head><body><canvas id="c"></canvas><div id="i"></div><script>const c=document.getElementById('c'),ctx=c.getContext('2d'),i=document.getElementById('i');c.width=800;c.height=600;const v=[[-1,-1,-1],[1,-1,-1],[1,1,-1],[-1,1,-1],[-1,-1,1],[1,-1,1],[1,1,1],[-1,1,1]];const e=[[0,1],[1,2],[2,3],[3,0],[4,5],[5,6],[6,7],[7,4],[0,4],[1,5],[2,6],[3,7]];const v2=[[0,0,1],[1,0,0],[0,1,0]];const e2=[[0,1],[1,2],[2,0]];function rx(p,a){let c=Math.cos(a),s=Math.sin(a);return[p[0],p[1]*c-p[2]*s,p[1]*s+p[2]*c]}function ry(p,a){let c=Math.cos(a),s=Math.sin(a);return[p[0]*c+p[2]*s,p[1],-p[0]*s+p[2]*c]}function prj(p){return[400+p[0]/p[2]*200,300+p[1]/p[2]*200]}let t=Date.now()/1000;let rx1=rx,ry1=ry;function dr(){ctx.fillStyle='#000';ctx.fillRect(0,0,800,600);let ax=t*0.5,ay=t*0.3;let rv1=v.map(p=>ry(rx(p,ax),ay)).map(p=>[p[0],p[1],p[2]+4]);let rv2=v2.map(p=>[p[0]*2,p[1]*2,p[2]*2]).map(p=>ry(rx(p,ax+1),ay+1)).map(p=>[p[0],p[1],p[2]+6]);let ed=[];for(let [a,b] of e){let d=(rv1[a][2]+rv1[b][2])/2;ed.push({a:a,b:b,d,t:1});}for(let [a,b] of e2){let d=(rv2[a][2]+rv2[b][2])/2;ed.push({a:a,b:b,d,t:2});}ed.sort((x,y)=>x.d-y.d);for(let e of ed){let idx1=e.t===1?rv1:rv2;let a=prj(idx1[e.a]),b=prj(idx1[e.b]);let bf=Math.max(0.3,(8-e.d)/8);ctx.strokeStyle=`rgba(0,255,0,${bf})`;ctx.lineWidth=1;ctx.beginPath();ctx.moveTo(a[0],a[1]);ctx.lineTo(b[0],b[1]);ctx.stroke()}let ec=ed.length;i.textContent=`Edges: ${ec}`}setInterval(dr,50);</script></body></html>
Results at a glance— every model in this round with score, response time and status.

Who wrote what

ModelBlind scoreLatencyStatus
llama3.1:8b —111.9 sOK
qwen3:8b ——harness
mistral-small:24b ——DNF
gemma4:26b ——harness
qwen3.5:9b —42.4 sOK
deepseek-r1:14b —118.3 sOK
qwen3-coder:30b —26.9 sOK
qwen3:14b —18.5 sOK
deepseek-r1:32b —272.4 sOK
command-r:35b —79.0 sOK
qwq:32b ——DNF