Code · blind round

R83 · Fourier epicycles tracing a shape

blind round 4/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 draws a closed shape with rotating Fourier epicycles on a <canvas>. Build a chain of circles whose radii and speeds come from the Fourier coefficients of a simple target outline, draw the chain rotating, and let the tip of the last circle trace out the shape over time. Keep the traced path visible as it is drawn, and show the number of epicycles used. 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 Amistral-small:24bDNF

No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.

MODEL Bqwen3-coder:30bSTATFORMAT

Show code

```html
<!DOCTYPE html>
<html>
<head>
<title>Fourier Epicycles</title>
<style>body {margin: 0; overflow: hidden;} #canvas {display: block;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let W, H;
let N_COEFFS = 8; // Number of epicycles (Fourier coefficients)
let t = 0;
let pathTrace = [];
let currentCoeffs = [];

function resize() {
    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = W;
    canvas.height = H * 0.8; // Use 80% height for drawing area
}
window.addEventListener('resize', resize);
resize();

function generateCoefficients() {
    const sampleSize = 100;
    let x = [];
    for (let i = 0; i < sampleSize; i++) {
        x.push(i / sampleSize * Math.PI * 2 - Math.PI); // Sample x from a range
    }

    // Target curve function (e.g., sin^2(x) or simple wave for coefficients)
    const y = x.map(xi => Math.sin(xi) * (1 + Math.cos(xi))); 

    let sum_A = Array(N_COEFFS).fill(0);
    let sum_B = Array(N_COEFFS).fill(0);

    for (let k = 0; k < N_COEFFS; k++) {
        let Ak = 0;
        let Bk = 0;
        let coeff_sum_A = 0;
        let coeff_sum_B = 0;
        for (let j = 0; j < sampleSize; j++) {
            const xj = x[j];
            // Fourier basis functions: cos(k*xj), sin(k*xj)
            coeff_sum_A += y[j] * Math.cos(k * xj);
            coeff_sum_B += y[j] * Math.sin(k * xj);
        }
        Ak = coeff_sum_A / sampleSize;
        Bk = coeff_sum_B / sampleSize;
        sum_A[k] = Ak;
        sum_B[k] = Bk;
    }

    return { A: sum_A, B: sum_B };
}

function init() {
    currentCoeffs = generateCoefficients();
    t = 0;
    pathTrace = [];
}

function drawEpicycles(time) {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; // Fade background trace slightly
    ctx.fillRect(0, 0, W, H);

    // Draw path trace (fainter)
    if (pathTrace.length > 1) {
        ctx.strokeStyle = 'rgba(100, 255, 100, 0.7)';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(pathTrace[0].x, pathTrace[0].y);
        for (let i = 1; i < pathTrace.length; i++) {
            ctx.lineTo(pathTrace[i].x, pathTrace[i].y);
        }
        ctx.stroke();
    }

    // Calculate current tip position and draw chain
    let x_tip = W / 2;
    let y_tip = H * 0.85; // Start slightly above the baseline
    let angle_sum = 0;

    for (let k = 0; k < N_COEFFS; k++) {
        // Radii and Speeds derived from coefficients (A and B)
        const Rk = Math.sqrt(Math.abs(currentCoeffs.A[k]) * currentCoeffs.A[k] + Math.abs(currentCoeffs.B[k]) * currentCoeffs.B[k]);
        const Sk = 0.5 + k / N_COEFFS; // Speed increases with order
        
        // Update angle: Angle = initial phase + speed * time
        angle_sum += (Sk * t);

        // Calculate circle center coordinates for drawing the epicycle
        let dx = Math.cos(angle_sum) * (Rk * 0.5);
        let dy = Math.sin(angle_sum) * (Rk * 0.5);

        // Draw the current circle/epicycle
        ctx.strokeStyle = `rgba(30, 150, 255, ${Math.min(1, k / N_COEFFS + 0.5)})`;
        ctx.lineWidth = Math.max(1, Rk * 0.1);
        ctx.beginPath();
        ctx.arc(x_tip + dx, y_tip - dy, Rk * 0.3, 0, Math.PI * 2);
        ctx.stroke();

        // Update position for the next circle (the center of the next circle is on the edge of the current one)
        x_tip += dx;
        y_tip -= dy;
    }

    // The final tip position after all rotations
    const x_final = x_tip;
    const y_final = y_tip;

    // Draw the actual trace point (the tip of the last circle)
    ctx.fillStyle = '#FF4500';
    ctx.beginPath();
    ctx.arc(x_final, y_final, 3, 0, Math.PI * 2);
    ctx.fill();

    // Record and draw path trace (the actual tip)
    const newPoint = { x: x_final, y: y_final };
    pathTrace.push(newPoint);
    if (pathTrace.length > 1000) pathTrace.shift(); // Limit memory usage

    // Display info
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
    ctx.font = '14px monospace';
    const infoText = `Coeffs Used: ${N_COEFFS}. Tip Position: (${x_final.toFixed(1)}, ${y_final.toFixed(1)})`;
    ctx.fillText(infoText, 10, 20);

}

function animate() {
    t += 0.03; // Time step
    drawEpicycles(t);
    requestAnimationFrame(animate);
}

init();
animate();
</script>
</body>
</html>
```

MODEL Cqwen3.5:9bBLANKFORMAT

Show code

```html
<!DOCTYPE html>
<html><head><title>Fourier Epicycles</title><style>body{background:#111;margin:0;overflow:hidden}.canvas{display:block}</style></head><body onload="init()"><canvas id="c" width="600" height="400"></canvas><script>
    const canvas = document.getElementById('c');
    const ctx = canvas.getContext('2d');
    let animationFrameId;

    // Global state
    let phaseOffset = 0;
    let epicycles = [];
    let history = [];
    const MAX_HISTORY = 500;

    function init() {
        history = [];
        epicycles = [];
        phaseOffset = Math.random() * Math.PI * 2;
        drawFourier(10); // Use 10 coefficients for the epicycle chain
        animate();
    }

    // Calculates Fourier coefficients (approximated) and sets up epicycles
    function drawFourier(N) {
        epicycles = [];
        const L = canvas.width;
        const H = canvas.height;
        let sumSq = 0;

        // Simple target source: a sin wave approximation
        for (let x = 0; x < L; x += 5) {
            let y_target = Math.sin(x / 100) * 80 + H / 2 - 40;
            sumSq += 1; // Just normalizing the length
        }

        // Simplified pseudo-Fourier calculation for demonstration purposes:
        // We use the coordinates themselves to generate coefficients (A_k, B_k).
        for (let k = 1; k <= N; k++) {
            const R = Math.abs(Math.sin(0.1 * k) * 50 + 20); // Radius A_k
            const S = Math.abs(Math.cos(0.1 * k) * 40 + 30); // Speed B_k
            epicycles.push({ r: R, s: S });
        }
    }

    function updateAnimation() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw History Trace
        if (history.length > 1) {
            ctx.beginPath();
            ctx.strokeStyle = 'rgba(60, 255, 60, 0.8)';
            ctx.lineWidth = 2;
            ctx.moveTo(history[0].x, history[0].y);
            for (let i = 1; i < history.length; i++) {
                ctx.lineTo(history[i].x, history[i].y);
            }
            ctx.stroke();
        }

        // Draw Epicycles and Tip Path
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        let currentX = centerX;
        let currentY = centerY;
        
        let epicycleOutput = '';
        
        for (let i = 0; i < epicycles.length; i++) {
            const e = epicycles[i];
            
            // Calculate position based on phase offset and index
            const angle = Math.sin(phaseOffset + i * 0.5) * 2; // Angle calculation
            
            currentX += e.r * Math.cos(angle);
            currentY += e.r * Math.sin(angle);

            // Draw the circle (epicycle)
            ctx.beginPath();
            ctx.arc(currentX, currentY, e.r, 0, 2 * Math.PI);
            ctx.strokeStyle = `hsl(${i * 360 / epicycles.length}, 80%, ${50 + i * 2}%)`;
            ctx.lineWidth = 1;
            ctx.stroke();

            // Update the phase offset for the next circle (simulating coupling)
            phaseOffset += e.s / 100;
        }

        // Draw the final tip point
        ctx.beginPath();
        ctx.arc(currentX, currentY, 3, 0, Math.PI * 2);
        ctx.fillStyle = 'lime';
        ctx.fill();
        
        // Record history and enforce limit
        history.push({ x: currentX, y: currentY });
        if (history.length > MAX_HISTORY) {
            history.shift();
        }

        animationFrameId = requestAnimationFrame(updateAnimation);
    }

    function animate() {
        // Loop management (keeps running indefinitely)
        window.onload = function(){}; // Ensure initialization completes
    }
</script></body></html>
```

MODEL Dgemma4:26bDNF

No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.

MODEL Ellama3.1:8bDNF

No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.

MODEL Fqwen3:14bOKFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fourier Epicycles</title>
    <style>body { margin: 0; overflow: hidden; background: #111; }</style>
</head>
<body>
    <canvas id="c"></canvas>
    <script>
        const canvas = document.getElementById('c');
        const ctx = canvas.getContext('2d');

        let W, H;
        let animationId;

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

        let phase = 0;
        const MAX_EPICYCLES = Math.min(12, Math.ceil(Math.log2(W)/50)); // Adaptive count based on canvas size
        let epicycles = [];
        let trailPoints = [];
        let isRunning = true;

        function initializeEpicycles() {
            epicycles = [];
            trailPoints = [];
            const center = { x: W / 2, y: H * 0.8 - 50 };

            // Simple target function approximation (e.g., approximating a slightly squashed circle/figure)
            for (let i = 0; i < MAX_EPICYCLES; i++) {
                const k = i + 1;
                // Coefficients derived from simple harmonic motion for demonstration
                const R = Math.pow(k, 0.5) * 20 + Math.random() * 10; // Radius increases slightly with index
                const S = (i % 3 === 0 ? 0.02 : 0.01);          // Speed varies
                epicycles.push({ r: R, s: S, x: center.x, y: center.y });
            }
        }

        function draw() {
            ctx.clearRect(0, 0, W, canvas.height);

            if (!isRunning) return;

            // Update and Draw Epicycles
            let currentX = epicycles[0].x;
            let currentY = epicycles[0].y;

            for (let i = 0; i < MAX_EPICYCLES; i++) {
                const e = epicycles[i];

                // Update phase based on speed and time
                e.r += e.s * 0.1; // Simulate radius change/oscillation
                phase += e.s * 0.1;

                // Calculate position (circular motion)
                const xOffset = e.r * Math.cos(phase);
                const yOffset = e.r * Math.sin(phase);

                const nextX = currentX + xOffset;
                const nextY = currentY + yOffset;

                // Draw the circle (epicycle)
                ctx.beginPath();
                ctx.arc(nextX, nextY, e.r * 0.05, 0, Math.PI * 2);
                ctx.strokeStyle = `rgba(100, 200, 255, 0.4)`;
                ctx.stroke();

                // Update current position for the next link
                currentX = nextX;
                currentY = nextY;
            }

            // Draw the tip (end of the chain)
            ctx.beginPath();
            ctx.arc(currentX, currentY, 3, 0, Math.PI * 2);
            ctx.fillStyle = 'red';
            ctx.fill();

            // Update and draw trail (the traced shape)
            trailPoints.push({ x: currentX, y: currentY });
            if (trailPoints.length > 1500) {
                trailPoints.shift(); // Keep the array size manageable
            }

            ctx.beginPath();
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.lineWidth = 1;
            for (let i = 0; i < trailPoints.length - 1; i++) {
                const p1 = trailPoints[i];
                const p2 = trailPoints[i + 1];
                ctx.moveTo(p1.x, p1.y);
                ctx.lineTo(p2.x, p2.y);
            }
            ctx.stroke();

            // Display epicycle count
            ctx.fillStyle = 'white';
            ctx.font = '14px Arial';
            ctx.fillText(`Epicycles Used: ${MAX_EPICYCLES}`, 10, 25);


            animationId = requestAnimationFrame(animate);
        }

        function animate() {
            phase += 0.01; // Global phase shift for continuous rotation
            draw();
        }

        function startSimulation() {
            if (animationId) cancelAnimationFrame(animationId);
            initializeEpicycles();
            phase = 0;
            requestAnimationFrame(animate);
        }


        // Start immediately
        startSimulation();
    </script>
</body>
</html>
```

MODEL Gdeepseek-r1:14bERRBLANKFORMAT

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=600 height=400></canvas>
<script>
function setup() {
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  
  // Setup
  let epicycles = [];
  const count = 20;
  const colors = ['#fff','#f0f','#0ff','#ff0'];
  for(let i=0;i<count;++i) {
    epicycles.push({
      r:Math.random()/3*(.5+.5*i/count),
      speed:(.1 - .02*i/count),
      angle:i%2==0?0:.Math.PI/4,
      x:canvas.width/2,y:canvas.height/2
    });
  }
  
  let path = [];
  let frameCount=0;
  const maxFrames=5000;
  
  function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    
    // Draw traced path
    if(path.length>1) {
      ctx.beginPath();
      ctx.strokeStyle='rgba(255,255,255,.1)';
      ctx.moveTo(path[0].x,path[0].y);
      for(let i=1,len=path.length;i<len;++i) {
        ctx.lineTo(path[i].x,path[i].y);
      }
      ctx.stroke();
    }
    
    // Update and draw epicycles
    let prevX = canvas.width/2;
    let prevY = canvas.height/2;
    for(let i=0,len=epicycles.length;i<len;++i) {
      const e = epicycles[i];
      e.angle += e.speed;
      
      if(i==0) {
        ctx.beginPath();
        ctx.arc(e.x,e.y,e.r,0,Math.PI*2);
        ctx.strokeStyle=colors[i%colors.length];
        ctx.stroke();
      } else {
        const nextX = prevX + Math.cos(e.angle)*e.r;
        const nextY = prevY + Math.sin(e.angle)*e.r;
        
        e.x = nextX;
        e.y = nextY;
        
        // Draw connecting line
        ctx.beginPath();
        ctx.moveTo(prevX,prevY);
        ctx.lineTo(nextX,nextY);
        ctx.strokeStyle=colors[i%colors.length];
        ctx.stroke();
      }
      
      prevX = e.x;
      prevY = e.y;
    }
    
    // Record path and draw dot
    if(frameCount % 10 == 0) {
      path.push({x:prevX,y:prevY});
    }
    ctx.beginPath();
    ctx.arc(prevX,prevY,2,0,Math.PI*2);
    ctx.fillStyle='rgba(255,255,255,.8)';
    ctx.fill();
    
    // Animation controls
    frameCount++;
    if(frameCount > maxFrames) {
      epicycles.forEach((e,i)=>{
        e.angle = i%2==0?0:.Math.PI/4;
      });
      frameCount=0;
    }
    
    requestAnimationFrame(draw);
  }
  
  document.getElementById('c').addEventListener('click',function(e){
    let rect = canvas.getBoundingClientRect();
    let x = e.clientX - rect.left;
    let y = e.clientY - rect.top;
    if(Math.random()>.5) {
      epicycles.push({
        r:Math.random()/3,
        speed:(.1 - .02*epicycles.length),
        angle:Math.random()*Math.PI/2,
        x:x,y:y
      });
    }
  });
  
  draw();
}

window.onload = setup;
</script><div style="position:absolute;top:10px;left:10px;color:#fff;font-family:sans-serif;font-size:16px">Epicycles used: <span id=count>20</span></div>
</body></html>
```

MODEL Hqwen3:8bDNF

No usable answer reached the harness (ERR). 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-coder:30b	—	26.1 s	OK
MODEL C	qwen3.5:9b	—	38.4 s	OK
MODEL D	gemma4:26b	—	—	harness
MODEL E	llama3.1:8b	—	—	DNF
MODEL F	qwen3:14b	—	40.7 s	OK
MODEL G	deepseek-r1:14b	—	81.1 s	OK
MODEL H	qwen3:8b	—	—	harness