OverviewCode › R92
Code · blind round

R92 · Rotating wireframe solids with depth sorting

blind round 3/8 local models answered

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 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 — blind

Local models (Brain cluster) — identical prompt, anonymized order
MODEL Allama3.1:8bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
MODEL Bqwen3:8bDNF
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.
MODEL Dgemma4:26bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
MODEL Eqwen3.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>
```
MODEL Fdeepseek-r1:14bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
MODEL Gqwen3-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>
```
MODEL Hqwen3: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>
```
Reveal the models— compare the answers first, then open. Names, blind scores and latencies are hidden until you do.

Who wrote what

Blind labelModelBlind scoreLatencyStatus
MODEL A llama3.1:8b DNF
MODEL B qwen3:8b harness
MODEL C mistral-small:24b DNF
MODEL D gemma4:26b harness
MODEL E qwen3.5:9b 42.4 sOK
MODEL F deepseek-r1:14b DNF
MODEL G qwen3-coder:30b 26.9 sOK
MODEL H qwen3:14b 18.5 sOK