Overview › Code › R91
Code · blind round

R91 · Starfield tunnel in perspective

blind round 5/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 flies through a starfield on a <canvas>: keep a few hundred stars with x, y, z coordinates, move them towards the viewer, and project them with a perspective divide so they streak outwards from the centre and grow brighter and larger as they approach. Recycle each star to a fresh random position far away once it passes the camera. Show the star count and the current speed. 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 Agemma4:26bDNF
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.
MODEL Cdeepseek-r1:14bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
MODEL Dllama3.1:8bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html>
<head>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background-color: #000;
  }
</style>
</head>
<body>
<canvas id="c" width=800 height=600></canvas>
<script>
var ctx = document.getElementById('c').getContext2D();
ctx.lineWidth = 1.5;

var stars = [], starcount = 0, speed = 100, viewdist = 300;
function randompos() {
  return {x: Math.random()*800*3-400, y: Math.random()*600*3-300};
}
function drawstars() {
  ctx.fillStyle = '#fff';
  for(var i=0; i<stars.length; i++) {
    var s = stars[i];
    if(s.x<-viewdist) {s.x+=2000; starcount--; }
    else {ctx.beginPath(); ctx.arc(-s.x/viewdist*800, -s.y/viewdist*600, Math.max(1, viewdist-s.x)/viewdist*10, 0, Math.PI*2); ctx.fill();}
  }
}
function reset() {
  stars = [], starcount=0;
  for(var i=0; i<200; i++) {stars.push(randompos());};
  requestAnimationFrame(draw);
}

requestAnimationFrame(function(){
  draw();
  function draw() {
    ctx.clearRect(0, 0, 800, 600);
    drawstars();
    ctx.fillStyle = '#ff0';
    ctx.font = '24px arial';
    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
    ctx.fillText('Stars: ' + starcount + ', Speed: ' + speed, 10, 20);
    requestAnimationFrame(draw);
  }
});
reset();
</script>
</body>
</html>
```
MODEL Eqwen3.5:9bBLANK
Show code
<!DOCTYPE html>
<html>
<head>
<title>Starfield</title>
<style>body {margin:0;overflow:hidden;}canvas{display:block;background-color:#000;}</style>
</head>
<body>
<canvas id="starCanvas"></canvas>
<script>
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
let width, height;

function resize() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
}
window.addEventListener('resize', resize);
resize();

const NUM_STARS = 300;
let stars = [];
let speed = 0.05; // Speed factor for movement

class Star {
    constructor() {
        this.reset();
    }

    reset() {
        // Initial position far away (large negative Z)
        this.z = Math.random() * -1000 - 100; 
        // Random horizontal spread (-W/2 to W/2)
        this.x = (Math.random() - 0.5) * width * 2;
        // Random vertical spread (-H/2 to H/2)
        this.y = (Math.random() - 0.5) * height * 2;
        this.size = Math.random() * 1.5 + 0.5; // Base size for drawing
    }

    update() {
        // Move towards the viewer (Z increases, approaching 0)
        this.z += speed * 30; 
        
        // Recycling check: If star passes the camera (Z > 1), reset it far away.
        if (this.z > 1) {
            this.reset();
        }
    }

    draw() {
        // Perspective Projection using z as depth factor 'w'
        const w = this.z;
        
        // Avoid division by zero or extreme values near the camera plane
        if (Math.abs(w) < 0.1 || Math.abs(w) > 5000) return;

        // Calculate screen coordinates
        let sx = (this.x / w * width) + (width / 2);
        let sy = (this.y / w * height) + (height / 2);

        // Calculate apparent size and brightness based on z
        // Closer objects (w approaches 0) are larger/brighter
        const scaleFactor = 1 / Math.max(0.1, Math.abs(w));
        let radius = this.size * scaleFactor * 2;
        let alpha = Math.min(1, scaleFactor * 0.3);
        
        // Draw the star streak/point
        ctx.beginPath();
        ctx.arc(sx, sy, radius * (w > 0 ? 0.5 : 1), 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, ${Math.floor(200 + alpha * 50)}, ${alpha})`;
        ctx.fill();
    }
}

function initializeStars() {
    stars = [];
    for (let i = 0; i < NUM_STARS; i++) {
        stars.push(new Star());
    }
}

function animate() {
    // Clear canvas with slight residual trail effect (optional: use opacity fill)
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // Trail effect
    ctx.fillRect(0, 0, width, height);
    
    let activeStars = 0;

    for (const star of stars) {
        star.update();
        star.draw();
        activeStars++;
    }

    // Update UI Stats
    const speedDisplay = document.getElementById('speed');
    if (speedDisplay) {
         speedDisplay.textContent = `Speed: ${speed.toFixed(2)}\nStars: ${NUM_STARS}`;
    }

    requestAnimationFrame(animate);
}

initializeStars();
animate();

// Injecting the stats display element directly since no DOM manipulation is allowed outside script scope
const style = document.createElement('style');
style.textContent = `
body::after {
    content: attr(data-stats);
    position: absolute; 
    top: 10px; left: 10px; color: #fff; font-family: monospace; z-index: 10; opacity: 0.7;
}
`;
document.head.appendChild(style);

// Overwriting the star field to draw stats dynamically
const statDiv = document.createElement('div');
statDiv.id = 'stats';
statDiv.style.cssText = `
    position: absolute; 
    top: 10px; left: 10px; color: #fff; font-family: monospace; z-index: 10; opacity: 0.7;
`;
document.body.appendChild(statDiv);

const statElement = document.getElementById('stats');
let intervalId = setInterval(() => {
    if (typeof statElement !== 'undefined') {
        statElement.textContent = `Speed: ${speed.toFixed(2)}\nStars: ${NUM_STARS}`;
    }
}, 100);

</script>
</body>
</html>
MODEL Fqwen3-coder:30bERRBLANKMINIFIEDFORMAT
Show code
```html
<!DOCTYPE html>
<html><head><title>Starfield</title></head><body style="margin:0;overflow:hidden"><canvas id="starCanvas" width="window.innerWidth" height="window.innerHeight"></canvas><script>const canvas = document.getElementById('starCanvas');const ctx = canvas.getContext('2d');let stars=[];const STAR_COUNT=350;const SPEED=10;function init() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;stars=[];for(let i=0;i<STAR_COUNT;i++)stars.push({...star=()=>{let angle=Math.random()*2*Math.PI;let dist=1000+Math.random()*5000;return{x:dist*Math.cos(angle),y:dist*Math.sin(angle),z:dist,size:Math.random()*1.5}});stars.push(star());}function update() {const w=canvas.width;const h=canvas.height;let starCount=0;for(let i=0;i<STAR_COUNT;i++) {let s=stars[i];s.z-=SPEED;if(s.z<-1) {s.x=Math.random()*w*2-w;s.y=Math.random()*h*2-h;s.z=5000;}}const scaleFactor=400/(w*2);for(let i=0;i<STAR_COUNT;i++) {let s=stars[i];let p=s.z/1000;let screenX=(s.x*(1-p))/(s.z/5000+1)+w/2;let screenY=(s.y*(1-p))/(s.z/5000+1)+h/2;let size=Math.max(0.5, Math.min(4, 0.3+(1-(s.z/-5000)) * 1));let alpha=Math.min(1, s.z/2000);ctx.fillStyle=`rgba(255,255,255,${alpha})`;ctx.beginPath();ctx.arc(screenX,screenY,size,0,2*Math.PI);ctx.fill();starCount++;}document.getElementById('stats').innerHTML=`Stars: ${starCount}<br>Speed: ${SPEED.toFixed(1)}`;}function animate() {ctx.fillStyle='rgba(0,0,0,0.1)';ctx.fillRect(0,0,canvas.width,canvas.height);update();requestAnimationFrame(animate);}window.addEventListener('resize', function(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;});const statsDiv=document.createElement('div');statsDiv.id='stats'style='position:fixed;top:10px;left:10px;color:#fff;font-family:monospace;z-index:10';document.body.appendChild(statsDiv);init();animate();</script></body></html>
```
MODEL Gqwen3:14bERRBLANKMINIFIEDFORMAT
Show code
```html
<!DOCTYPE html>
<html><head><title>Starfield</title></head><body style="margin:0;overflow:hidden;"><canvas id="c"></canvas><script>const c=document.getElementById('c');const ctx=c.getContext('2d');let stars=[],speed=1.5,starCount=300;let W=window.innerWidth;let H=window.innerHeight;c.width=W;c.height=H;
function Star{constructor(x){this.x=x*2-W;this.y=Math.random()*H;this.z=Math.random()*100+50;}reset(){this.x=Math.random()*W;this.y=Math.random()*H;this.z=Math.random()*100+50;}update(s){this.z-=s;if(this.z<0)this.reset();}draw(c,s){let p=s/(100-this.z);let rx=this.x*p/W;let ry=this.y*p/H;let sZ=Math.max(0.5,this.z/100);let size=Math.min(20,1+Math.sqrt(sZ));let alpha=Math.min(1,sZ/30)*size/20;c.fillStyle=`rgba(255,255,255,${alpha})`;c.beginPath();c.arc(rx*W+(W-rx)/2,ry*H+(H-ry)/2,size*p/10+0.5,0,Math.PI*2);c.fill();}
function init(){stars=[];for(let i=0;i<starCount;i++){stars.push(new Star());}requestAnimationFrame(animate);}
function animate(){ctx.fillStyle='rgba(0,0,1,0.1)';ctx.fillRect(0,0,W,H);ctx.save();ctx.translate(W/2,H/2);for(let s of stars){s.update(speed);s.draw(ctx,speed);}ctx.restore();document.getElementById('stats').innerHTML=`Stars: ${starCount}<br>Speed: ${speed.toFixed(2)}`;requestAnimationFrame(animate);}
window.addEventListener('resize',()=>{(W=Math.min(window.innerWidth,1200));(H=Math.min(window.innerHeight,800));c.width=W;c.height=H;});init();</script><div id="stats" style="position:fixed;top:10px;left:10px;color:#fff;background:rgba(0,0,0,0.5);padding:5px;font-family:monospace;">Starfield Running...</div></body></html>
```
MODEL Hmistral-small:24bBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Starfield</title>
<style>
body {margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: black;}
canvas {display: block;}
#info {position: absolute; top: 20px; left: 20px; color: white; font-family: Arial, sans-serif;}
</style>
</head>
<body>
<canvas id="starfield"></canvas>
<div id="info">Stars: <span id="starCount">300</span> Speed: <span id="speed">1.0</span></div>
<script>
let canvas = document.getElementById('starfield');
let ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const stars = [];
const starCount = 300;
const maxSpeed = 5;
const minSpeed = 1;
let speed = Math.random() * (maxSpeed - minSpeed) + minSpeed;

document.getElementById('starCount').innerText = starCount;
document.getElementById('speed').innerText = speed.toFixed(2);

function createStars(count) {
    for (let i = 0; i < count; i++) {
        stars.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            z: Math.random() * canvas.width
        });
    }
}

createStars(starCount);

function updateStars() {
    for (let star of stars) {
        star.z -= speed;
        if (star.z <= 0) {
            star.x = Math.random() * canvas.width;
            star.y = Math.random() * canvas.height;
            star.z = canvas.width;
        }
    }
}

function drawStars() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let star of stars) {
        let x = star.x / star.z * canvas.width + canvas.width / 2;
        let y = star.y / star.z * canvas.height + canvas.height / 2;
        let size = 1 / star.z * 50;
        ctx.beginPath();
        ctx.arc(x, y, size, 0, Math.PI * 2);
        ctx.fillStyle = 'white';
        ctx.fill();
    }
}

function animate() {
    updateStars();
    drawStars();
    requestAnimationFrame(animate);
}

requestAnimationFrame(() => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    createStars(starCount);
    speed = Math.random() * (maxSpeed - minSpeed) + minSpeed;
    document.getElementById('speed').innerText = speed.toFixed(2);
    animate();
});
</script>
</body>
</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 gemma4:26b ——harness
MODEL B qwen3:8b ——harness
MODEL C deepseek-r1:14b ——DNF
MODEL D llama3.1:8b —79.2 sOK
MODEL E qwen3.5:9b —33.1 sOK
MODEL F qwen3-coder:30b —13.3 sOK
MODEL G qwen3:14b —18.1 sOK
MODEL H mistral-small:24b —72.4 sOK