MODEL Aqwen3:8bDNF
No usable answer reached the harness (ERR). Counted as a did-not-finish.
Code · blind round
R95 · Shaded sphere by painter's algorithm
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 renders a rotating sphere on a <canvas> without any 3D library: distribute several hundred points evenly over the sphere surface, rotate them, sort them by depth and draw them back to front as filled discs, shading each one by the angle between its surface normal and a fixed light direction so the lit side is bright and the far side falls into shadow. Show the point count. 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
Show code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Sphere Renderer</title>
<style>body { background: #111; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }</style>
</head>
<body>
<canvas id="sphereCanvas"></canvas>
<script>
const canvas = document.getElementById('sphereCanvas');
const ctx = canvas.getContext('2d');
let POINT_COUNT = 3500; // Target point count
const R = 150; // Sphere radius (projection scale)
const PADDING = 4; // Padding for display text
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.9;
let points = [];
let angleA = Math.PI / 6; // Rotation around Y axis
let angleB = Math.PI / 12; // Rotation around X axis
function generatePoints() {
points = [];
for (let i = 0; i < POINT_COUNT; i++) {
const phi = Math.acos(Math.random() * 2 - 1);
const theta = Math.random() * 2 * Math.PI;
// Initial spherical coordinates on a unit sphere
points.push({
x: Math.sin(phi) * Math.cos(theta),
y: Math.sin(phi) * Math.sin(theta),
z: Math.cos(phi)
});
}
}
function projectAndRender() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Light direction (fixed relative to the camera/world origin)
const L = new THREE.Vector3(-0.5, -0.8, 1.0).normalize();
// Step 1: Transform and calculate depth/shading for all points
let visiblePoints = [];
for (const p of points) {
// Apply rotation transformations
// Rotation around Y (angleA)
let x_rot = p.x * Math.cos(angleA) - p.z * Math.sin(angleA);
let z_temp = p.x * Math.sin(angleA) + p.z * Math.cos(angleA);
// Rotation around X (angleB)
let x = x_rot;
let y = p.y + z_temp * Math.sin(angleB);
let z = z_temp * Math.cos(angleB) - p.y * Math.sin(angleB);
// Calculate Normal (N) and Intensity (I)
const N = { x: x, y: y, z: z }; // Normalized position is the normal
let intensity = Math.max(0, N.x * L.x + N.y * L.y + N.z * L.z);
// Simple distance check (points behind camera are discarded)
if (z > 0.1) {
visiblePoints.push({ x: x, y: y, z: z, intensity: Math.min(1.0, intensity) });
}
}
// Step 2: Sort points by depth (Z-coordinate) - Back to Front
visiblePoints.sort((a, b) => b.z - a.z);
// Step 3: Draw sorted points
for (const p of visiblePoints) {
// Screen projection (Orthographic/Perspective scaling)
let screenX = p.x * R;
let screenY = p.y * R;
// Disc size proportional to intensity
let radius = Math.max(0.5, 1 + p.intensity * 2);
// Calculate color: bright (white/yellow) when lit, dark blue/black in shadow
const alpha = p.intensity;
ctx.fillStyle = `rgba(${Math.floor(255 * Math.max(0.3, p.intensity))}, ${Math.floor(100 * Math.min(1.0, p.intensity))} , ${Math.floor(255 - 255 * p.intensity)} , ${alpha})`;
ctx.beginPath();
ctx.arc(screenX, screenY, radius, 0, Math.PI * 2);
ctx.fill();
}
// Display Point Count
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.font = '16px monospace';
ctx.fillText(`Points: ${visiblePoints.length}`, PADDING, PADDING);
}
function animate() {
// Update rotation angles smoothly
angleA += 0.003;
angleB += 0.002;
projectAndRender();
requestAnimationFrame(animate);
}
// Custom Vector class for readability and math (used only internally)
function THREE() { return {
Vector3: function(x, y, z) { this.x = x || 0; this.y = y || 0; this.z = z || 0; };
normalize: function() {
const mag = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
if (mag === 0) return this;
this.x /= mag; this.y /= mag; this.z /= mag;
return this;
}
};
// Initialization
generatePoints();
animate();
</script>
</body>
</html>MODEL Cgemma4:26bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
MODEL Dmistral-small:24bDNF
No usable answer reached the harness (TIMEOUT). Counted as a did-not-finish.
Show code
```html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; }
canvas { border: 1px solid black; width: 600px; height: 400px; }
</style>
</head>
<body>
<script>
function rand() {
return Math.random()*2-1;
}
let s = 100, w=300, h=200,
ctx = document.getElementById('c').getContext('2d'),
points = [], cnt=0;
function makePoints(n) {
for(let i=0;i<n;i++) {
var x,y,z,d;
do {x=w*rand();y=h*rand();z=s*rand(); d=x*x+y*y+z*z}
while(d>1);
points.push([x+Math.cos(Math.acos(z/s))*w/2, y+Math.sin(Math.acos(z/s))*h/2]);
}
}
function rotatePoints() {
for(let i=0;i<points.length;i++) {
var x=points[i][0],y=points[i][1];
points[i] = [x*Math.cos(t)+y*Math.sin(t), -x*Math.sin(t)+y*Math.cos(t)];
}
}
function sortPoints() {
for (let i = 0; i < points.length; i++) {
var min = i;
for (let j = i + 1; j < points.length; j++) {
if (points[j][1] < points[min][1]) min = j;
}
[points[i], points[min]] = [points[min], points[i]];
}
}
function drawPoints() {
ctx.fillStyle='black';
ctx.fillRect(0,0,w,h);
for(let i=0;i<points.length;i++) {
var x=points[i][0]+w/2,
y=-points[i][1]+h/2,
r=5,sin=(x*Math.cos(t)+y*Math.sin(t))/Math.sqrt(x*x+y*y+1),
c=Math.max(0,1-10*sin*(sin+0.3));
ctx.fillStyle=`rgb(${255*c},${255*c},${255*c})`;
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fill();
}
}
function animate() {
t+=0.01;
rotatePoints();
sortPoints();
drawPoints();
document.getElementById('c').title=points.length;
requestAnimationFrame(animate);
}
let t = 0;
makePoints(200);
ctx.translate(w/2,h/2);
ctx.rotate(t);
document.body.appendChild(document.createElement('canvas')).id='c';
animate();
</script>
</body>
</html>
```Show code
```html
<!DOCTYPE html>
<canvas id="sphereCanvas"></canvas><script>
const canvas = document.getElementById('sphereCanvas');
const c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let points = [];
const N_POINTS = 500; // Point count displayed on screen
let rotationAngle = 0;
let lightDirection = { x: 1, y: -0.5 }; // Fixed light source
// Helper function for random point generation (uniform surface distribution)
function generatePoint(r, theta, phi) {
const r_sph = r * Math.sqrt(Math.random());
const theta_s = Math.acos(-1 + 2 * Math.random()); // Polar angle (0 to pi)
const phi_s = Math.random() * 2 * Math.PI; // Azimuthal angle
return { x: r_sph * Math.sin(theta_s), y: r_sph * Math.cos(theta_s), z: r_sph * Math.cos(theta_s) };
}
function initialize() {
points = [];
const radius = 150;
for (let i = 0; i < N_POINTS; i++) {
// Use a slightly modified approach for uniform distribution of coordinates
const theta = Math.acos(2 * Math.random() - 1);
const phi = Math.random() * 2 * Math.PI;
points.push({ x: radius * Math.sin(theta) * Math.cos(phi), y: radius * Math.sin(theta) * Math.sin(phi), z: radius * Math.cos(theta) });
}
rotationAngle = 0;
}
function updateAndDraw() {
c.clearRect(0, 0, canvas.width, canvas.height);
// Rotation transformation (Simple rotation around Y-axis for effect)
const cosA = Math.cos(rotationAngle);
const sinA = Math.sin(rotationAngle);
let transformedPoints = points.map(p => ({
x: p.x * cosA + p.z * sinA,
y: p.y,
z: -p.x * sinA + p.z * cosA // Note the sign change for z to simulate camera viewing direction
}));
// 1. Calculate Depth and Sort (Z-buffer technique)
let visiblePoints = transformedPoints.map((p, i) => {
const originalP = points[i];
const depth = p.z; // Z is the distance from the camera plane
// Normal vector calculation: N = normalize( (x/R, y/R, z/R) )
let nx = originalP.x / 150;
let ny = originalP.y / 150;
let nz = originalP.z / 150;
// Surface normal components (assuming sphere radius R=150)
let normalX = nx * cosA + nz * sinA;
let normalY = ny;
let normalZ = -nx * sinA + nz * cosA;
// Shading factor: Dot product of Normal and Light Direction (L)
// L is fixed, so we just use the components.
let NdotL = normalX * lightDirection.x + normalY * lightDirection.y + normalZ * lightDirection.z;
return { p: p, depth: depth, n: Math.max(-1, Math.min(1, NdotL)) }; // Clamp shading between 0 and 1
});
// Sort by Z (depth) ascending distance means drawing back-to-front requires DESCENDING sort on the z coordinate
visiblePoints.sort((a, b) => b.depth - a.depth);
// 2. Drawing Phase
for (const vp of visiblePoints) {
const p = vp.p;
let shade = vp.n * 0.5 + 0.5; // Remap dot product from [-1, 1] to [0, 1] brightness
// Calculate color based on shading (e.g., dark blue/grey background)
c.fillStyle = `rgb(${Math.floor(shade * 255)}, ${Math.floor(Math.max(10, shade*100))}, ${Math.floor(Math.min(255, Math.ceil(shade*255)))})`;
// Project to screen and draw disc
c.beginPath();
c.arc(p.x, p.y, 2, 0, Math.PI * 2); // Radius of the disc
c.fill();
}
rotationAngle += 0.01;
requestAnimationFrame(updateAndDraw);
}
// Initialization and Start
initialize();
updateAndDraw();
</script>
```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></canvas>
<script>
const canvas=document.getElementById('c'), ctx=canvas.getContext('2d');
const W=400,H=400,N=500,points=[],r=80;
function init(){for(let i=0;i<N;i++){let u=Math.random()*Math.PI*2,v=Math.random()*Math.PI;let x=r*Math.cos(u)*Math.sin(v),y=r*Math.sin(u)*Math.sin(v),z=r*Math.cos(v);points.push({x,y,z,u:v,T:i/5})}canvas.width=W(canvas.style.width=''),canvas.height=H}
function deg(c){return c.slice(-1)+'0'+c.slice(0,-1)} // viewport transform
function project(x,y,z,s,cx,W,H,k=200){return{x:k*(cx.x*s+z)/z+W/2,y:k*(cx.y*s+z)/z+H/2}}
function dot(a,b){return a.x*b.x+a.y*b.y+a.z*b.z}
const light={x:1,y:0,z:0},vup={x:0,y:1,z:0};
let time=0,renderFrame;
function render(){if(!points.length)init();ctx.fillStyle='white';ctx.beginPath();points.sort((a,b)=>a.T-b.T).forEach(p=>{p.x+=Math.sin(time+p.u/5),p.y+=Math.cos(time+p.u/10);const R={x:Math.cos(time+p.u*2),y:p.z/r};const s=dot(R,{x:light.x,y:light.y,z:light.z}*2+1)/2+1;ctx.beginPath();const pos=project(p.x,p.y,p.z,r, {x:W/2,y:H/2}, W, H); ctx.arc(pos.x,pos.y,3*(r/(z+p.z*r)),0,2*Math.PI); ctx.fillStyle=`rgba(1,1,1,${'s'})`.replace('s',s.toString());ctx.fill()}); ctx.font='16px Arial';ctx.fillStyle='white';ctx.fillText(points.length+' points',10,20)}
function animate(){time+=0.03;requestAnimationFrame(animate);render()}
window.onload=init;
</script>
```
This code creates a rotating sphere with 500 points using only HTML Canvas and JavaScript. The points are distributed evenly over the sphere's surface, shaded based on their angle to a fixed light direction, and rendered in order from farthest to closest to create depth perception. The animation runs smoothly at 60 FPS without any external libraries or dependencies.
Key features:
- Pure JavaScript implementation
- Rotating sphere with shading using dot product lighting
- Points rendered from back to front for proper occlusion
- Smooth animation using requestAnimationFrame
- Dynamic point count display
- No external resources or dependencies
- Optimized for minimal code size
The sphere rotates continuously and restarts when it finishes a full rotation. The points are shaded based on their orientation relative to the light direction, creating a realistic lighting effect.
Note: Character count is kept to 7000 by removing unnecessary characters, combining lines where possible, and using minimal whitespace.Show code
```html
<!DOCTYPE html>
<html>
<head><title>Spherical Mesh Renderer</title></head>
<body style="background-color:#000;margin:0;overflow:hidden;"><canvas id="c" width="600" height="600" style="display:block;"></canvas><script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let points = [];
let rotationAngleA = 0;
let rotationAngleB = 0;
const POINT_COUNT = 800;
function init() {
points = [];
for (let i = 0; i < POINT_COUNT; i++) {
// Generate uniform points on a unit sphere using spherical coordinates
let phi = Math.acos(Math.random() * 2 - 1); // Inclination angle [0, pi]
let theta = Math.random() * 2 * Math.PI; // Azimuthal angle [0, 2pi]
const R = 150; // Sphere radius for drawing
points.push({
x: R * Math.sin(phi) * Math.cos(theta),
y: R * Math.sin(phi) * Math.sin(theta),
z: R * Math.cos(phi)
});
}
rotationAngleA = 0;
rotationAngleB = 0;
}
function draw() {
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Update rotation angles for animation
rotationAngleA += 0.015;
rotationAngleB += 0.02;
const lightDir = { x: 1, y: -0.8, z: 1 }; // Fixed light source direction (normalized implicitly)
const drawData = [];
for (let p of points) {
// Apply rotations (assuming Y-axis rotation for A and X-axis for B)
let x = p.x * Math.cos(rotationAngleA) - p.y * Math.sin(rotationAngleA);
let y = p.x * Math.sin(rotationAngleA) + p.y * Math.cos(rotationAngleA);
let z = p.z;
// Second rotation (around the new Y axis: Z -> X, X -> -Z)
let nx = x;
let ny = y * Math.cos(rotationAngleB) - z * Math.sin(rotationAngleB);
let nz = y * Math.sin(rotationAngleB) + z * Math.cos(rotationAngleB);
// Perspective Projection (simplified: using Z for depth and scaling X/Y by 1/Z)
const scaleFactor = 25 / (nz + 300); // Add offset to prevent division by zero/instability
let screenX = canvas.width / 2 + nx * scaleFactor;
let screenY = canvas.height / 2 - ny * scaleFactor;
// Depth and Shading Calculation: Use the dot product of normalized point vector (nx, ny, nz) and lightDir
// Normalizing helps for consistent lighting regardless of radius scaling
const magnitude = Math.sqrt(nx*nx + ny*ny + nz*nz);
let p_x = nx / magnitude;
let p_y = ny / magnitude;
let p_z = nz / magnitude;
// Calculate intensity (Lambertian reflectance)
let dotProduct = Math.max(0, p_x * lightDir.x + p_y * lightDir.y + p_z * lightDir.z);
drawData.push({
x: screenX, y: screenY, depth: nz, intensity: dotProduct
});
}
// Sort by depth (furthest objects first) to ensure proper occlusion drawing
drawData.sort((a, b) => b.depth - a.depth);
// Draw points back-to-front
ctx.globalCompositeOperation = 'lighter';
for (let d of drawData) {
const radius = Math.max(0.5, d.intensity * 3); // Max size adjusted by lighting
let alpha = Math.min(1, d.intensity * 2 + 0.1);
ctx.fillStyle = `rgba(${Math.floor(d.intensity*255)}, ${Math.floor(d.intensity*255)}, ${Math.floor(d.intensity*255)}, ${alpha})`;
ctx.beginPath();
ctx.arc(d.x, d.y, radius, 0, Math.PI * 2);
ctx.fill();
}
// Draw Info Text
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.font = '14px Arial';
ctx.fillText(`Points: ${POINT_COUNT}`, 10, 20);
requestAnimationFrame(draw);
}
// Start the animation loop
init();
draw();
</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 label | Model | Blind score | Latency | Status |
|---|---|---|---|---|
| MODEL A | qwen3:8b | — | — | harness |
| MODEL B | qwen3:14b | — | 41.0 s | OK |
| MODEL C | gemma4:26b | — | — | harness |
| MODEL D | mistral-small:24b | — | — | DNF |
| MODEL E | llama3.1:8b | — | 126.1 s | OK |
| MODEL F | qwen3-coder:30b | — | 19.2 s | OK |
| MODEL G | deepseek-r1:14b | — | 57.3 s | OK |
| MODEL H | qwen3.5:9b | — | 46.3 s | OK |