Overview › Code › R126
Code · blind round

R126 · Bubble sort sweeping bars into order

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 bubble sort on a <canvas>: around 80 vertical bars of random heights, highlighting the pair currently being compared, visibly swapping bars step by step, and marking the already-sorted tail in a distinct color. Animate a few comparison steps per frame so the sweep stays watchable. Show the number of comparisons so far. 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)
deepseek-r1:14bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><body style="margin:0;display:flex;flex-direction:column;align-items:center;background:#1a1a1a;">
<canvas id=c width=100% height=200></canvas>
<div id=d style="color:white;font-size:16px;margin-top:5px;">Comparisons: 0</div>

<script>
let c=document.getElementById('c'), ctx=c.getContext('2d'), bars=[],n=80,w=n*4,h=45,a,i,x,y,z,comp=0,s=0;
function init(){for(i=0;i<n;bars.push(Math.random()*h))}init();
function drawBar(x,y,w,h,c){ctx.fillStyle=c;ctx.fillRect(x,y,w,h)}
function draw(){for(i=0;i<n-1-s;bars[i]>(bars[i+1])&&(swapBars(i,i+1))){comp++;document.getElementById('d').textContent='Comparisons: '+comp}}
function swapBars(a,b){let x0=i*4,y0=0,x1=(i+1)*4;while(y0<h/2){requestAnimationFrame(_=>{ctx.clearRect(0,0,c.width,c.height);draw();})}}
animate();

</script>
</body></html>
```
qwen3-coder:30bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><head><title>Bubble Sort Animation</title></head><body style="margin:0;overflow:hidden"><canvas id="sortCanvas" width="800" height="400" style="background:#111;display:block;"></canvas><script>
const canvas = document.getElementById('sortCanvas');
const ctx = canvas.getContext('2d');

let array = [];
let n = 80; // Number of bars
let barWidth = (canvas.width - gap * (n - 1)) / n;
let gap = 1; // Gap between bars

// State variables for the animation simulation
let state = {
    sortedBoundary: n, // Bars from this index onwards are sorted
    i: 0, // Current outer loop index
    j: 1, // Current inner loop comparison index (j=i+1)
    isSwapping: false,
    swapCount: 0,
    comparisons: 0,
    finished: false
};

function initializeArray() {
    array = Array.from({ length: n }, () => Math.floor(Math.random() * 300) + 50);
    state = { sortedBoundary: n, i: 0, j: 1, isSwapping: false, swapCount: 0, comparisons: 0, finished: false };
}

function drawBars() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const bars = [];
    for (let k = 0; k < n; k++) {
        bars[k] = { x: k * (barWidth + gap), y: 0, height: array[k], width: barWidth };
    }

    // Draw sorted tail
    if (state.sortedBoundary < n) {
        for (let k = state.sortedBoundary; k < n; k++) {
            ctx.fillStyle = '#4CAF50'; // Green for sorted
            ctx.fillRect(bars[k].x, 0, bars[k].width, bars[k].height);
        }
    }

    // Draw dynamic elements (comparison/swap)
    if (state.isSwapping) {
        const swapTarget = state.swapTarget;
        ctx.fillStyle = '#FFEB3B'; // Yellow for swapping pair visualization
        ctx.fillRect(bars[swapTarget.i].x, 0, bars[swapTarget.i].width, array[swapTarget.i]);
        ctx.fillRect(bars[swapTarget.j].x, 0, bars[swapTarget.j].width, array[swapTarget.j]);
    } else if (state.j > 0 && state.j < n - (n - state.sortedBoundary)) {
        // Highlight the currently compared pair
        ctx.fillStyle = '#FFA726'; // Orange for comparison
        ctx.fillRect(bars[state.j - 1].x, 0, bars[state.j - 1].width, array[state.j - 1]);
        ctx.fillRect(bars[state.j].x, 0, bars[state.j].width, array[state.j]);
    }

    // Draw all bars (background color)
    for (let k = 0; k < n; k++) {
        if (!state.isSwapping || k !== state.swapTarget.i && k !== state.swapTarget.j) {
            ctx.fillStyle = '#2196F3'; // Blue for unsorted/normal
            ctx.fillRect(bars[k].x, 0, bars[k].width, array[k]);
        }
    }
}

/** Core Animation Logic */
function bubbleSortStep() {
    if (state.finished) {
        initializeArray();
    }

    // Check if the outer loop is finished (meaning Bubble Sort is complete)
    if (state.i >= n - 2) {
        state.isSwapping = false;
        state.sortedBoundary = n - state.i; // Update sorted boundary
        state.finished = true;
        drawBars();
        document.getElementById('comparisons').textContent = `Comparisons: ${state.comparisons}`;
        return requestAnimationFrame(bubbleSortStep);
    }

    // --- Bubble Sort Logic Step Management ---

    if (state.isSwapping) {
        // Swap finished, move to next comparison/pass step
        state.isSwapping = false;
        state.swapCount++;

        // If we are still within the current pass (i), increment j and check bounds
        if (state.j < n - 1 && state.j <= n - state.sortedBoundary) {
            state.j++;
            state.comparisons++;
        } else {
             // Pass finished, move to next outer pass (increase sorted boundary)
            state.i++;
            state.j = state.i + 1;
            state.sortedBoundary = n - state.i; // The largest element is now in place
        }

    } else if (!state.isSwapping && state.j < n - 1 && state.j <= n - state.sortedBoundary) {
        // --- Compare (array[j-1] and array[j]) ---
        const j_minus_1 = state.j - 1;
        const j_current = state.j;

        state.comparisons++;

        if (array[j_minus_1] > array[j_current]) {
            // SWAP NEEDED! Trigger swap animation sequence
            state.isSwapping = true;
            state.swapTarget = { i: j_minus_1, j: j_current };
            
            // Perform the actual logical swap immediately for visualization purposes (the next frame will draw it)
            [array[j_minus_1], array[j_current]] = [array[j_current], array[j_minus_1]];

        } else {
            // No swap needed, just advance pointers
            state.j++;
        }
    }
    
    drawBars();
    document.getElementById('comparisons').textContent = `Comparisons: ${state.comparisons}`;

    // Schedule the next step
    requestAnimationFrame(bubbleSortStep);
}


// Initialization and Setup
window.onload = () => {
    initializeArray();
    
    const container = document.createElement('div');
    container.style.textAlign = 'center';
    container.innerHTML = `<h2 style="color:#FFF;">Bubble Sort Animation</h2><p id="comparisons" style="font-size:1.5em; color:#FFEB3B;">Comparisons: 0</p>`;
    document.body.appendChild(container);

    // Start the animation loop
    requestAnimationFrame(bubbleSortStep);
};
</script></body></html>
```
mistral-small:24bERRSTATFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bubble Sort Animation</title>
<style>
body {margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0;}
canvas {border: 1px solid black;}
</style>
</head>
<body>
<canvas id="bubbleSortCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('bubbleSortCanvas');
const ctx = canvas.getContext('2d');
let bars = [];
let comparisons = 0;
let sortStepInterval = null;
function generateBars() {bars = Array.from({length: 80}, () => Math.floor(Math.random() * 500) + 10);}
function drawBars() {ctx.clearRect(0, 0, canvas.width, canvas.height); bars.forEach((bar, i) => ctx.fillStyle = (i >= bars.length - comparisons || !sortStepInterval) ? 'green' : 'blue');bars.forEach((bar, i) => {ctx.beginPath();ctx.rect(i * 10 + 5, canvas.height - bar, 8, bar);ctx.fill();});}
function bubbleSort() {
    let n = bars.length;
    for (let i = 0; i < n-1; i++) {
        setTimeout(() => {
            for (let j = 0; j < n-i-1; j++) {
                comparisons++;
                drawBars();
                if(bars[j] > bars[j+1]) {
                    [bars[j], bars[j+1]] = [bars[j+1], bars[j]];
                    setTimeout(drawBars, 25);
                }
            }
        }, i * 300 + j * 300);
    }
}
function animateSort() {
    generateBars();
    comparisons = 0;
    drawBars();
    bubbleSort();
    setTimeout(() => {
        sortStepInterval = requestAnimationFrame(animateSort);
    }, 5000);
}
requestAnimationFrame(animateSort);
</script>
</body>
</html>
```
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.
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.5:9bOKFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bubble Sort Visualization</title>
    <style>
        body { background: #1a1a2e; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: sans-serif; color: white; }
        #visualization { display: flex; flex-direction: column; align-items: center; }
        canvas { border: 1px solid #3c3c6e; background: #2a2a4a; }
    </style>
</head>
<body>

<div id="visualization">
    <canvas id="canvas" width="800" height="350"></canvas>
    <p id="info">Comparisons: 0 | Status: Ready</p>
</div>

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

    let bars = [];
    let N = 80; // Number of bars
    let B_WIDTH = 10;
    let maxVal = canvas.height * 0.95;

    // State variables for the sort process
    let arrayState = [];
    let i = 0; // Outer loop counter (pass)
    let j = 0; // Inner loop counter (comparison index)
    let isSorting = false;
    let compCount = 0;

    function initializeArray() {
        bars = [];
        arrayState = [];
        for (let k = 0; k < N; k++) {
            // Random height between 10 and maxVal-10
            const h = Math.floor(Math.random() * (maxVal - 20) + 10);
            bars.push(h);
            arrayState.push(h);
        }
        i = 0;
        j = 0;
        compCount = 0;
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const barWidth = canvas.width / N;

        for (let k = 0; k < N; k++) {
            let height = arrayState[k];
            let color = '#6a4e9b'; // Default color

            // Check for sorted tail (bars[N-1-i] to bars[N-1])
            if (k >= N - 1 - i) {
                color = '#38761d'; // Green: Sorted section
            }
            
            let highlightColor = null;

            // Check for comparison pairs (j and j+1)
            if (j > 0 && k === j - 1) {
                highlightColor = 'yellow'; // Left element being compared
            } else if (k === j) {
                highlightColor = 'red'; // Right element being compared
            }

            ctx.fillStyle = highlightColor || color;
            ctx.fillRect(k * barWidth, canvas.height - height, barWidth - 1, height);
        }
    }

    function updateInfo() {
        let status = isSorting ? `Comparing ${j} and ${j+1}` : 'Finished';
        if (i === 0 && j === 0) {
            status = 'Starting...';
        }
        infoEl.innerHTML = `Comparisons: ${compCount} | Status: ${status}`;
    }

    function swap(a, b) {
        [arrayState[a], arrayState[b]] = [arrayState[b], arrayState[a]];
        bars[a] = arrayState[a];
        bars[b] = arrayState[b];
        return true; // Indicate a swap occurred
    }

    function bubbleSortStep() {
        if (!isSorting) return;

        compCount++;

        // Inner loop (j): Comparison and potential swap
        while (j < N - 1 - i) {
            const left = j;
            const right = j + 1;

            // Highlight the pair currently being checked
            draw();
            updateInfo();

            if (arrayState[left] > arrayState[right]) {
                swap(left, right);
                draw(); // Redraw after swap to show new positions
                updateInfo();
            }
            j++;
        }

        // End of inner loop pass (i)
        j = 0;
        i++;

        // Check for completion
        if (i >= N - 1) {
            isSorting = false;
            infoEl.innerHTML = `Comparisons: ${compCount} | Status: Sorted!`;
            draw(); // Final draw to show all green
            return true; // Signal finished
        }

        // Prepare for next pass/step
        draw(); 
        updateInfo();
        return false; // Not finished
    }

    function animate() {
        if (!isSorting) {
            // If sorting is complete, restart the process
            initializeArray();
            isSorting = true;
        }

        const done = bubbleSortStep();
        draw();
        updateInfo();

        if (done) {
            setTimeout(() => requestAnimationFrame(animate), 500); // Pause before restarting
        } else {
            requestAnimationFrame(animate);
        }
    }

    // Initial setup and start
    initializeArray();
    isSorting = true;
    animate();

</script>
</body>
</html>
```
qwen3:14bERRBLANKMINIFIEDFORMAT
Show code
```html
<!DOCTYPE html>
<canvas id="c"></canvas><script>const c=document.getElementById('c');const ctx=c.getContext('2d');c.width=800;c.height=400;let arr=[];let n=80;let pass=1;let i=0;let j=0;let compCount=0;let isSorting=true;const COLOR_DEFAULT='#336';const COLOR_COMPARE='#ff9900';const COLOR_SWAP='#cc3300';const COLOR_SORTED='#33cc33';function init() {arr=[];for(let k=0;k<n;k++) arr.push(Math.random()*250+10);pass=1;i=0;j=1;compCount=0;isSorting=true;}function draw() {ctx.clearRect(0,0,c.width,c.height);const barWidth=(c.width-10*n)/n;for(let k=0;k<n;k++) {let h=arr[k];let x=10+k*barWidth;let color=COLOR_DEFAULT;if (j===k||j-1===k) color=COLOR_COMPARE;else if ((i>0 && i<=j) || (i-1>=0 && i-1<=j)) {color=COLOR_SWAP;}else if(k >= n-(pass-1)){color=COLOR_SORTED;}}ctx.fillStyle=color;ctx.fillRect(x,c.height-h,'${barWidth}px',h);let text=`Comparisons: ${compCount}<br>Pass: ${pass}`;ctx.fillStyle='#333';ctx.font='14px Arial';ctx.fillText(text,20,30);if (!isSorting && arr[n-1] < 5) {init();}}function bubbleSortStep() {if (j>=n) {i=Math.max(0, i-1);j=i+1;pass++;if(i>=n-1){isSorting=false;}else{/* Continue next pass */}}if (i<n-1 && j<=n-1) {if (arr[i] > arr[j]) {let temp=arr[i];arr[i]=arr[j];arr[j]=temp;compCount++;}else compCount++;}else if (pass > 1 && i >= n-2) {isSorting=false;} else {j=Math.max(0, j-1);}draw();requestAnimationFrame(bubbleSortStep);}}init();bubbleSortStep();</script>
```
llama3.1:8bERRBLANKFORMAT
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>Bubble Sort Animation</title>
<style>
body {
  margin: 0;
  overflow: hidden;
}
canvas {
  display: block;
  width: 100%;
  height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas" width="800"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let numComparisons = 0;

function generateRandomArray() {
  const array = [];
  for (let i = 0; i < 80; i++) {
    array.push(Math.floor(Math.random() * 500));
  }
  return array;
}

function drawArray(arr) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const maxHeight = Math.max(...arr);
  let yScale = canvas.height / maxHeight;

  for (let i = 0; i < arr.length; i++) {
    if (i === arr.length - 1 && isSorted(arr)) {
      ctx.fillStyle = 'green';
    } else {
      ctx.fillStyle = 'black';
    }
    const rectHeight = arr[i] * yScale;
    ctx.fillRect(0, canvas.height - (rectHeight + (arr.length - i) * yScale), 10, rectHeight);
  }

  if (highlighting) {
    for (let i = highlighting[0]; i < highlighting[1]; i++) {
      ctx.fillStyle = 'red';
      const rectHeight = arr[i] * yScale;
      ctx.fillRect(0, canvas.height - (rectHeight + (arr.length - i) * yScale), 10, rectHeight);
    }
  }

  ctx.font = '16px Arial';
  ctx.fillStyle = 'black';
  ctx.textAlign = 'left';
  ctx.fillText(`Comparisons: ${numComparisons}`, 20, 20);

  if (isSorted(arr)) {
    highlightNextPair();
  } else {
    let minIndex = arr.indexOf(Math.min(...arr));
    highlighting = [minIndex, minIndex + 1];
    let swapped = false;
    while (!swapped) {
      swapped = swapElements(arr, highlighting[0], highlighting[1]);
      numComparisons++;
      drawArray(arr);
      ctx.font = '16px Arial';
      ctx.fillStyle = 'black';
      ctx.textAlign = 'left';
      ctx.fillText(`Comparisons: ${numComparisons}`, 20, 20);
      highlighting = [highlighting[0] + 1, highlighting[1] + 1];
    }
    if (arr.length > 2) {
      highlightNextPair();
    } else {
      setTimeout(() => {
        generateRandomArray();
        numComparisons = 0;
        drawArray(arr);
      }, 500);
    }
  }

  requestAnimationFrame(drawArray);
}

function swapElements(arr, i, j) {
  let temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
  return arr[i] > arr[j];
}

let highlighting = [];
let array = generateRandomArray();
drawArray(array);

function highlightNextPair() {
  for (let i = 0; i < array.length - 1; i++) {
    if (!isSorted(array)) {
      const minIndex = array.indexOf(Math.min(...array.slice(i)));
      if (minIndex >= i) {
        highlighting = [i, minIndex + 1];
      } else {
        highlighting = [minIndex, Math.max(minIndex + 1, i)];
      }
    } else {
      highlighting = [0, array.length - 1];
    }
    return;
  }
}

function isSorted(arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    if (arr[i] > arr[i + 1]) {
      return false;
    }
  }
  return true;
}
</script>
</body>
</html>
```
command-r:35bDNF
No usable answer reached the harness (ERR). Counted as a did-not-finish.
qwq:32bDNF
No usable answer reached the harness (ERR). Counted as a did-not-finish.
deepseek-r1:32bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><body style="background:#1a1a1a;margin:0;">
<canvas id=c width=800 height=400></canvas>
<script>
let ctx = c.getContext('2d'), a=[], n=80, w=800/n;
let x,y,k=0,s=1,cnt=0,done=false;

function init() {
a=[];for(let i=0;i<n;)a.push(Math.random());
requestAnimationFrame(draw);
}

function sortStep() {
if(done)return;
for(let i=0;i<4;i++) {
if(k+i>=n-s-1) {s++;k=0;if(s>=n){done=true;break};}
let j=k+i, t=a[j];
if(a[j]<a[j+1]){
ctx.fillStyle='#ff0000';
drawBar(j);drawBar(j+1);
} else {
[a[j],a[j+1]]= [a[j+1],a[j]];
cnt++;drawBar(j);drawBar(j+1);
}
k=j+1;
if(k>=n-s)break;
}}
function draw() {
ctx.fillStyle='#1a1a1a';ctx.fillRect(0,0,800,400);
sortStep();
for(let i=0;i<n;) {
let h=a[i]*350;
i<s? ctx.fillStyle='#2ecc71' : (k==i||k+1==i)? ctx.fillStyle='#e74c3c' : ctx.fillStyle='#ecf0f1';
drawBar(i);
}
ctx.fillStyle='white';ctx.font='20px Arial';ctx.fillText(`Comparisons: ${cnt}`,10,30);
if(!done)requestAnimationFrame(draw);else init();
}

function drawBar(i){
let x=i*w;
ctx.fillRect(x,400-h[i],w,h[i]);
}
init();
</script></body></html>
```
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>Bubble Sort</title>
<style>
html,body{margin:0;height:100%;background:#0b0f18;overflow:hidden}
body{display:flex;align-items:center;justify-content:center;
font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8fa3c0}
#w{width:min(96vw,1200px);height:min(80vh,660px);position:relative}
canvas{width:100%;height:100%;display:block;border-radius:12px;
background:radial-gradient(120% 120% at 50% 0%,#141c2c 0%,#0b0f18 70%);
box-shadow:0 20px 60px #0006,inset 0 0 0 1px #ffffff12}
</style>
</head>
<body>
<div id="w"><canvas id="c"></canvas></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const N=80;let W=0,H=0,arr=[],off=[],i=0,j=0,cmp=0,swp=0,done=0,hold=0;

function fit(){const r=cv.getBoundingClientRect(),d=devicePixelRatio||1;
W=r.width;H=r.height;cv.width=W*d|0;cv.height=H*d|0;
ctx.setTransform(d,0,0,d,0,0);}
addEventListener('resize',fit);

function reset(){arr=[];off=[];for(let k=0;k<N;k++){arr.push(.04+Math.random()*.96);off.push(0);}
i=0;j=0;cmp=0;swp=0;done=0;hold=0;}

function step(){
  if(done)return;
  if(i>=N-1){done=1;return;}
  if(j>=N-1-i){i++;j=0;if(i>=N-1)done=1;return;}
  cmp++;
  if(arr[j]>arr[j+1]){
    const t=arr[j];arr[j]=arr[j+1];arr[j+1]=t;swp++;
    const bw=(W-40)/N;off[j]=bw;off[j+1]=-bw;
  }
  j++;
}

function draw(){
  ctx.clearRect(0,0,W,H);
  const pad=20,top=52,bw=(W-pad*2)/N,gap=Math.min(2,bw*.18),ih=H-top-pad;
  for(let k=0;k<N;k++){
    off[k]*=.55;if(Math.abs(off[k])<.3)off[k]=0;
    const h=Math.max(2,arr[k]*ih),x=pad+k*bw+off[k],y=top+ih-h;
    let a,b;
    if(!done&&(k===j||k===j+1)){a='#ffd36e';b='#ff8a3d';}
    else if(done||k>=N-i){a='#5ef2b6';b='#12b981';}
    else{a='#7db8ff';b='#3358d4';}
    const g=ctx.createLinearGradient(0,y,0,top+ih);
    g.addColorStop(0,a);g.addColorStop(1,b);
    ctx.fillStyle=g;
    ctx.fillRect(x+gap/2,y,Math.max(1,bw-gap),h);
    if(!done&&(k===j||k===j+1)){
      ctx.fillStyle='#ffd36e';
      ctx.fillRect(x+gap/2,top+ih+4,Math.max(1,bw-gap),3);
    }
  }
  ctx.fillStyle='#0000';
  ctx.font='600 15px ui-monospace,Menlo,monospace';
  ctx.fillStyle='#e8eefb';
  ctx.fillText('BUBBLE SORT',pad,26);
  ctx.font='13px ui-monospace,Menlo,monospace';
  ctx.fillStyle='#7f93b1';
  ctx.textAlign='right';
  ctx.fillText('comparisons '+cmp+'   swaps '+swp+'   sorted '+(done?N:i)+'/'+N+(done?'   ✓ done':''),W-pad,26);
  ctx.textAlign='left';
  ctx.strokeStyle='#ffffff10';ctx.beginPath();
  ctx.moveTo(pad,top+ih+1.5);ctx.lineTo(W-pad,top+ih+1.5);ctx.stroke();
}

function loop(){
  if(done){if(++hold>110)reset();}
  else{for(let s=0;s<5;s++)step();}
  draw();
  requestAnimationFrame(loop);
}
fit();reset();loop();
</script>
</body>
</html>
Claude Sonnet 5frontier referenceOK
Show code
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bubble Sort</title>
<style>html,body{margin:0;background:#111;overflow:hidden;height:100%}canvas{display:block}#c{position:fixed;top:8px;left:10px;color:#eee;font:14px monospace;text-shadow:0 0 3px #000}</style>
</head><body>
<canvas id="cv"></canvas>
<div id="c"></div>
<script>
const canvas=document.getElementById('cv');
const ctx=canvas.getContext('2d');
let W,H;
function resize(){W=canvas.width=innerWidth;H=canvas.height=innerHeight;}
resize();window.onresize=resize;
const N=80;
let arr,i,j,comparisons,sortedFrom,fa,fb,flashTimer,done,pauseTimer;
function init(){
  arr=[];
  for(let k=0;k<N;k++)arr.push(Math.random()*0.85+0.06);
  i=N-1;j=0;comparisons=0;sortedFrom=N;fa=-1;fb=-1;flashTimer=0;done=false;pauseTimer=0;
}
init();
const label=document.getElementById('c');
function step(){
  if(done){
    pauseTimer++;
    if(pauseTimer>70)init();
    return;
  }
  if(i<=0){done=true;sortedFrom=0;return;}
  if(j>=i){
    sortedFrom=i;
    i--;j=0;
    if(i<=0){done=true;sortedFrom=0;}
    return;
  }
  comparisons++;
  fa=j;fb=j+1;flashTimer=5;
  if(arr[j]>arr[j+1]){
    const t=arr[j];arr[j]=arr[j+1];arr[j+1]=t;
  }
  j++;
}
function draw(){
  ctx.fillStyle='#111';
  ctx.fillRect(0,0,W,H);
  const bw=W/N;
  for(let k=0;k<N;k++){
    const h=arr[k]*(H-50);
    let color='#4da6ff';
    if(k>=sortedFrom)color='#3ddc84';
    if(flashTimer>0&&(k===fa||k===fb))color='#ff4d4d';
    ctx.fillStyle=color;
    ctx.fillRect(k*bw+1,H-h,Math.max(bw-2,1),h);
  }
  if(flashTimer>0)flashTimer--;
  label.textContent='Comparisons: '+comparisons+(done?'  — sorted, restarting...':'');
}
function loop(){
  for(let s=0;s<3;s++)step();
  draw();
  requestAnimationFrame(loop);
}
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>Bubble Sort Visualization</title>
<style>
html,body{margin:0;height:100%;background:#0e1116;color:#e6e9ef;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center}
h1{font-size:1.1rem;font-weight:600;margin:0 0 .35rem;letter-spacing:.04em}
#stats{font-size:.9rem;color:#9aa4b2;margin-bottom:.6rem}
#stats b{color:#e6e9ef;font-variant-numeric:tabular-nums}
canvas{background:#161b22;border:1px solid #2a3140;border-radius:8px;max-width:94vw;height:auto}
.legend{display:flex;gap:1.1rem;margin-top:.6rem;font-size:.78rem;color:#9aa4b2}
.legend span::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:2px;margin-right:.35em;vertical-align:-.05em;background:var(--c)}
</style>
</head>
<body>
<h1>Bubble Sort</h1>
<div id="stats">Comparisons: <b id="c">0</b></div>
<canvas id="cv" width="900" height="420"></canvas>
<div class="legend">
<span style="--c:#5b8def">Unsorted</span>
<span style="--c:#f2c14e">Comparing</span>
<span style="--c:#e0596b">Swapped</span>
<span style="--c:#3ecf8e">Sorted</span>
</div>
<script>
const cv=document.getElementById("cv"),ctx=cv.getContext("2d"),cEl=document.getElementById("c");
const N=80,W=cv.width,H=cv.height,PAD=10,bw=(W-2*PAD)/N;
let a,i,j,comps,done,swapped,pauseUntil=0,lastSwap=-1;
function reset(){
a=Array.from({length:N},()=>20+Math.random()*(H-2*PAD-20));
i=0;j=0;comps=0;done=false;swapped=false;lastSwap=-1;
}
function step(){
if(done)return;
if(j>=N-1-i){
if(!swapped){done=true;return}
i++;j=0;swapped=false;
if(i>=N-1){done=true;return}
}
comps++;
if(a[j]>a[j+1]){const t=a[j];a[j]=a[j+1];a[j+1]=t;swapped=true;lastSwap=j}
else lastSwap=-1;
j++;
}
function draw(){
ctx.clearRect(0,0,W,H);
const sortedFrom=done?0:N-i;
for(let k=0;k<N;k++){
let col="#5b8def";
if(k>=sortedFrom)col="#3ecf8e";
if(!done){
if(k===j||k===j+1)col=(lastSwap===j-0&&(k===j||k===j+1))?col:col;
if(k===j||k===j+1)col="#f2c14e";
if(lastSwap>=0&&(k===lastSwap||k===lastSwap+1))col="#e0596b";
}
const h=a[k];
ctx.fillStyle=col;
ctx.fillRect(PAD+k*bw+1,H-PAD-h,Math.max(bw-2,1),h);
}
if(done){
ctx.fillStyle="#3ecf8e";
ctx.font="600 15px system-ui,sans-serif";
ctx.textAlign="center";
ctx.fillText("Sorted — restarting…",W/2,24);
}
cEl.textContent=comps;
}
function frame(t){
if(done){
if(!pauseUntil)pauseUntil=t+1600;
else if(t>=pauseUntil){pauseUntil=0;reset()}
}else{
for(let s=0;s<3&&!done;s++)step();
}
draw();
requestAnimationFrame(frame);
}
reset();
requestAnimationFrame(frame);
</script>
</body>
</html>
Claude Haiku 4.5frontier referenceOKMINIFIED
Show code
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bubble Sort</title><style>body{margin:0;display:flex;align-items:center;justify-content:center;height:100vh;background:#000;font-family:monospace}canvas{background:#000}div{position:absolute;top:10px;color:#0f0}</style></head><body><div>0</div><canvas id="c"></canvas><script>const c=document.getElementById('c'),x=c.getContext('2d'),d=document.querySelector('div');c.width=1200;c.height=600;let n=80,a=[],i=0,j=0,cnt=0;function s(){if(i>=n-1){a=[];for(let k=0;k<n;k++)a.push(Math.random());i=0;j=0;cnt=0;return}if(j>=n-1-i){i++;j=0;return}if(a[j]>a[j+1]){[a[j],a[j+1]]=[a[j+1],a[j]]}j++;cnt++}function p(){x.fillStyle='#000';x.fillRect(0,0,1200,600);for(let k=0;k<n;k++){x.fillStyle=k>n-1-i?'#0f0':(k===j||k===j+1)?'#f00':'#0ff';x.fillRect(k*15,600-a[k]*600,14,a[k]*600)}d.innerHTML=cnt}function r(){for(let m=0;m<5;m++)s();p();requestAnimationFrame(r)}for(let k=0;k<n;k++)a.push(Math.random());r()</script></body></html>
Results at a glance— every model in this round with score, response time and status.

Who wrote what

ModelBlind scoreLatencyStatus
deepseek-r1:14b —233.3 sOK
qwen3-coder:30b —24.1 sOK
mistral-small:24b —28.8 sOK
qwen3:8b ——harness
gemma4:26b ——harness
qwen3.5:9b —34.0 sOK
qwen3:14b —31.4 sOK
llama3.1:8b —34.4 sOK
command-r:35b ——DNF
qwq:32b ——DNF
deepseek-r1:32b —236.4 sOK