Overview › Code › R127
Code · blind round

R127 · Quicksort partitioning around glowing pivots

blind round 8/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.

1 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 quicksort on a <canvas>: around 80 vertical bars of random heights, highlighting the current pivot in a distinct color, coloring the active partition range differently from the untouched rest, and visibly swapping bars as the partition proceeds. Animate a few steps per frame so the recursion stays watchable. Show the number of swaps 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)
qwen3:8bBLANKMINIFIED
Show code
<!DOCTYPE html>
<html><head><title>Quicksort</title></head><body><canvas id="c"></canvas><div id="s">0</div><script>let a=[],c=document.getElementById('c'),ctx=c.getContext('2d'),w=800,h=600;c.width=w;c.height=h;a=Array(80).fill().map(()=>Math.random()*500);let swapCount=0;function draw(){ctx.clearRect(0,0,w,h);let b=800/80;for(let i=0;i<80;i++){let x=i*b,y=a[i];ctx.fillStyle=i===pivot?'#ff0000':i>=left&&i<=right?'#aaffaa':'#ccc';ctx.fillRect(x,600-y,b,y);}}function quicksort(l,r){if(l>=r)return;let p=a[r],i=l-1;for(let j=l;j<r;j++){if(a[j]<p){i++;[a[i],a[j]]=[a[j],a[i]];swapCount++;draw();requestAnimationFrame(()=>{});}}[a[i+1],a[r]]=[a[r],a[i+1]];swapCount++;draw();requestAnimationFrame(()=>{quicksort(l,i);quicksort(i+1,r);});}let pivot=0,left=0,right=0;function start(){pivot=right=left=0;quicksort(0,79);}</script></body></html>
qwen3-coder:30bOKFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quicksort Visualization</title>
    <style>
        body { background: #111; display: flex; justify-content: center; align-items: center; margin: 0; padding-top: 20px; }
        canvas { border: 1px solid #333; }
        #info { color: white; font-family: monospace; margin-top: 10px; text-align: center; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="info">Swaps: 0</div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let array = [];
        let N = 80; // Number of bars
        let barWidth = 1;
        let totalSwaps = 0;

        // State variables for animation control
        let currentArray = [];
        let state = {
            isSorting: false,
            history: [], // Stores snapshots of swaps/partitions to replay
            stepIndex: -1,
            animationFrameId: null
        };

        // --- Setup Functions ---

        function generateRandomArray() {
            array = Array.from({ length: N }, () => Math.floor(Math.random() * 300) + 50);
            currentArray = [...array];
            state.history = [];
            totalSwaps = 0;
        }

        // --- Quicksort Logic (State Recording) ---

        function partition(arr, low, high) {
            let pivot = arr[high];
            let i = low - 1;
            for (let j = low; j < high; j++) {
                if (arr[j] < pivot) {
                    i++;
                    // Record swap before performing it
                    state.history.push({ type: 'swap', indices: [i, j], value: [arr[i], arr[j]] });
                    [arr[i], arr[j]] = [arr[j], arr[i]]; // Perform swap for current state update
                    totalSwaps++;
                } else {
                    // Record comparison (optional, helps visualization)
                    state.history.push({ type: 'compare', indices: [j] });
                }
            }

            // Swap pivot into place
            state.history.push({ type: 'swap', indices: [i + 1, high], value: [arr[i+1], arr[high]] });
            [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]]; // Perform swap
            totalSwaps++;

            return i + 1;
        }

        function quickSort(arr, low, high) {
            if (low < high) {
                // Record the partitioning step for visualization
                state.history.push({ type: 'partition', indices: [low, high] });
                let pi = partition(arr, low, high);

                quickSort(arr, low, pi - 1);
                quickSort(arr, pi + 1, high);
            }
        }

        // --- Visualization Functions ---

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

            for (let i = 0; i < N; i++) {
                const height = currentArray[i];
                // Draw bar (Base color)
                ctx.fillStyle = '#66c2a5'; // Default green/teal
                ctx.fillRect(i * width, canvas.height - height, width - 1, height);
            }

            // Highlight specific areas based on state history
            if (state.history[0] && state.history[0].type === 'partition') {
                 const indices = state.history[0].indices;
                 ctx.fillStyle = '#fb8072'; // Reddish for partition range
                 for(let i=indices[0]; i<=indices[1]; i++) {
                     ctx.fillRect(i * width, 0, width - 1, canvas.height);
                 }
            }

             if (state.history[0] && state.history[0].type === 'swap') {
                const indices = state.history[0].indices;
                // Highlight swapped bars slightly differently
                ctx.strokeStyle = '#f7b500'; // Yellow/Orange highlight for swap
                ctx.lineWidth = 2;

                for(let i=0; i < N; i++) {
                    if (i === indices[0] || i === indices[1]) {
                        ctx.strokeRect(i * width - 1, canvas.height - currentArray[i], width - 1, currentArray[i]);
                    }
                }
            }

        }

        function updateState() {
            if (state.stepIndex < state.history.length) {
                state.stepIndex++;
                const step = state.history[state.stepIndex];

                // 1. Handle Swaps/Comparisons
                if (step.type === 'swap') {
                    let [i, j] = step.indices;
                    let valA = currentArray[i];
                    let valB = currentArray[j];

                    // Perform the actual swap on the displayed array
                    currentArray[i] = valB;
                    currentArray[j] = valA;
                }

                // 2. Redraw the canvas based on the new state
                draw();

            } else {
                // Finished sorting
                state.isSorting = false;
                cancelAnimationFrame(state.animationFrameId);
                document.getElementById('info').textContent = `Finished! Swaps: ${totalSwaps}`;
                return true; // Signal completion
            }
            return false; // Still running
        }

        // --- Main Animation Loop ---

        function animate() {
            let finished = updateState();

            if (!finished) {
                state.animationFrameId = requestAnimationFrame(animate);
            } else {
                 document.getElementById('info').textContent = `Finished! Swaps: ${totalSwaps}`;
            }
        }


        // --- Initialization ---

        function initialize() {
            canvas.width = N * (Math.min(8, Math.pow(canvas.height / 200, 1)) || 1); // Adjust width dynamically
            canvas.height = 400;
            generateRandomArray();

            // Run Quicksort and record all steps into history
            quickSort([...array], 0, N - 1);

            // Reset the displayed array to the initial state before animation start
            currentArray = [...array];

            state.isSorting = true;
            state.stepIndex = -1; // Start before step 0 so updateState increments it immediately
            animate();
        }

        initialize();
    </script>
</body>
</html>
```
llama3.1:8bERRSTATFORMAT
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>Quicksort Animation</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const width = window.innerWidth;
    const height = window.innerHeight / 3;
    const numBars = Math.floor(height / 5);
    let bars = [];
    let swaps = 0;

    for (let i = 0; i < numBars; i++) {
      bars.push(Math.floor(Math.random() * height));
    }

    function draw() {
      ctx.clearRect(0, 0, width, height);
      const barWidth = width / numBars;
      const activeHeight = height - barWidth;
      for (let i = 0; i < numBars; i++) {
        const barColor = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
        if (i === pivotIndex && !partitioning) {
          ctx.fillStyle = 'red';
        } else if (i >= partitionStart && i < partitionEnd && partitioning) {
          ctx.fillStyle = 'blue';
        } else {
          ctx.fillStyle = barColor;
        }
        ctx.fillRect(i * barWidth, height - bars[i], barWidth, activeHeight);
      }
      ctx.font = '16px Arial';
      ctx.fillStyle = 'black';
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      ctx.fillText('Swaps: ' + swaps, 10, 20);

      if (partitioning) {
        for (let i = partitionStart; i < partitionEnd; i++) {
          if (i !== pivotIndex && bars[i] > bars[partitionEnd - 1]) {
            [bars[i], bars[partitionEnd - 1]] = [bars[partitionEnd - 1], bars[i]];
            swaps++;
            draw();
          }
        }
        partitioning = false;
      } else if (i < numBars - 1) {
        const newPivotIndex = Math.floor(Math.random() * (numBars - i));
        pivotIndex = newPivotIndex + i;
        partitionStart = i;
        partitionEnd = i + 1;
        partioning = true;
      } else {
        let min = height, max = 0;
        for (let j = 0; j < numBars; j++) {
          if (bars[j] > max) {
            max = bars[j];
          }
          if (bars[j] < min) {
            min = bars[j];
          }
        }
        const scalingFactor = height / (max - min);
        for (let j = 0; j < numBars; j++) {
          bars[j] -= min;
        }
        newPivotIndex = Math.floor(Math.random() * (numBars));
        pivotIndex = newPivotIndex;
        partitionStart = 0;
        partitionEnd = 1;
        partioning = true;
      }

      requestAnimationFrame(draw);
    }

    let pivotIndex, partitionStart, partitionEnd, partitioning;

    draw();
  </script>
</body>
</html>
```
qwen3.5:9bOKFORMAT
Show code
```html
<!DOCTYPE html>
<html>
<head>
<title>Quicksort Visualization</title>
<style>body { background: #111; display: flex; justify-content: center; align-items: center; margin: 0; height: 100vh; color: white; font-family: sans-serif; } canvas { border: 1px solid #333; }</style>
</head>
<body>
<canvas id="c"></canvas>

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

let N = 80;
const BAR_WIDTH = (canvas.width - 1) / N;
let arr = [];
let swaps = 0;
let animationFrameId = null;

// State tracking for visualization
let low_p = 0, high_p = N - 1; // Current partition range
let pivot_index = -1;         // Index of the current pivot
let isSorting = false;

function initArray() {
    arr = Array.from({ length: N }, () => Math.floor(Math.random() * 200) + 50);
    swaps = 0;
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const max_h = 250;
    const scale = max_h / Math.max(...arr);

    for (let i = 0; i < N; i++) {
        const height = arr[i] * scale;
        ctx.fillStyle = '#4466aa'; // Default color
        ctx.fillRect(i * BAR_WIDTH, canvas.height - height, BAR_WIDTH - 1, height);
    }

    // Highlight active partition range (low to high)
    if (low_p !== undefined && high_p !== undefined) {
        ctx.fillStyle = 'rgba(70, 130, 180, 0.2)'; // Steel blue transparent
        for (let i = low_p; i <= high_p; i++) {
            ctx.fillRect(i * BAR_WIDTH, canvas.height - Math.max(0, arr[i] * scale), BAR_WIDTH - 1, Math.max(0, arr[i] * scale));
        }
    }

    // Highlight pivot
    if (pivot_index !== -1) {
        ctx.fillStyle = 'red';
        const h = Math.max(0, arr[pivot_index] * scale);
        ctx.fillRect(pivot_index * BAR_WIDTH, canvas.height - h, BAR_WIDTH - 1, h);
    }

    // Display swaps count
    ctx.fillStyle = '#ccc';
    ctx.font = '20px Arial';
    ctx.fillText(`Swaps: ${swaps}`, 10, 30);
}

function swap(i, j) {
    [arr[i], arr[j]] = [arr[j], arr[i]];
    swaps++;
    draw();
}


// --- Quicksort Logic (State Machine approach for Animation) ---

async function quicksort_animate(low, high) {
    if (low >= high || isSorting === false) return;

    isSorting = true;
    low_p = low;
    high_p = high;
    pivot_index = Math.floor((low + high) / 2); // Simple pivot selection for visualization
    draw();

    await new Promise(resolve => setTimeout(resolve, 10));

    let i = low;
    let j = high;
    const p = arr[Math.floor((low + high) / 2)]; // Value of the chosen pivot/partition element

    // Partitioning Loop (Standard Lomuto/Hoare-like visualization steps)
    while (i <= j) {
        draw(); // Redraw before comparison

        // Find element on left that is >= p
        while (i <= high && arr[i] < p) { i++; }
        if (i > high) break;

        // Find element on right that is <= p
        while (j >= low && arr[j] > p) { j--; }
        if (j < low) break;

        // Swap and animate
        if (i < j) {
            swap(i, j);
            await new Promise(resolve => setTimeout(resolve, 10));
        } else {
            break;
        }
    }

    // Final swap to place pivot in correct spot (j should be the final position of the pivot's original value)
    swap(low_p, j); // This simplified visualization just swaps back after partitioning loop finishes
    await new Promise(resolve => setTimeout(resolve, 10));

    // Recurse and animate
    await quicksort_animate(low, j - 1);
    await quicksort_animate(j + 1, high);
}


async function runSortCycle() {
    if (isSorting) return;

    initArray();
    draw();
    low_p = 0;
    high_p = N - 1;
    pivot_index = -1;
    swaps = 0;
    isSorting = true;

    try {
        await quicksort_animate(0, N - 1);
    } catch (e) {
        // Handle potential async errors gracefully
    } finally {
        isSorting = false;
        low_p = undefined;
        high_p = undefined;
        pivot_index = -1;
        draw(); // Final draw state
    }

    // Loop restart mechanism
    animationFrameId = requestAnimationFrame(runSortCycle);
}


// --- Initialization ---
canvas.width = 800;
canvas.height = 350;
initArray();

// Start the animation loop immediately
requestAnimationFrame(runSortCycle);

</script>
</body>
</html>
```
mistral-small:24bOKFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quicksort Animation</title>
<style>
body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;}
canvas{border:1px solid black;}
#swaps{position:absolute;top:20px;left:20px;font-size:24px;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<div id="swaps">Swaps: 0</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const bars = Array.from({ length: 80 }, () => Math.random() * 450 + 50);
let swapCount = 0;

function drawBars(activeRange, pivot) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < bars.length; i++) {
        const x = i * 10 + 5;
        const y = 550 - bars[i];
        ctx.fillStyle = activeRange && i >= activeRange[0] && i <= activeRange[1] ? 'lightblue' : 'orange';
        if (i === pivot) ctx.fillStyle = 'red';
        ctx.fillRect(x, y, 8, bars[i]);
    }
}

function partition(arr, low, high) {
    let pivot = arr[high];
    let i = low - 1;
    drawBars([low, high], high);
    for (let j = low; j < high; j++) {
        if (arr[j] <= pivot) {
            i++;
            [arr[i], arr[j]] = [arr[j], arr[i]];
            swapCount++;
            drawBars([low, high], high);
            requestAnimationFrame(() => partition(arr, low, high));
            return;
        }
    }
    [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
    swapCount++;
    drawBars([low, high], high);
    return i + 1;
}

function quicksort(arr, low = 0, high = arr.length - 1) {
    if (low < high) {
        const pi = partition(arr, low, high);
        requestAnimationFrame(() => quicksort(arr, low, pi - 1));
        requestAnimationFrame(() => quicksort(arr, pi + 1, high));
    } else {
        document.getElementById('swaps').innerText = `Swaps: ${swapCount}`;
        setTimeout(() => {
            bars.forEach((_, i) => bars[i] = Math.random() * 450 + 50);
            swapCount = 0;
            quicksort(bars);
        }, 2000);
    }
}

drawBars();
requestAnimationFrame(() => {
    drawBars();
    quicksort(bars);
});
</script>
</body>
</html>
```
qwen3:14bOKFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quicksort Visualization</title>
    <style>
        body { background: #111; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; font-family: sans-serif; color: white; }
        #controls { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10; padding: 10px; background: rgba(0, 0, 0, 0.7); border-radius: 8px;}
        #canvas { background: #222; border: 1px solid #444; }
    </style>
</head>
<body>

<canvas id="canvas" width="960" height="500"></canvas>

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

let arr = [];
let swaps = 0;
let isRunning = true;

// State machine for animation control
let state = {
    low: 0,
    high: 0,
    pivotIndex: -1, // Index of the pivot element in the current partition [low...high]
    i: 0,           // Current index during partitioning
    j: 0,           // Pointer for comparison (Lomuto scheme simplified)
    stateType: 'INIT' // INIT, PARTITIONING, SWAPPING, FINISHED
};

const N = 80;
const BAR_WIDTH = 12;
const GAP = 10;

function initializeArray() {
    arr = Array.from({ length: N }, () => Math.floor(Math.random() * 450) + 50);
    swaps = 0;
    state = { low: 0, high: N - 1, pivotIndex: N - 1, i: 0, j: 0, stateType: 'PARTITIONING' };
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const width = canvas.width;
    const height = canvas.height;
    
    // Display swap count
    ctx.fillStyle = '#ccc';
    ctx.font = '18px Arial';
    ctx.fillText(`Swaps: ${swaps}`, 10, 30);

    for (let k = 0; k < N; k++) {
        const x = k * (BAR_WIDTH + GAP);
        const h = arr[k];
        
        // Default color
        ctx.fillStyle = '#66ccff'; 
        
        if (state.low <= k && k <= state.high) {
            // Active partition range
            ctx.fillStyle = '#3a3aff'; 
            
            // Check for pivot highlight
            if (k === state.pivotIndex) {
                ctx.fillStyle = '#ffcc00'; 
            } else if (state.stateType === 'SWAPPING' && (k === state.j || k === state.i)) {
                 // Highlight indices involved in a swap visualization step
                 if (Math.abs(k - state.j) < GAP * 2) ctx.fillStyle = '#ff6600';
            } else if (state.low <= k && k <= state.high) {
                ctx.fillStyle = '#3a3aff'; // Already set, but ensures active range is visible
            }

        } else {
             // Untouched elements outside the current partition scope
             ctx.fillStyle = '#2f2f2f'; 
        }

        ctx.fillRect(x, height - h, BAR_WIDTH, h);
    }
}

function swapBarsAndAdvanceState() {
    let swapped = false;
    const low = state.low;
    const high = state.high;
    
    // --- Lomuto Partitioning Simulation (Simplified for visualization) ---
    
    if (state.stateType === 'INIT') {
        // Start the first partition
        state.pivotIndex = high; 
        state.i = low; 
        state.j = low; // j is used to track elements <= pivot
        state.stateType = 'PARTITIONING';
    }

    if (state.stateType === 'PARTITIONING') {
        const pivotValue = arr[state.pivotIndex];
        let i = state.i;
        let j = state.j;

        // Main loop simulation: Iterate through elements from low to high-1
        while (j < state.pivotIndex) {
            if (arr[j] <= pivotValue) {
                swapped = true;
                // Swap arr[i] and arr[j], then increment i
                if (i !== j) {
                    [arr[i], arr[j]] = [arr[j], arr[i]];
                    swaps++;
                }
                i++;
            }
            j++;

        }
        // Final swap: Swap pivot (arr[high]) with element at i
        if (state.pivotIndex !== i) {
             [arr[i], arr[state.pivotIndex]] = [arr[state.pivotIndex], arr[i]];
             swaps++;
        }

        // Update state for the next recursive call
        const newPivotIndex = i; 
        const newLow = low;
        const newHigh = high - 1; // The pivot is now at 'i', so we partition [low, i-1] and [i+1, high]

        // For simple visualization, we only process one side (e.g., the left side)
        if (newLow < newPivotIndex) {
            state = { low: newLow, high: newPivotIndex - 1, pivotIndex: newPivotIndex - 1, i: newLow, j: newLow, stateType: 'PARTITIONING' };
        } else if (newHigh > newPivotIndex + 1) {
            state = { low: newPivotIndex + 1, high: newHigh, pivotIndex: newPivotIndex + 1, i: newPivotIndex + 1, j: newPivotIndex + 1, stateType: 'PARTITIONING' };
        } else {
             // Partitioning complete for this segment
             state.stateType = 'FINISHED';
        }

    } else if (state.stateType === 'FINISHED') {
        // Trigger initialization for the next fresh run
        initializeArray();
    }

    draw();
}


function animate() {
    if (isRunning) {
        swapBarsAndAdvanceState();
    }
    requestAnimationFrame(animate);
}

// Start immediately
initializeArray();
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.
deepseek-r1:14bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><head><canvas id=c style="border:1px solid black"></canvas><div id=s>Swaps: 0</div></head>
<body>
<script>
const c=document.c,t=c.getContext('2d'),s=document.getElementById('s');
let w=80,h=480,swaps=0,r=[];t.fillStyle='white';c.width=w*16;c.height=h;

function qsort(a,l,r,f){
if(l<r){
if(!f)for(let i=l+1;i<r;++i){qsort([].concat(a),l,i,true);break;}
let v=a[l],x=l,y=r,c=0;
while(x<y){
while(x++<y&&a[x]>v){}
while(y-->l&&a[y]>v){}
if(x<y)swap(a,x,y,++swaps);
[qsort(a,l,x-1,false),qsort(a,x+1,r,false)]}
}

function draw(a){
t.fillStyle='rgba(255,255,255,0.3)';
for(let i=0;i<w;++i)t.fillRect(i*16,h - a[i],14,a[i]);
t.fillStyle='black';s.textContent=`Swaps: ${swaps}`;
}

function animate(l,r){
if(!r)r=w-1;
const step=()=>requestAnimationFrame(()=>{
qsort(r=>r([...r]).slice(),l,r,true);
draw(r);
animate(l,r);
});
if(l<r){
let mid=l+Math.floor((r-l)/2);
t.fillStyle='rgba(0,255,0,.2)';
t.fillRect(mid*16,0,14*w,h);step();
mid=r; t.fillStyle='rgba(255,0,0,.3)';step();}
}

function swap(a,x,y,s){
if(x!=y){r.splice(y+1,0,...[a[x],a[y]].reverse()),swaps=s;}
}
</script>
<script>r=Array.from({length:w},(_,i)=>Math.random()*h/2);animate(0,w-1);
setInterval(()=>draw(r),16);
</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:32bSTATFORMAT
Show code
```html
<!DOCTYPE html><html><body style="background:#1a1a1a;display:flex;justify-content:center;align-items:center;height:100vh;margin:0"><canvas id="c" width="800" height="400"></canvas>
<script>
let ctx = document.getElementById('c').getContext('2d'), bars = Array(80).fill().map(() => Math.random()), colors = [], sortEnd, swapCount = 0;
function draw() {
    ctx.clearRect(0,0,800,400);
    ctx.font='20px monospace';
    ctx.fillStyle='#fff';
    ctx.fillText(`Swaps: ${swapCount}`,10,30);
    bars.forEach((h,i) => {
        let w = 9.5;
        x = i * w + 1;
        y = 400 - h*380;
        ctx.fillStyle=colors[i]||'#ddd';
        ctx.fillRect(x,y,w, h*380);
    });
}
function quickSort(l,r) {
    if(l >= r) return;
    let pivot = bars[r], i=l-1;
    colors[r]='#ff0000'; draw();
    for(let j=l; j<r; j++) {
        colors[j]='#ffff00';
        if(bars[j] < pivot) {
            i++;
            colors[i]='cyan',colors[j]='cyan';
            bars = bars.slice(0,i).concat([bars[j]]).concat(bars.slice(i, j)).concat(bars.slice(j+1));
            swapCount++; colors[i]=colors[j]='#ddd';
            draw();
        }
    }
    i++;
    if(r != i) {
        swapCount++;
        let temp = bars[r];
        bars[r] = bars[i];
        bars[i] = temp;
        colors[i]='red'; colors[r]='red'; draw();
    }
    colors.fill('');
    quickSort(l,i-1);
    colors.fill('#33ff33');
    for(let i=l; i<=r; i++) if(i < sortEnd) colors[i]='#ddd';
    draw();
    quickSort(i+1,r);
}
function animate() {
    if(!sortEnd) quickSort(0,79), sortEnd=80;
    else bars = Array(80).fill().map(() => Math.random()), swapCount=0, colors.fill(''), sortEnd=undefined, quickSort(0,79);
}
animate();
</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>Quicksort Visualizer</title>
<style>
html,body{margin:0;height:100%;background:#0b0f1a;color:#e6ecff;
font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden}
#wrap{position:fixed;inset:0}
canvas{display:block;width:100%;height:100%}
#hud{position:fixed;left:18px;top:14px;display:flex;gap:18px;align-items:baseline;
pointer-events:none;text-shadow:0 2px 8px #000}
#hud b{font-size:22px;font-weight:600;color:#fff}
.k{opacity:.55;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
#leg{position:fixed;left:18px;bottom:14px;display:flex;gap:16px;font-size:11px;
pointer-events:none;opacity:.8}
.leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
</style>
</head>
<body>
<div id="wrap"><canvas id="c"></canvas></div>
<div id="hud">
<div><span class="k">swaps</span> <b id="sw">0</b></div>
<div><span class="k">range</span> <b id="rg">-</b></div>
<div><span class="k">pass</span> <b id="ps">1</b></div>
</div>
<div id="leg">
<span class="leg"><i style="background:#3b4463"></i>idle</span>
<span class="leg"><i style="background:#3d8bfd"></i>partition</span>
<span class="leg"><i style="background:#ffd166"></i>scan</span>
<span class="leg"><i style="background:#ff3d71"></i>pivot</span>
</div>
<script>
var c=document.getElementById('c'),x=c.getContext('2d'),W=0,H=0,D=1;
function fit(){D=window.devicePixelRatio||1;W=c.clientWidth;H=c.clientHeight;
c.width=W*D|0;c.height=H*D|0;x.setTransform(D,0,0,D,0,0);}
addEventListener('resize',fit);fit();
var N=80,a=[],st=[],cur=null,swaps=0,fl=[],pass=1;
function reset(){a=[];for(var k=0;k<N;k++)a.push(Math.random()*.9+.06);
st=[[0,N-1]];cur=null;swaps=0;fl=[];}
reset();
function sw(i,j){if(i===j)return;var t=a[i];a[i]=a[j];a[j]=t;swaps++;
fl.push([i,1],[j,1]);}
function pick(){while(!cur){if(!st.length)return false;var r=st.pop();
if(r[0]>=r[1])continue;cur={lo:r[0],hi:r[1],p:a[r[1]],i:r[0],j:r[0]};}return true;}
function step(){if(!pick()){pass++;reset();return;}
var s=cur;
if(s.j<s.hi){if(a[s.j]<s.p)sw(s.i++,s.j);s.j++;}
else{sw(s.i,s.hi);st.push([s.i+1,s.hi],[s.lo,s.i-1]);cur=null;}}
function rr(px,py,pw,ph,r){x.beginPath();
r=Math.min(r,pw/2,ph/2);
x.moveTo(px+r,py);x.lineTo(px+pw-r,py);x.quadraticCurveTo(px+pw,py,px+pw,py+r);
x.lineTo(px+pw,py+ph);x.lineTo(px,py+ph);x.lineTo(px,py+r);
x.quadraticCurveTo(px,py,px+r,py);x.closePath();x.fill();}
function draw(){
var g=x.createLinearGradient(0,0,0,H);
g.addColorStop(0,'#0d1220');g.addColorStop(1,'#070a12');
x.fillStyle=g;x.fillRect(0,0,W,H);
var pad=Math.min(60,W*.05),top=90,bot=H-58;
var aw=W-pad*2,bw=aw/N,gap=Math.min(2.5,bw*.22),iw=Math.max(1,bw-gap);
var hh=bot-top;
x.fillStyle='rgba(255,255,255,.06)';x.fillRect(pad,bot+1,aw,1);
var hl={},i;
for(i=0;i<fl.length;i++)hl[fl[i][0]]=Math.max(hl[fl[i][0]]||0,fl[i][1]);
var lo=cur?cur.lo:-1,hi=cur?cur.hi:-2;
if(cur){x.fillStyle='rgba(61,139,253,.09)';
x.fillRect(pad+lo*bw-gap/2,top-10,(hi-lo+1)*bw,hh+10);}
for(i=0;i<N;i++){
var h=Math.max(2,a[i]*hh),px=pad+i*bw+gap/2,py=bot-h,col;
if(cur&&i===hi)col='#ff3d71';
else if(cur&&i===cur.j)col='#ffd166';
else if(cur&&i===cur.i)col='#8affc1';
else if(i>=lo&&i<=hi)col='#3d8bfd';
else col='#3b4463';
x.fillStyle=col;rr(px,py,iw,h,2);
var f=hl[i]||0;
if(f>0){x.globalAlpha=f*.85;x.fillStyle='#ffffff';rr(px,py,iw,h,2);
x.globalAlpha=1;}
if(col==='#ff3d71'||col==='#ffd166'){x.globalAlpha=.35;x.fillStyle=col;
rr(px-1.5,py-3,iw+3,h+3,3);x.globalAlpha=1;}
}
if(cur){var pyy=bot-Math.max(2,cur.p*hh);
x.strokeStyle='rgba(255,61,113,.4)';x.setLineDash([4,6]);x.lineWidth=1;
x.beginPath();x.moveTo(pad,pyy);x.lineTo(pad+aw,pyy);x.stroke();
x.setLineDash([]);}
for(i=fl.length-1;i>=0;i--){fl[i][1]-=.09;if(fl[i][1]<=0)fl.splice(i,1);}
document.getElementById('sw').textContent=swaps;
document.getElementById('rg').textContent=cur?cur.lo+'-'+cur.hi:'done';
document.getElementById('ps').textContent=pass;
}
function frame(){for(var k=0;k<3;k++)step();draw();requestAnimationFrame(frame);}
requestAnimationFrame(frame);
</script>
</body>
</html>
Claude Sonnet 5frontier referenceOK
Show code
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>Quicksort Visualization</title>
<style>
html,body{margin:0;background:#111;overflow:hidden;height:100%}
canvas{display:block}
#s{position:fixed;top:10px;left:10px;color:#0f0;font:16px monospace;text-shadow:0 0 3px #000}
</style></head>
<body>
<canvas id="c"></canvas>
<div id="s"></div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),sEl=document.getElementById('s');
let W,H;
function resize(){W=cv.width=window.innerWidth;H=cv.height=window.innerHeight;}
resize();window.addEventListener('resize',resize);

const N=80;
let arr,swaps,gen,active,pivot,cmp,swapping,done,restarting;

function init(){
  arr=[];
  for(let i=0;i<N;i++) arr.push(Math.random()*0.85+0.1);
  swaps=0;
  active=[0,N-1];
  pivot=-1;cmp=[-1,-1];swapping=null;done=false;restarting=false;
  gen=qsort(0,N-1);
}

function* qsort(lo,hi){
  active=[lo,hi];
  if(lo>=hi){yield;return;}
  let p=arr[hi];
  pivot=hi;
  let i=lo-1;
  for(let j=lo;j<hi;j++){
    cmp=[j,hi];
    yield;
    if(arr[j]<p){
      i++;
      if(i!==j){
        swapping=[i,j];
        const t=arr[i];arr[i]=arr[j];arr[j]=t;
        swaps++;
        yield;
        swapping=null;
      }
    }
  }
  if(i+1!==hi){
    swapping=[i+1,hi];
    const t=arr[i+1];arr[i+1]=arr[hi];arr[hi]=t;
    swaps++;
    yield;
    swapping=null;
  }
  const mid=i+1;
  pivot=-1;
  yield* qsort(lo,mid-1);
  yield* qsort(mid+1,hi);
}

init();

function step(){
  if(done) return;
  const r=gen.next();
  if(r.done) done=true;
}

function draw(){
  ctx.fillStyle='#111';
  ctx.fillRect(0,0,W,H);
  const bw=W/N;
  for(let i=0;i<N;i++){
    const h=arr[i]*(H-60);
    const x=i*bw;
    const y=H-h-30;
    let color='#4a90d9';
    if(active && i>=active[0] && i<=active[1]) color='#2ecc71';
    if(cmp && (i===cmp[0]||i===cmp[1])) color='#f1c40f';
    if(i===pivot) color='#ff00ff';
    if(swapping && (i===swapping[0]||i===swapping[1])) color='#e74c3c';
    ctx.fillStyle=color;
    ctx.fillRect(x+1,y,Math.max(bw-2,1),h);
  }
  sEl.textContent='Swaps: '+swaps+(done?'  (sorted! restarting...)':'');
}

function loop(){
  if(!done){
    for(let k=0;k<5;k++){
      if(done) break;
      step();
    }
  } else if(!restarting){
    restarting=true;
    setTimeout(()=>{init();},900);
  }
  draw();
  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>Quicksort Visualizer</title>
<style>
html,body{margin:0;height:100%;background:#0b0e14;color:#e6e9f0;font:14px/1.4 system-ui,sans-serif;overflow:hidden}
#wrap{display:flex;flex-direction:column;height:100%}
header{display:flex;gap:22px;align-items:baseline;padding:14px 20px;flex-wrap:wrap}
h1{font-size:16px;margin:0;font-weight:600;letter-spacing:.05em}
#swaps{font-variant-numeric:tabular-nums;color:#ffd166;font-weight:600}
.leg{display:flex;gap:14px;font-size:12px;color:#9aa3b2;flex-wrap:wrap}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}
canvas{flex:1;width:100%;display:block}
</style>
</head>
<body>
<div id="wrap">
<header>
<h1>QUICKSORT</h1>
<div id="swaps">Swaps: 0</div>
<div class="leg">
<span><i style="background:#ff5d73"></i>pivot</span>
<span><i style="background:#4ea8ff"></i>active partition</span>
<span><i style="background:#cfe6ff"></i>scan</span>
<span><i style="background:#3a4152"></i>untouched</span>
<span><i style="background:#41d99d"></i>sorted</span>
</div>
</header>
<canvas id="c"></canvas>
</div>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d'),hud=document.getElementById('swaps');
const N=80,SPF=3;
let a=[],done=[],swaps=0,L=-1,H=-1,P=-1,J=-1,gen=null,pause=0;
function resize(){
 const d=devicePixelRatio||1;
 cv.width=Math.max(1,cv.clientWidth*d);
 cv.height=Math.max(1,cv.clientHeight*d);
}
addEventListener('resize',resize);
function reset(){
 a=Array.from({length:N},()=>.06+.94*Math.random());
 done=new Array(N).fill(false);
 swaps=0;L=H=P=J=-1;pause=0;
 gen=qs(0,N-1);
}
function*qs(lo,hi){
 if(lo>hi)return;
 if(lo===hi){done[lo]=true;yield;return}
 const p=a[hi];
 let i=lo-1;
 for(let j=lo;j<hi;j++){
  L=lo;H=hi;P=hi;J=j;
  if(a[j]<p){
   i++;
   if(i!==j){const t=a[i];a[i]=a[j];a[j]=t;swaps++}
  }
  yield;
 }
 i++;
 if(i!==hi){const t=a[i];a[i]=a[hi];a[hi]=t;swaps++}
 L=lo;H=hi;P=i;J=-1;done[i]=true;
 yield;
 yield*qs(lo,i-1);
 yield*qs(i+1,hi);
}
function draw(){
 const w=cv.width,h=cv.height,d=devicePixelRatio||1;
 ctx.clearRect(0,0,w,h);
 const gap=Math.max(1,(w/N)*.18),bw=(w-gap*(N+1))/N,pad=14*d;
 for(let k=0;k<N;k++){
  const x=gap+k*(bw+gap),bh=a[k]*(h-pad),y=h-bh;
  let col='#3a4152';
  if(done[k])col='#41d99d';
  if(L>=0&&k>=L&&k<=H&&!done[k])col='#4ea8ff';
  if(k===J)col='#cfe6ff';
  if(k===P)col='#ff5d73';
  ctx.fillStyle=col;
  ctx.fillRect(x,y,bw,bh);
 }
}
function frame(){
 if(pause>0){
  pause--;
  if(pause===0)reset();
 }else{
  for(let s=0;s<SPF;s++){
   const r=gen.next();
   if(r.done){
    L=H=P=J=-1;
    done.fill(true);
    pause=110;
    break;
   }
  }
 }
 draw();
 hud.textContent='Swaps: '+swaps;
 requestAnimationFrame(frame);
}
resize();
reset();
requestAnimationFrame(frame);
</script>
</body>
</html>
Claude Haiku 4.5frontier referenceOKMINIFIED
Show code
<!DOCTYPE html><html><head><style>body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background:#222}canvas{background:#111;border:2px solid #fff}#s{position:absolute;top:20px;color:#fff;font:20px monospace}</style></head><body><div id="s">Swaps: 0</div><canvas id="c"width=800 height=400></canvas><script>const c=document.getElementById('c'),x=c.getContext('2d'),n=80;let a=[],sw=0,st=[],pv=-1,pl=-1,pr=-1;function init(){a=Array.from({length:n},()=>Math.random()*400|0);sw=0;st=[{l:0,r:n-1}];pv=-1}function part(l,r){pv=l;pl=l;pr=r;let p=a[l],i=l+1,j=r;while(i<=j){if(a[i]<=p)i++;else if(a[j]>p)j--;else{[a[i],a[j]]=[a[j],a[i]];sw++}}[a[l],a[j]]=[a[j],a[l]];sw++;return j}function step(){if(!st.length)return init();let q=st.pop();if(q.l<q.r){let k=part(q.l,q.r);st.push({l:q.l,r:k-1},{l:k+1,r:q.r})}}function d(){x.fillStyle='#111';x.fillRect(0,0,800,400);const w=10;for(let i=0;i<n;i++)x.fillStyle=(i===pv)?'#f00':(i>=pl&&i<=pr)?'#44f':'#0f0',x.fillRect(i*w,400-a[i],9,a[i])}function f(){for(let i=0;i<3;i++)step();document.getElementById('s').textContent='Swaps: '+sw;d();requestAnimationFrame(f)}init();f()</script></body></html>
Results at a glance— every model in this round with score, response time and status.

Who wrote what

ModelBlind scoreLatencyStatus
qwen3:8b —47.9 sOK
qwen3-coder:30b —24.0 sOK
llama3.1:8b —69.5 sOK
qwen3.5:9b —56.6 sOK
mistral-small:24b —87.8 sOK
qwen3:14b —35.8 sOK
gemma4:26b ——harness
deepseek-r1:14b —27.7 sOK
command-r:35b ——DNF
qwq:32b ——DNF
deepseek-r1:32b —54.2 sOK