Code · blind round

R140 · Water sloshing in a tilting container

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 animates sloshing water in a container on a <canvas>: roughly 200 small particles representing water, each pushed apart from nearby particles by a short-range repulsion force plus a mild cohesion pull so they behave like a connected fluid rather than dry grains, falling under gravity and bouncing softly off the container walls and floor. Periodically rotate the effective gravity direction smoothly back and forth over a few seconds to simulate tilting the container, so the whole mass of particles visibly sloshes from side to side and splashes against the walls. Render the particles blended into a single body of colour rather than as separate dry grains. Show the current tilt angle in degrees. 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:8bOKFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sloshing Water Animation</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    #canvas {
        width: 100%;
        height: 500px;
        border: none;
    }
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = 500;

    let particles = [];
    let gravityDirX, gravityDirY;
    let tiltAngle = 0;

    function init() {
        for (let i = 0; i < 200; i++) {
            let x = Math.random() * canvas.width;
            let y = Math.random() * canvas.height;
            particles.push({x: x, y: y, vx: Math.random()*2-1, vy: Math.random()*2});
        }
        gravityDirX = Math.cos(tiltAngle);
        gravityDirY = Math.sin(tiltAngle);

        requestAnimationFrame(draw);
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        let w = canvas.width;
        let h = canvas.height;

        for (let i = 0; i < particles.length; i++) {
            let p = particles[i];
            let repulsionRadius = 5;
            let cohesionStrength = 0.001;

            if (p.y + 2 > h) {
                // bounce off floor
                p.vy *= -0.8;
                p.y += 2 - h;
                if (Math.random() < 0.01) {
                    p.vx = Math.random()*3-1.5;
                }
            } else if (p.x + 2 > w) {
                // bounce off right wall
                p.vx *= -0.8;
                p.x += 2 - w;
                if (Math.random() < 0.01) {
                    p.vy = Math.random()*3-1.5;
                }
            } else if (p.y > 0 && p.x > 0) {
                for (let j = 0; j < particles.length; j++) {
                    let other = particles[j];
                    if (i != j && dist(p, other) < repulsionRadius) {
                        // push away from nearby particle
                        let dx = p.x - other.x;
                        let dy = p.y - other.y;
                        let repulsionForce = 0.05 / Math.sqrt(dx * dx + dy * dy);
                        p.vx += dx * repulsionForce / (p.mass+other.mass);
                        p.vy += dy * repulsionForce / (p.mass+other.mass);
                    }
                }
            }

            // apply gravity
            let g = 0.1;
            p.vx += g * gravityDirX * 10;
            p.vy += g * gravityDirY;

            p.x += p.vx;
            p.y += p.vy;

            ctx.beginPath();
            ctx.arc(p.x, p.y, 2, 0, Math.PI*2);
            ctx.fillStyle = 'rgba(0,0,255,1)';
            ctx.fill();

        }

        tiltAngle += 0.01;
        gravityDirX = Math.cos(tiltAngle);
        gravityDirY = Math.sin(tiltAngle);

        ctx.font = "24px Arial";
        ctx.textAlign = "left";
        ctx.fillStyle = "#000000";
        ctx.fillText("Tilt: " + (tiltAngle * 180 / Math.PI).toFixed(0) + "°", 10, 30);

        requestAnimationFrame(draw);
    }

    function dist(a, b) {
        return Math.sqrt((a.x - b.x)*(a.x - b.x) + (a.y - b.y)*(a.y - b.y));
    }

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

mistral-small:24bERRBLANKFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Water Sloshing</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; }
canvas { border: 1px solid black; }
#angle { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 24px; color: black;}
</style>
</head>
<body>

<canvas id="waterCanvas" width="600" height="400"></canvas><div id="angle">Tilt Angle: 0°</div>

<script>
const canvas = document.getElementById('waterCanvas');
const ctx = canvas.getContext('2d');
const particles = [];
const gravity = { x: 0, y: 1 };
let tiltAngle = 0;
const angleSpeed = Math.PI / 4;
const tiltDirection = 1;

function Particle(x, y) {
    this.x = x;
    this.y = y;
    this.vx = (Math.random() - 0.5);
    this.vy = (Math.random() - 0.5);

    this.update = function() {
        let fx = 0, fy = 0;

        for (let i = 0; i < particles.length; i++) {
            const dx = particles[i].x - this.x;
            const dy = particles[i].y - this.y;
            const distSq = dx * dx + dy * dy;
            if (distSq > 0 && distSq < 100) {
                fx += dx / distSq;
                fy += dy / distSq;
            }
        }

        this.vx *= 0.99;
        this.vy *= 0.99;

        this.vx += gravity.x * 0.2 + fx * 10;
        this.vy += gravity.y * 0.2 + fy * 10;

        this.x += this.vx;
        this.y += this.vy;

        if (this.x < 5 || this.x > canvas.width - 5) {
            this.vx = -this.vx;
            this.x += this.vx;
        }
        if (this.y < 5 || this.y > canvas.height - 5) {
            this.vy = -this.vy * 0.8;
            this.y += this.vy;
        }

    };
}

function initParticles() {
    particles.length = 200;
    for (let i = 0; i < 200; i++) {
        particles.push(new Particle(
            Math.random() * canvas.width,
            Math.random() * canvas.height
        ));
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => p.update());

    ctx.beginPath();
    particles.forEach(p => ctx.ellipse(p.x, p.y, 2, 2, 0, 0, 2 * Math.PI));
    ctx.fillStyle = 'blue';
    ctx.fill();

    tiltAngle += angleSpeed * tiltDirection;
    if (Math.abs(tiltAngle) > Math.PI / 6) {
        tiltDirection *= -1;
    }
    gravity.x = Math.sin(tiltAngle);
    gravity.y = Math.cos(tiltAngle);

    document.getElementById('angle').innerText = `Tilt Angle: ${(tiltAngle * (180/Math.PI)).toFixed(2)}°`;

    requestAnimationFrame(animate);
}

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

qwen3.5:9bOKFORMAT

Show code

```html
<!DOCTYPE html>
<html>
<head>
<title>Sloshing Water Simulation</title>
<style>
body { margin: 0; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; }
canvas { border: 1px solid #333; background-color: #222; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>

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

let W, H;
let particles = [];
const NUM_PARTICLES = 200;

// Physics constants
const GRAVITY_STRENGTH = 0.15;
const REPULSION_RANGE = 6;
const COHESION_STRENGTH = 0.03;
const DAMPING = 0.98;
const BOUNCE_ELASTICITY = 0.7;

// Gravity tilt parameters
let currentAngle = 0; // Radians
const MAX_TILT_DEGREES = Math.PI / 4; // Tilt up to 45 degrees
let timeOffset = 0;

function init() {
    W = canvas.width = 700;
    H = canvas.height = 600;
    particles = [];
    for (let i = 0; i < NUM_PARTICLES; i++) {
        particles.push({
            x: Math.random() * W,
            y: Math.random() * H / 4 + H / 8, // Start mostly in the top half
            vx: (Math.random() - 0.5) * 0.5,
            vy: (Math.random() - 0.5) * 0.5,
            r: Math.random() * 1 + 1,
        });
    }
    timeOffset = 0;
}

function handlePhysics(dt) {
    // Calculate time-dependent tilt angle (sin wave oscillation)
    timeOffset += dt * 0.5;
    currentAngle = Math.sin(timeOffset * 0.8) * MAX_TILT_DEGREES;

    const g_x = GRAVITY_STRENGTH * Math.cos(currentAngle);
    const g_y = GRAVITY_STRENGTH * Math.sin(currentAngle);

    // Reset forces and update positions for all particles
    for (let i = 0; i < NUM_PARTICLES; i++) {
        let p = particles[i];
        p.vx += g_x * dt * 0.5;
        p.vy += g_y * dt * 0.5;
        
        // Apply damping and interaction forces
        p.vx *= DAMPING;
        p.vy *= DAMPING;

        for (let j = i + 1; j < NUM_PARTICLES; j++) {
            let q = particles[j];
            const dx = p.x - q.x;
            const dy = p.y - q.y;
            const distSq = dx * dx + dy * dy;
            const dist = Math.sqrt(distSq);

            if (dist === 0) continue;

            // Repulsion Force: Push apart if too close
            let force = 0;
            if (dist < REPULSION_RANGE && dist > 0.1) {
                force = (REPULSION_RANGE - dist) / dist * 0.5;
            } 
            // Cohesion Force: Mild pull together
            else if (dist > REPULSION_RANGE * 0.8) {
                 force = COHESION_STRENGTH / dist;
            }

            const fx = force * dx;
            const fy = force * dy;

            // Apply forces to acceleration components
            p.vx += fx * 0.01;
            p.vy += fy * 0.01;
        }
    }

    // Integrate and Handle Boundaries
    for (let i = 0; i < NUM_PARTICLES; i++) {
        let p = particles[i];

        // Update position
        p.x += p.vx * 2;
        p.y += p.vy * 2;

        // Boundary Checks (Soft bounce)
        if (p.x - p.r < 0 || p.x + p.r > W) {
            p.vx *= -BOUNCE_ELASTICITY;
            p.x = Math.max(p.r, Math.min(W - p.r, p.x)); // Clamp position
        }
        if (p.y - p.r < 0) { // Top boundary (Canvas top)
            p.vy *= -BOUNCE_ELASTICITY;
            p.y = p.r;
        } else if (p.y + p.r > H) { // Floor boundary
            p.vy *= -BOUNCE_ELASTICITY * 0.8; // More energy loss on floor
            p.y = H - p.r;
        }
    }
}

function draw() {
    // Blended clearing effect (slow fade)
    ctx.fillStyle = 'rgba(34, 34, 34, 0.1)';
    ctx.fillRect(0, 0, W, H);

    for (let p of particles) {
        // Draw blended circle by using low opacity and filling over the same space
        ctx.fillStyle = 'rgba(100, 150, 255, 0.3)'; // Water color
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
    }
}

function loop() {
    const dt = 1 / 60; // Fixed timestep simulation
    handlePhysics(dt);
    draw();
    requestAnimationFrame(loop);
}

// Initialization and Start
init();
loop();
</script>

</body>
</html>
```

qwen3-coder:30bOKFORMAT

Show code

```html
<!DOCTYPE html>
<html>
<head>
<title>Sloshing Water Simulation</title>
<style>body { margin: 0; overflow: hidden; background-color: #111; }</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W, H;

// Utility function for random float
const rand = (min, max) => Math.random() * (max - min) + min;

// Particle structure
class P {
    constructor(x, y) {
        this.pos = { x: x, y: y };
        this.vel = { x: 0, y: 0 };
        this.acc = { x: 0, y: 0 };
        this.radius = rand(2, 4);
    }
}

let particles = [];
const particleCount = 200;

// Physics parameters
const K_REPULSION = 150; // Repulsion strength (higher means more separation)
const K_COHESION = 0.1;  // Cohesion/attraction strength (keeps them connected)
const DAMPING = 0.98;    // Velocity dampening per frame
const BOUNDARY_DAMPING = 0.7; // Bounce dampening

let gravityAngle = Math.PI / 2; // Start pointing down
let targetGravityAngle = Math.PI / 2;
const TILT_SPEED = 0.015; // Rate of change for tilt angle

// Setup canvas size and initialize particles
function setup() {
    W = window.innerWidth;
    H = window.innerHeight * 0.8;
    canvas.width = W;
    canvas.height = H;
    particles = [];
    for (let i = 0; i < particleCount; i++) {
        const x = rand(W * 0.15, W * 0.85);
        const y = rand(H * 0.15, H * 0.85);
        particles.push(new P(x, y));
    }
    // Reset physics variables
    gravityAngle = Math.PI / 2;
    targetGravityAngle = Math.PI / 2;
}

window.addEventListener('resize', setup);
setup();

function applyPhysics() {
    const gravityX = -Math.sin(gravityAngle);
    const gravityY = Math.cos(gravityAngle);

    for (let i = 0; i < particleCount; i++) {
        const p = particles[i];
        p.acc = { x: 0, y: 0 };

        // Apply Gravity
        p.acc.x += gravityX * 0.2;
        p.acc.y += gravityY * 0.2;

        // Inter-particle forces (Repulsion + Cohesion)
        for (let j = i + 1; j < particleCount; j++) {
            const q = particles[j];
            const dx = p.pos.x - q.pos.x;
            const dy = p.pos.y - q.pos.y;
            const distSq = dx * dx + dy * dy;
            let dist = Math.sqrt(distSq);
            
            if (dist === 0) continue;

            // Calculate force magnitude based on distance
            let force = 0;
            
            // Repulsion: Strong when close, falls off quickly
            force += K_REPULSION / distSq * Math.max(0, 1 - dist / (p.radius + q.radius) * 1.5);

            // Cohesion: Mild pull to keep them clumped
            force -= K_COHESION / dist; 

            const fX = force * dx / dist;
            const fY = force * dy / dist;

            p.acc.x += fX / p.radius;
            p.acc.y += fY / p.radius;
            q.acc.x -= fX / q.radius;
            q.acc.y -= fY / q.radius;
        }

        // Update velocity and position (Euler integration)
        p.vel.x = p.acc.x;
        p.vel.y = p.acc.y;

        // Apply damping
        p.vel.x *= DAMPING;
        p.vel.y *= DAMPING;

        p.pos.x += p.vel.x;
        p.pos.y += p.vel.y;
    }
}

function handleCollisions() {
    for (let i = 0; i < particleCount; i++) {
        const p = particles[i];

        // X-bounds check
        if (p.pos.x - p.radius < 0 || p.pos.x + p.radius > W) {
            p.vel.x *= -BOUNDARY_DAMPING;
            p.pos.x = Math.max(p.radius, Math.min(p.pos.x, W - p.radius));
        }

        // Y-bounds check (Floor)
        if (p.pos.y + p.radius > H) {
            p.vel.y *= -BOUNDARY_DAMPING;
            p.vel.x *= 0.8; // Slow horizontal bounce slightly
            p.pos.y = H - p.radius;
        }

        // Top floor (optional, prevents particles from escaping upwards)
        if (p.pos.y - p.radius < 0) {
            p.vel.y *= -BOUNDARY_DAMPING;
            p.pos.y = p.radius;
        }
    }
}

function updateSimulation() {
    // Simulate tilting: smoothly change target gravity angle sinusoidally
    const time = performance.now() / 5000; // Period of ~10 seconds for full cycle
    targetGravityAngle = Math.PI/2 + Math.sin(time * TILT_SPEED) * (Math.PI / 4);

    // Smoothly move current gravity angle towards target
    gravityAngle += (targetGravityAngle - gravityAngle) * 0.1;

    applyPhysics();
    handleCollisions();
}

function draw() {
    // Gradient background to simulate water surface/depth
    ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
    ctx.fillRect(0, 0, W, H);

    // Draw particles blended (simulating a fluid body)
    for (let i = 0; i < particleCount; i++) {
        const p = particles[i];
        ctx.beginPath();
        ctx.arc(p.pos.x, p.pos.y, p.radius * 0.7, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(100, 150, 255, 0.8)'; // Water color
        ctx.fill();
    }

    // Display tilt angle
    const angleDeg = (Math.acos(Math.cos(gravityAngle)) / Math.PI) * 180;
    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
    ctx.font = '20px monospace';
    ctx.fillText(`Tilt: ${Math.round(angleDeg)}°`, 10, 30);
}

function loop() {
    updateSimulation();
    draw();
    requestAnimationFrame(loop);
}

// Start the animation
loop();
</script>
</body>
</html>
```

deepseek-r1:14bERRBLANKFORMAT

Show code

```html
<!DOCTYPE html>
<html><body style="margin:0;overflow:hidden;">
<canvas id=c></canvas>
<div id=a style="position:absolute;top:10;left:10;color:white;"></div>
<script>
let c=document.getElementById('c'), ctx=c.getContext('2d');
let w=600,h=400,c.width=w,c.height=h;
class Water{
  constructor(n){
    this.particles=[];this.forces={x:0,y:0};
    for(let i=0;i<n;i++){
      let p={
        x:Math.random()*(w/2),
        y:Math.random()*(h/2),
        vx:0,
        vy:0,
        ax:0,
        ay:0,
        r:1.5
      };
      this.particles.push(p);
    }
  }
  update(t){
    let particles=this.particles;
    for(let i=0;i<particles.length;i++){
      let p=particles[i];
      let fx=p.ax;let fy=p.ay;
      // Apply forces and gravity
      for(let j=i+1;j<particles.length;j++) {
        let q=particles[j];
        let dx=p.x-q.x, dy=p.y-q.y,d=Math.sqrt(dx*dx+dy*dy);
        if(d>0){
          fx += (d-2*p.r)*dx/(d*d);
          fy += (d-2*p.r)*dy/(d*d);
        }
      }
      // Apply gravity with rotation
      let angle=3*(Math.sin(t/8))/180*Math.PI;
      let gX=Math.cos(angle)+(Math.sin(angle)/4),gY=-Math.sin(angle)-(Math.cos(angle)/4);
      fx +=gX*0.02;fy +=gY*0.02;
      
      p.vx +=fx +p.x*0.01;
      p.vy +=fy +p.y*0.01;
      // Apply damping to velocity
      p.vx *=0.98;p.vy *=0.98;
      
      p.x +=p.vx;
      p.y +=p.vy;
    }
  }
  
  draw(){
    ctx.fillStyle='rgba(25,43,86,.1)';
    for(let p of this.particles) {
      if(p.x<0||p.x>w||p.y<0||p.y>h)p=this.bounce(p);
      ctx.beginPath();
      ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
      ctx.fill();
    }
  }
  
  bounce(p){
    let b=0.75;
    p.vx *=b*p.x/w*-2+1;
    p.vy *=p.y/h*-2*b+1;
    return p;
  }
}

let water=new Water(200);
let lastTime=performance.now(), tilt=document.getElementById('a');

function animate(timestamp){
  let dt=timestamp - lastTime;
  lastTime=timestamp;
  
  // Update particles and apply forces
  water.update(timestamp/1000);
  
  // Draw
  ctx.fillStyle='rgba(0,0,0,.05)';
  ctx.fillRect(0,0,w,h);
  water.draw();
  
  // Draw tilt angle
  let angle=3*Math.sin(timestamp/(8*1000))/Math.PI*2;
  tilt.textContent=`Tilt: ${angle.toFixed(1)}°`;
  
  requestAnimationFrame(animate);
}

animate(performance.now());
</script>
</body></html>
```

qwen3:14bERRBLANKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sloshing Water Simulation</title>
    <style>
        body { margin: 0; background: #111; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
        canvas { border: 2px solid #333; background: #0a0e15; }
    </style>
</head>
<body>
    <canvas id="waterCanvas"></canvas>
    <script>
        const canvas = document.getElementById('waterCanvas');
        const ctx = canvas.getContext('2d');

        let W = 800;
        let H = 500;
        canvas.width = W;
        canvas.height = H;

        const N_PARTICLES = 200;
        const container = { width: W * 0.9, height: H * 0.8, x: (W - W * 0.9) / 2, y: (H - H * 0.8) / 2 };

        let particles = [];
        let gravityAngle = 0; // Radians
        let targetGravityAngle = Math.PI / 4; // Start tilting phase
        let rotationSpeed = 0.005;
        let timer = 0;

        // --- Physics Constants ---
        const REPULSION_STRENGTH = 2000;
        const COHESION_STRENGTH = 150;
        const DAMPING = 0.98;
        const GRAVITY_MAGNITUDE = 9.8 * 0.5; // Scaled gravity
        const TIME_STEP = 0.016;

        class Particle {
            constructor(x, y) {
                this.r = Math.random() * 3 + 2;
                this.pos = { x: x, y: y };
                this.vel = { x: (Math.random() - 0.5) * 1, y: (Math.random() - 0.5) * 1 };
            }

            applyForce(forceX, forceY) {
                this.vel.x += forceX;
                this.vel.y += forceY;
            }

            updatePosition() {
                this.pos.x += this.vel.x * TIME_STEP * 60;
                this.pos.y += this.vel.y * TIME_STEP * 60;
                this.vel.x *= DAMPING;
                this.vel.y *= DAMPING;
            }
        }

        function initializeParticles() {
            particles = [];
            const centerX = W / 2;
            const centerY = H / 2;
            for (let i = 0; i < N_PARTICLES; i++) {
                // Spawn particles randomly within the container area
                let x = container.x + Math.random() * container.width * 0.8;
                let y = container.y + Math.random() * container.height * 0.8;
                particles.push(new Particle(x, y));
            }
        }

        function applyForces() {
            const gX = -Math.sin(gravityAngle) * GRAVITY_MAGNITUDE;
            const gY = Math.cos(gravityAngle) * GRAVITY_MAGNITUDE;

            // 1. Gravity and Inter-particle forces
            for (let i = 0; i < N_PARTICLES; i++) {
                const p1 = particles[i];
                p1.applyForce(gX, gY);

                for (let j = i + 1; j < N_PARTICLES; j++) {
                    const p2 = particles[j];

                    const dx = p2.pos.x - p1.pos.x;
                    const dy = p2.pos.y - p1.pos.y;
                    let distSq = dx * dx + dy * dy;
                    let dist = Math.sqrt(distSq);
                    let min_dist = p1.r + p2.r;

                    if (dist < 0.5 || dist > 15) continue; // Skip too close or too far

                    // Repulsion Force (Overlap correction)
                    let forceR = REPULSION_STRENGTH * Math.max(0, min_dist - dist);
                    let fxR = (dx / dist) * forceR;
                    let fyR = (dy / dist) * forceR;

                    // Cohesion Force (Mild attraction)
                    let forceC = COHESION_STRENGTH * (1 - Math.pow(dist / 10, 2));
                    let fxC = (dx / dist) * forceC * 0.5;
                    let fyC = (dy / dist) * forceC * 0.5;

                    // Apply total force
                    let totalFX = fxR + fxC;
                    let totalFY = fyR + fyC;

                    p1.applyForce(totalFX, totalFY);
                    p2.applyForce(-totalFX, -totalFY); // Newton's Third Law
                }
            }
        }

        function checkCollisions() {
            const margin = 5;
            for (let i = 0; i < N_PARTICLES; i++) {
                let p = particles[i];
                let { x: px, y: py } = p.pos;
                let r = p.r;

                // Wall collisions
                if (px - r < container.x + margin) {
                    p.vel.x *= -0.8;
                    p.pos.x = container.x + r + margin;
                } else if (px + r > container.x + container.width - margin) {
                    p.vel.x *= -0.8;
                    p.pos.x = container.x + container.width - r - margin;
                }

                // Floor boundary collision
                if (py + r > container.y + container.height - margin) {
                    p.vel.y *= -0.7; // Lower bounce dampening
                    p.pos.y = container.y + container.height - r - margin;
                } else if (py - r < container.y + margin) {
                     // Top boundary check (shouldn't happen given setup, but safe)
                    p.vel.y *= 0.9;
                    p.pos.y = container.y + r + margin;
                }
            }
        }

        function updatePhysics() {
            applyForces();
            for (let p of particles) {
                p.updatePosition();
            }
            checkCollisions();
        }

        function render() {
            // Fade effect for water simulation trail
            ctx.fillStyle = 'rgba(10, 14, 21, 0.3)';
            ctx.fillRect(0, 0, W, H);

            // Draw particles blended together (simulating fluid)
            for (let p of particles) {
                ctx.beginPath();
                ctx.arc(p.pos.x, p.pos.y, p.r * 0.7, 0, Math.PI * 2);
                // Use a slightly lighter blue for the water body effect
                ctx.fillStyle = 'rgba(100, 150, 255, 0.8)';
                ctx.fill();
            }

             // Draw container boundaries (optional visual aid)
            ctx.strokeStyle = '#333';
            ctx.strokeRect(container.x, container.y, container.width, container.height);
        }

        function updateGravitySimulation() {
            timer += 1;
            const amplitude = Math.PI / 2; // Max tilt angle (90 degrees)
            const frequency = 0.5;
            // Smoothly oscillate the target gravity angle between -amplitude and +amplitude (simulating left/right slosh)
            targetGravityAngle = amplitude * Math.sin(timer * rotationSpeed);

            // Smoothly transition current gravity angle towards target
            gravityAngle += (targetGravityAngle - gravityAngle) * 0.05;

            const degrees = (Math.atan2(Math.cos(gravityAngle), -Math.sin(gravityAngle)) * 180 / Math.PI).toFixed(1);

            document.getElementById('angle').textContent = `Tilt Angle: ${degrees}°`;
        }


        function animate() {
            updateGravitySimulation();
            updatePhysics();
            render();
            requestAnimationFrame(animate);
        }

        // Initial setup and start
        initializeParticles();
        
        // Create a display element for the angle
        const angleDisplay = document.createElement('div');
        angleDisplay.style.position = 'absolute';
        angleDisplay.style.top = '10px';
        angleDisplay.style.left = '50%';
        angleDisplay.style.transform = 'translateX(-50%)';
        angleDisplay.style.color = '#fff';
        angleDisplay.style.fontFamily = 'monospace';
        document.body.appendChild(angleDisplay);

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

gemma4:26bharness

No answer reached us (ERR) — 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: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.

qwq:32bDNF

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

deepseek-r1:32bOKFORMAT

Show code

```html
<!DOCTYPE html><html><head><style>canvas{border:1px solid #ccc;position:absolute;left:100px;top:100px}.info{position:absolute;left:20px;top:20px;color:#333}</style></head><body><div class="info">Tilt: <span id="angle"></span>°</div><canvas id="c" width=400 height=600></canvas><script>
const canvas=document.getElementById('c'),ctx=canvas.getContext('2d'),particles=[],W=canvas.width,H=canvas.height,NPARTICLES=200,S=3,C=0.1,CR=0.5,PARTICLE_SIZE=8,GRAVITY_MAGNITUDE=0.5,DAMPING=0.95,ROTATION_PERIOD=4;
let tiltAngle=0,time=0;
class Particle{constructor(x,y){this.x=x;this.y=y;this.vx=0;this.vy=0;this.fx=0;this.fy=0}
update(dt){
this.vx+=this.fx*dt;
this.vy+=this.fy*dt;
this.x+=this.vx*dt;
this.y+=this.vy*dt;
if(this.x<0||this.x>W){this.vx*=-DAMPING;this.x=Math.max(0,Math.min(W,this.x))}
if(this.y<0||this.y>H){this.vy*=-DAMPING;this.y=H}
}}

function init(){particles.length=0;
for(let i=0;i<NPARTICLES;i++){
const x=W/2+Math.random()*S*10-5*S,y=H/2+Math.random()*S*10-5*S;
particles.push(new Particle(x,y))}

}

function applyForces(){
particles.forEach(p=>{
p.fx=0;p.fy=0;
particles.forEach(q=>{
if(p==q)return;
const dx=p.x-q.x,dy=p.y-q.y,d=Math.sqrt(dx*dx+dy*dy);
if(d<S){
const force=C*(S-d)/d;
p.fx-=force*dx;
p.fy-=force*dy;
q.fx+=force*dx;
q.fy+=force*dy
}else if(d<S*2.5){
const force=CR*(Math.pow(S,3)/(d*d));
p.fx+=force*dx/d;
p.fy+=force*dy/d;
q.fx-=force*dx/d;
q.fy-=force*dy/d;
}
})
})

}

function applyGravity(angle=Math.sin(time/ROTATION_PERIOD*2*Math.PI)*45){
tiltAngle=angle;
particles.forEach(p=>{
const gx=Math.cos(tiltAngle*Math.PI/180)*GRAVITY_MAGNITUDE,
gy=-Math.sin(tiltAngle*Math.PI/180)*GRAVITY_MAGNITUDE;
p.fy+=gy;p.fx+=gx
})

}

function update(dt){
applyForces();
applyGravity();
particles.forEach(p=>p.update(dt))

}

function draw(){
ctx.fillStyle='#f0f0f0';ctx.fillRect(0,0,W,H);
ctx.strokeStyle='#ccc';
ctx.beginPath();
ctx.moveTo(50,20);ctx.lineTo(W-50,20); ctx.moveTo(50, H-20), ctx.lineTo(W-50, H-20);
ctx.moveTo(20,50), ctx.lineTo(20,H-50); ctx.moveTo(W-20,50), ctx.lineTo(W-20,H-50);
ctx.stroke();
ctx.fillStyle='#418CFD';
particles.forEach(p=>{ctx.beginPath();ctx.arc(p.x,p.y,PARTICLE_SIZE,0,2*Math.PI);ctx.fill()})

}

function animate(timestamp){
const dt=timestamp-lastTimestamp;
update(dt/1000);
draw();
document.getElementById('angle').textContent=Math.round(tiltAngle.toFixed(0));
lastTimestamp=timestamp;
frameCount++;
if(frameCount>60*ROTATION_PERIOD)init(),frameCount=0;
requestAnimationFrame(animate)
}

let lastTimestamp=Date.now(),frameCount=0;
init();animate(lastTimestamp);
</script></body></html>
```

command-r:35bDNF

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 lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sloshing Water</title>
<style>
html,body{margin:0;height:100%;background:#05070f;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif}
canvas{max-width:100vw;max-height:100vh;border-radius:10px;box-shadow:0 0 60px #0a2a5580}
</style>
</head>
<body>
<canvas id="c" width="760" height="480"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const W=760,H=480,L=34,R=W-34,T=44,B=H-30,N=200,rr=6,h=20,hc=h*1.75,G=1500;
const sp=document.createElement('canvas');sp.width=sp.height=64;
const sc=sp.getContext('2d'),rg=sc.createRadialGradient(32,32,0,32,32,32);
rg.addColorStop(0,'rgba(140,215,255,.85)');rg.addColorStop(.35,'rgba(45,135,240,.45)');
rg.addColorStop(1,'rgba(10,50,150,0)');sc.fillStyle=rg;sc.fillRect(0,0,64,64);
let P,t,per,amp,ph,dur,ax=[],ay=[];
function init(){
 P=[];
 for(let i=0;i<N;i++)P.push({x:L+50+Math.random()*(R-L-100),y:T+70+Math.random()*(B-T-130),vx:(Math.random()-.5)*60,vy:(Math.random()-.5)*60});
 t=0;per=2.6+Math.random()*2.2;amp=.42+Math.random()*.38;ph=Math.random()*6.283;dur=20+Math.random()*12;
}
let ang=0;
function step(dt){
 ang=amp*Math.sin(t*6.283/per+ph)+amp*.22*Math.sin(t*6.283/(per*.41)+ph*2);
 const gx=Math.sin(ang)*G,gy=Math.cos(ang)*G,s=dt/2;
 for(let k=0;k<2;k++){
  for(let i=0;i<N;i++){ax[i]=gx;ay[i]=gy;}
  for(let i=0;i<N;i++){const a=P[i];
   for(let j=i+1;j<N;j++){const b=P[j];
    let dx=b.x-a.x,dy=b.y-a.y,d2=dx*dx+dy*dy;
    if(d2<hc*hc&&d2>.01){
     const d=Math.sqrt(d2),nx=dx/d,ny=dy/d;
     const f=d<h?3000*(1-d/h)*(1-d/h*.5):-300*(1-(d-h)/(hc-h));
     ax[i]-=nx*f;ay[i]-=ny*f;ax[j]+=nx*f;ay[j]+=ny*f;
     const u=((b.vx-a.vx)*nx+(b.vy-a.vy)*ny)*7*(1-d/hc);
     ax[i]+=nx*u;ay[i]+=ny*u;ax[j]-=nx*u;ay[j]-=ny*u;
    }}}
  for(let i=0;i<N;i++){const p=P[i];
   p.vx=(p.vx+ax[i]*s)*.9985;p.vy=(p.vy+ay[i]*s)*.9985;
   const v2=p.vx*p.vx+p.vy*p.vy;
   if(v2>810000){const m=900/Math.sqrt(v2);p.vx*=m;p.vy*=m;}
   p.x+=p.vx*s;p.y+=p.vy*s;
   if(p.x<L+rr){p.x=L+rr;if(p.vx<0)p.vx*=-.34;p.vy*=.97;}
   if(p.x>R-rr){p.x=R-rr;if(p.vx>0)p.vx*=-.34;p.vy*=.97;}
   if(p.y<T+rr){p.y=T+rr;if(p.vy<0)p.vy*=-.34;p.vx*=.97;}
   if(p.y>B-rr){p.y=B-rr;if(p.vy>0)p.vy*=-.34;p.vx*=.96;}
  }
 }
}
function draw(){
 g.fillStyle='#070b16';g.fillRect(0,0,W,H);
 g.save();
 g.beginPath();g.rect(L-2,T-2,R-L+4,B-T+4);g.clip();
 g.globalCompositeOperation='lighter';
 for(let i=0;i<N;i++){const p=P[i];g.drawImage(sp,p.x-23,p.y-23,46,46);}
 for(let i=0;i<N;i++){const p=P[i];
  g.fillStyle='rgba(190,240,255,.16)';g.beginPath();g.arc(p.x,p.y,4.5,0,6.283);g.fill();}
 g.restore();
 g.strokeStyle='rgba(150,200,255,.4)';g.lineWidth=3;
 g.strokeRect(L-4,T-4,R-L+8,B-T+8);
 const deg=ang*180/Math.PI;
 g.fillStyle='#d3e8ff';g.font='600 17px system-ui,sans-serif';
 g.fillText('Tilt: '+(deg>=0?'+':'')+deg.toFixed(1)+'°',L-4,T-16);
 g.font='400 12px system-ui,sans-serif';g.fillStyle='rgba(150,190,230,.7)';
 g.fillText('gravity',R-74,T-16);
 const cx=R-24,cy=T-22;
 g.strokeStyle='rgba(120,200,255,.85)';g.lineWidth=2;g.beginPath();
 g.moveTo(cx-Math.sin(ang)*9,cy-Math.cos(ang)*9);
 g.lineTo(cx+Math.sin(ang)*9,cy+Math.cos(ang)*9);g.stroke();
 g.beginPath();g.arc(cx+Math.sin(ang)*9,cy+Math.cos(ang)*9,3,0,6.283);
 g.fillStyle='rgba(120,200,255,.9)';g.fill();
}
let last=0;
function loop(ts){
 const dt=Math.min(.033,(ts-last)/1000||.016);last=ts;
 t+=dt;step(dt);draw();
 if(t>dur)init();
 requestAnimationFrame(loop);
}
init();requestAnimationFrame(loop);
</script>
</body>
</html>

GPT-5.5 (Codex)frontier referenceOKMINIFIED

Show code

<!doctype html><html><head><meta charset=utf-8><title>Slosh</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#111}canvas{display:block;width:100vw;height:100vh}.hud{position:fixed;left:16px;top:14px;color:#dff;font:18px system-ui;text-shadow:0 1px 4px #000}</style></head><body><canvas id=c></canvas><div class=hud id=h></div><script>
let c=document.getElementById('c'),x=c.getContext('2d'),h=document.getElementById('h'),W,H,S,P=[],N=200,t=0,box;
function R(){W=c.width=innerWidth*devicePixelRatio;H=c.height=innerHeight*devicePixelRatio;S=Math.min(W,H);box={x:W/2-S*.33,y:H/2-S*.38,w:S*.66,h:S*.76};x.setTransform(1,0,0,1,0,0)}
onresize=R;R();
function init(){P=[];let cols=20,sp=S*.018;for(let i=0;i<N;i++){let a=i%cols,b=i/cols|0;P.push({x:box.x+box.w*.25+a*sp+Math.random()*sp,y:box.y+box.h*.18+b*sp+Math.random()*sp,vx:(Math.random()-.5)*60,vy:0})}}init();
let last=performance.now();
function step(now){let dt=Math.min((now-last)/1000,.025);last=now;t+=dt;let ang=Math.sin(t*1.45)*.72,g=900,px=Math.sin(ang)*g,py=Math.cos(ang)*g,r=S*.016,rr=r*r*5.8,coh=.18,rep=1400;
for(let p of P){p.vx+=px*dt;p.vy+=py*dt}
for(let i=0;i<N;i++)for(let j=i+1;j<N;j++){let a=P[i],b=P[j],dx=b.x-a.x,dy=b.y-a.y,d2=dx*dx+dy*dy;if(d2<rr&&d2>.01){let d=Math.sqrt(d2),nx=dx/d,ny=dy/d,q=1-d/Math.sqrt(rr),f=(rep*q*q-coh*d)*dt;a.vx-=nx*f;b.vx+=nx*f;a.vy-=ny*f;b.vy+=ny*f}}
for(let p of P){p.vx*=.992;p.vy*=.992;p.x+=p.vx*dt;p.y+=p.vy*dt;let e=.42;if(p.x<box.x+r){p.x=box.x+r;p.vx=Math.abs(p.vx)*e}if(p.x>box.x+box.w-r){p.x=box.x+box.w-r;p.vx=-Math.abs(p.vx)*e}if(p.y<box.y+r){p.y=box.y+r;p.vy=Math.abs(p.vy)*e}if(p.y>box.y+box.h-r){p.y=box.y+box.h-r;p.vy=-Math.abs(p.vy)*e}}
draw(ang,r);if(t>1e6){t=0;init()}requestAnimationFrame(step)}
function draw(ang,r){x.clearRect(0,0,W,H);x.save();x.lineWidth=S*.012;x.strokeStyle='#ccd';x.fillStyle='#171b1e';x.beginPath();x.roundRect(box.x,box.y,box.w,box.h,S*.025);x.fill();x.stroke();x.clip();x.globalCompositeOperation='lighter';for(let p of P){let gr=x.createRadialGradient(p.x,p.y,0,p.x,p.y,r*2.3);gr.addColorStop(0,'rgba(64,190,255,.55)');gr.addColorStop(1,'rgba(64,190,255,0)');x.fillStyle=gr;x.beginPath();x.arc(p.x,p.y,r*2.3,0,7);x.fill()}x.globalCompositeOperation='source-over';x.filter='blur('+r*.65+'px)';x.fillStyle='rgba(50,165,235,.58)';for(let p of P){x.beginPath();x.arc(p.x,p.y,r*1.7,0,7);x.fill()}x.filter='none';x.restore();x.strokeStyle='rgba(255,255,255,.22)';x.lineWidth=S*.003;x.beginPath();x.roundRect(box.x,box.y,box.w,box.h,S*.025);x.stroke();h.textContent='tilt '+(ang*180/Math.PI).toFixed(1)+'°'}requestAnimationFrame(step)
</script></body></html>

Claude Sonnet 5frontier referenceOK

Show code

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Sloshing Water</title><style>
html,body{margin:0;height:100%;background:#111;display:flex;align-items:center;justify-content:center;font-family:sans-serif}
#wrap{position:relative}
#hud{position:absolute;top:8px;left:8px;color:#9cf;font-size:14px;pointer-events:none}
canvas{background:#0b1622;border:2px solid #2a3a4a;border-radius:6px}
</style></head><body>
<div id="wrap"><canvas id="c" width="640" height="420"></canvas><div id="hud">Tilt: 0.0&deg;</div></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('hud');
const W=cv.width,H=cv.height,N=200,R=5;
let pts=[],t=0,lastTheta=0;
function init(){
 pts=[];
 for(let i=0;i<N;i++){
  pts.push({x:W/2+(Math.random()-0.5)*160,y:40+Math.random()*120,vx:(Math.random()-0.5)*2,vy:0});
 }
 t=0;
}
init();
function step(){
 t+=16;
 if(t>24000){init();return lastTheta;}
 const theta=0.5*Math.sin(t*0.0007);
 lastTheta=theta;
 const g=0.35,gx=g*Math.sin(theta),gy=g*Math.cos(theta);
 for(const p of pts){p.vx+=gx;p.vy+=gy;}
 for(let i=0;i<N;i++){
  const a=pts[i];
  for(let j=i+1;j<N;j++){
   const b=pts[j];
   const dx=b.x-a.x,dy=b.y-a.y,d2=dx*dx+dy*dy;
   if(d2>400||d2<0.0001)continue;
   const d=Math.sqrt(d2),nx=dx/d,ny=dy/d;
   const rest=10;
   const f=d<rest?(rest-d)*0.06:-(d-rest)*0.012;
   a.vx-=nx*f;a.vy-=ny*f;
   b.vx+=nx*f;b.vy+=ny*f;
  }
 }
 for(const p of pts){
  p.vx*=0.985;p.vy*=0.985;
  const sp=Math.hypot(p.vx,p.vy);
  if(sp>6){p.vx=p.vx/sp*6;p.vy=p.vy/sp*6;}
  p.x+=p.vx;p.y+=p.vy;
  if(p.x<R){p.x=R;p.vx*=-0.35;}
  if(p.x>W-R){p.x=W-R;p.vx*=-0.35;}
  if(p.y<R){p.y=R;p.vy*=-0.35;}
  if(p.y>H-R){p.y=H-R;p.vy*=-0.35;}
 }
 return theta;
}
function draw(theta){
 ctx.clearRect(0,0,W,H);
 ctx.globalCompositeOperation='lighter';
 for(const p of pts){
  const grd=ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,10);
  grd.addColorStop(0,'rgba(70,170,255,0.85)');
  grd.addColorStop(1,'rgba(30,90,200,0)');
  ctx.fillStyle=grd;
  ctx.beginPath();ctx.arc(p.x,p.y,10,0,6.3);ctx.fill();
 }
 ctx.globalCompositeOperation='source-over';
 hud.textContent='Tilt: '+(theta*180/Math.PI).toFixed(1)+'°';
}
function loop(){
 const theta=step();
 draw(theta);
 requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script></body></html>

Claude Fable 5frontier referenceOK

Show code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sloshing Water</title>
<style>
html,body{margin:0;height:100%;background:#060b16;overflow:hidden;font-family:monospace}
#c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:blur(5px) contrast(22) saturate(1.3);border-radius:10px}
#box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:3px solid #3d5f8f;border-radius:12px;pointer-events:none;box-shadow:0 0 30px #123 inset}
#a{position:fixed;top:16px;left:50%;transform:translateX(-50%);color:#9fd4ff;font-size:18px;letter-spacing:1px;text-shadow:0 0 8px #1a5}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="box"></div>
<div id="a"></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),B=document.getElementById('box'),A=document.getElementById('a');
const W=cv.width=Math.max(320,Math.min(innerWidth*.82|0,620));
const H=cv.height=Math.max(240,Math.min(innerHeight*.72|0,430));
B.style.width=W+'px';B.style.height=H+'px';
const sp=document.createElement('canvas');sp.width=sp.height=48;
const sc=sp.getContext('2d');
const gr=sc.createRadialGradient(24,24,2,24,24,24);
gr.addColorStop(0,'rgba(150,220,255,1)');
gr.addColorStop(.45,'rgba(60,150,255,.6)');
gr.addColorStop(1,'rgba(30,100,255,0)');
sc.fillStyle=gr;sc.fillRect(0,0,48,48);
const N=200,PR=6,h=22,h2=36,G=1000,KREP=2600,KCOH=160,VISC=.12;
const px=new Float32Array(N),py=new Float32Array(N),vx=new Float32Array(N),vy=new Float32Array(N);
function reset(){
 const cx=W*(.25+Math.random()*.5),spread=W*(.35+Math.random()*.25);
 for(let i=0;i<N;i++){
  px[i]=Math.max(PR,Math.min(W-PR,cx+(Math.random()-.5)*2*spread));
  py[i]=H*(.4+Math.random()*.15)+Math.random()*H*.4;
  if(py[i]>H-PR)py[i]=H-PR-Math.random()*20;
  vx[i]=(Math.random()-.5)*80;vy[i]=(Math.random()-.5)*40;
 }
}
reset();
let t0=performance.now(),T=0,lastReset=0;
const phase=Math.random()*6.28;
function frame(now){
 let dt=Math.min((now-t0)/1000,.033);t0=now;T+=dt;
 if(T-lastReset>40){reset();lastReset=T;}
 const ang=.62*Math.sin(T*.9+phase);
 const gx=Math.sin(ang)*G,gy=Math.cos(ang)*G;
 const sd=dt/3;
 for(let s=0;s<3;s++){
  for(let i=0;i<N;i++){vx[i]+=gx*sd;vy[i]+=gy*sd;}
  for(let i=0;i<N;i++){
   const xi=px[i],yi=py[i];
   for(let j=i+1;j<N;j++){
    let dx=px[j]-xi;if(dx>h2||dx<-h2)continue;
    let dy=py[j]-yi;if(dy>h2||dy<-h2)continue;
    const d2=dx*dx+dy*dy;
    if(d2>h2*h2||d2<1e-6)continue;
    const d=Math.sqrt(d2),nx=dx/d,ny=dy/d;
    let f=-KCOH*(1-d/h2);
    if(d<h){const q=1-d/h;f+=KREP*q*q;
     const u=(vx[i]-vx[j])*nx+(vy[i]-vy[j])*ny;
     if(u>0){const I=u*VISC;vx[i]-=nx*I;vy[i]-=ny*I;vx[j]+=nx*I;vy[j]+=ny*I;}
    }
    const imp=f*sd;
    vx[i]-=nx*imp;vy[i]-=ny*imp;vx[j]+=nx*imp;vy[j]+=ny*imp;
   }
  }
  for(let i=0;i<N;i++){
   const s2=vx[i]*vx[i]+vy[i]*vy[i];
   if(s2>640000){const m=800/Math.sqrt(s2);vx[i]*=m;vy[i]*=m;}
   vx[i]*=.999;vy[i]*=.999;
   px[i]+=vx[i]*sd;py[i]+=vy[i]*sd;
   if(px[i]<PR){px[i]=PR;if(vx[i]<0)vx[i]*=-.35;}
   else if(px[i]>W-PR){px[i]=W-PR;if(vx[i]>0)vx[i]*=-.35;}
   if(py[i]>H-PR){py[i]=H-PR;if(vy[i]>0)vy[i]*=-.3;vx[i]*=.985;}
   else if(py[i]<PR){py[i]=PR;if(vy[i]<0)vy[i]*=-.3;}
  }
 }
 ctx.globalCompositeOperation='source-over';
 ctx.fillStyle='#060e1c';ctx.fillRect(0,0,W,H);
 ctx.globalCompositeOperation='lighter';
 for(let i=0;i<N;i++)ctx.drawImage(sp,px[i]-24,py[i]-24);
 A.textContent='Tilt: '+(ang*180/Math.PI).toFixed(1)+'°';
 requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script>
</body>
</html>

Claude Haiku 4.5frontier referenceOKMINIFIED

Show code

<!DOCTYPE html><html><head><style>body{margin:0;background:#000;display:flex;justify-content:center;align-items:center;height:100vh}#c{border:1px solid #fff}#i{position:absolute;top:10px;color:#fff;font:9pt monospace}</style></head><body><canvas id=c width=600 height=400></canvas><div id=i>Tilt: 0°</div><script>
const c=document.getElementById('c'),x=c.getContext('2d'),i=document.getElementById('i');let p=[],t=0;const n=200,g=.3,r=.5,h=.05,f=.98,cX=50,cY=50,cW=500,cH=300;function init(){p=[];for(let j=0;j<n;j++)p.push({x:cX+cW*.4+Math.random()*cW*.2,y:cY+cH*.3+Math.random()*cH*.3,vx:0,vy:0})}function upd(){t++;const tl=Math.sin(t*.01)*30,tr=tl*Math.PI/180,gx=Math.sin(tr)*g,gy=Math.cos(tr)*g;for(let j=0;j<n;j++){const q=p[j];q.vx*=f;q.vy*=f;q.vx+=gx;q.vy+=gy;for(let k=j+1;k<n;k++){const s=p[k],dx=s.x-q.x,dy=s.y-q.y,d=Math.sqrt(dx*dx+dy*dy),m=8;if(d<m&&d>.1){const a=Math.atan2(dy,dx),fr=(m-d)/m,rp=fr*r,ch=fr*h*-.1;q.vx-=Math.cos(a)*rp;q.vy-=Math.sin(a)*rp;s.vx+=Math.cos(a)*rp;s.vy+=Math.sin(a)*rp;q.vx+=Math.cos(a)*ch;q.vy+=Math.sin(a)*ch;s.vx-=Math.cos(a)*ch;s.vy-=Math.sin(a)*ch}}q.x+=q.vx;q.y+=q.vy;if(q.x<cX){q.x=cX;q.vx*=-.8}if(q.x>cX+cW){q.x=cX+cW;q.vx*=-.8}if(q.y<cY){q.y=cY;q.vy*=-.8}if(q.y>cY+cH){q.y=cY+cH;q.vy*=-.8}}i.textContent=`Tilt: ${tl.toFixed(1)}°`}function draw(){x.fillStyle='#001';x.fillRect(0,0,c.width,c.height);x.strokeStyle='#fff';x.lineWidth=2;x.strokeRect(cX,cY,cW,cH);x.globalAlpha=.4;x.globalCompositeOperation='lighter';x.fillStyle='#0ff';for(let q of p){x.beginPath();x.arc(q.x,q.y,3,0,6.28);x.fill()}x.globalAlpha=1;x.globalCompositeOperation='source-over'}function loop(){upd();draw();if(t>1000){init();t=0}requestAnimationFrame(loop)}init();loop();
</script></body></html>

Results at a glance— every model in this round with score, response time and status.

Who wrote what

Model	Blind score	Latency	Status
llama3.1:8b	—	81.2 s	OK
mistral-small:24b	—	110.5 s	OK
qwen3.5:9b	—	62.8 s	OK
qwen3-coder:30b	—	26.9 s	OK
deepseek-r1:14b	—	33.9 s	OK
qwen3:14b	—	31.2 s	OK
gemma4:26b	—	—	harness
qwen3:8b	—	—	harness
qwq:32b	—	—	DNF
deepseek-r1:32b	—	52.8 s	OK
command-r:35b	—	—	DNF