Overview › Code › R100
Code · blind round

R100 · Sankey flow with travelling particles

blind round 9/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 renders a Sankey-style flow diagram on a <canvas>: three source nodes feed four target nodes through bands whose thickness is proportional to the flow, drawn as smooth curves. Send small particles travelling along each band at a rate matching its flow, so the busiest connections visibly carry more traffic. Let the flow values drift over time and show the total throughput. 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:14bOKLIMFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Sankey Flow Simulation</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #111; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="sankeyCanvas"></canvas>
    <script>
        const canvas = document.getElementById('sankeyCanvas');
        const ctx = canvas.getContext('2d');

        let W, H;
        let nodesS = [100, 300, 500]; // Source X coordinates
        let nodesT = [700, 600, 400, 200]; // Target X coordinates
        const numSources = nodesS.length;
        const numTargets = nodesT.length;

        // Initialize flow matrix: flows[s][t]
        let flows = [];
        for (let s = 0; s < numSources; s++) {
            flows[s] = new Array(numTargets).fill(Math.random() * 5 + 1); // Initial random flow
        }

        // Particle tracking data structure: particles[s][t] = [{x, y, speed}]
        let particles = [];
        for (let s = 0; s < numSources; s++) {
            particles[s] = [];
            for (let t = 0; t < numTargets; t++) {
                particles[s][t] = [];
            }
        }

        // Constants for visualization
        const NODE_Y_POS = 150; // Y position for all nodes
        const BAND_MAX_WIDTH = 40;
        const PARTICLE_COUNT = 60;

        function resizeCanvas() {
            W = window.innerWidth;
            H = window.innerHeight;
            canvas.width = W;
            canvas.height = H * 0.85;
        }
        window.addEventListener('resize', () => {
            resizeCanvas();
            // Re-initialize positions if needed, but for simplicity, we rely on scale
        });

        function initializeParticles() {
            for (let s = 0; s < numSources; s++) {
                for (let t = 0; t < numTargets; t++) {
                    const flowRate = flows[s][t];
                    // Initialize particles spread across the band's path
                    particles[s][t] = [];
                    for (let i = 0; i < PARTICLE_COUNT; i++) {
                        particles[s][t].push({
                            x: nodesS[s] + Math.random() * 10 - 5, 
                            y: NODE_Y_POS + Math.random() * 20 - 10, 
                            flowRate: flowRate, // Store the base rate
                            progress: Math.random(), // Used for tracking along the path
                        });
                    }
                }
            }
        }

        function updateFlows(deltaTime) {
            for (let s = 0; s < numSources; s++) {
                for (let t = 0; t < numTargets; t++) {
                    // Drift the flow: slow random walk
                    const fluctuation = (Math.random() - 0.5) * 2 * deltaTime * 0.1;
                    let newFlow = flows[s][t] + fluctuation;

                    // Clamp flow to reasonable positive values
                    flows[s][t] = Math.max(0.1, Math.min(10, newFlow));
                }
            }
        }

        function drawBands() {
            ctx.clearRect(0, 0, W, H);

            for (let s = 0; s < numSources; s++) {
                for (let t = 0; t < numTargets; t++) {
                    const flow = flows[s][t];
                    if (flow < 0.5) continue; // Don't draw tiny connections

                    // Calculate width proportional to flow, clamped for visualization
                    const thickness = Math.min(BAND_MAX_WIDTH, flow * 3);
                    ctx.fillStyle = `rgba(${Math.floor(255 - (s*40 + t*30))}, ${Math.floor(100 + s*30)}, ${Math.floor(50 + t*40)}, 0.6)`;

                    // Simplified curved drawing: uses a trapezoidal approximation
                    ctx.beginPath();
                    let startX = nodesS[s];
                    let endX = nodesT[t];
                    let yBase = NODE_Y_POS;

                    // Start at source (left)
                    ctx.moveTo(startX, yBase - thickness / 2);
                    ctx.lineTo(startX + 50, yBase - thickness / 2); // Small offset for curve start
                    
                    // Draw a smooth path/curve approximation towards the target
                    // This is highly simplified to meet character limits while conveying flow volume change
                    const cp1x = Math.min(W * 0.6, startX + (endX - startX) * 0.5);
                    const cp1y = yBase;

                    ctx.bezierCurveTo(cp1x, yBase - thickness / 2, 
                                      Math.max(startX, endX) - 50, yBase - thickness / 2, 
                                      endX, yBase - thickness / 2); // Top edge to target

                    ctx.lineTo(endX, yBase + thickness / 2); // Target vertical drop
                    ctx.bezierCurveTo(Math.max(startX, endX) - 50, yBase + thickness / 2, cp1x, yBase + thickness / 2, startX + 50, yBase + thickness / 2); // Bottom edge curve back

                    ctx.closePath();
                    ctx.fill();
                }
            }
        }

        function updateParticles(deltaTime) {
            for (let s = 0; s < numSources; s++) {
                for (let t = 0; t < numTargets; t++) {
                    const flowRate = flows[s][t];
                    if (flowRate < 0.5) continue;

                    // The speed of particles is proportional to the current flow rate
                    const speedFactor = Math.max(0.1, flowRate * 0.3); 

                    for (let i = 0; i < particles[s][t].length; i++) {
                        const p = particles[s][t][i];
                        // Update progress based on time and proportional speed
                        p.progress += speedFactor * deltaTime * 0.05;

                        if (p.progress > 1) {
                            // Reset particle if it passed the target area
                            p.progress = 0; 
                            p.x = nodesS[s] + Math.random() * 10 - 5;
                            p.y = NODE_Y_POS + Math.random() * 20 - 10;
                        } else {
                            // Simple linear interpolation for movement along the x-axis, scaled by progress
                            const startX = nodesS[s];
                            const endX = nodesT[t];
                            p.x = startX + (endX - startX) * p.progress;

                            // Keep Y slightly jittery for visual appeal
                            p.y = NODE_Y_POS + Math.sin(p.progress * 10 + i) * 5;
                        }
                    }
                }
            }
        }

        function drawParticles() {
             ctx.fillStyle = '#ADD8E6'; // Light blue particles
             for (let s = 0; s < numSources; s++) {
                for (let t = 0; t < numTargets; t++) {
                    const pList = particles[s][t];
                    if (!pList) continue;

                    for (const p of pList) {
                        ctx.beginPath();
                        ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
                        ctx.fill();
                    }
                }
            }
        }

        let lastTime = 0;
        function animate(timestamp) {
            const deltaTime = timestamp - lastTime || 16;
            lastTime = timestamp;

            updateFlows(deltaTime / 16); // Normalize time delta (assuming 60fps base)
            drawBands();
            updateParticles(deltaTime / 16);
            drawParticles();

            requestAnimationFrame(animate);
        }

        // Start the simulation
        resizeCanvas();
        initializeParticles();
        requestAnimationFrame(animate);
    </script>
</body>
</html>
```
qwen3-coder:30bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html>
<head><title></title></head>
<body><canvas id="sankey"></canvas><script>
const c=document.getElementById('sankey');
const ctx=c.getContext('2d');
let W=800,H=500;
c.width=W;c.height=H;

// Node definitions (fixed positions for simplicity)
const SOURCES={x:[100, 300, 500],y:H*0.2};
const TARGETS={x:[100, 600, 700, 900],y:H*0.8};

// Connections (Source Index -> Target Index)
let connections=[[0,0],[0,1],[1,1],[1,2],[2,2],[2,3]];

// Flow state and particle tracking
let flows={};
let particles=[];
const MAX_PARTICLES=50;
const FLOW_DAMPING=0.98;
const FLOW_BOOST=0.05;
let totalFlow=0;

function init() {
    flows={};
    particles=[];
    totalFlow=0;
    connections.forEach(([si, ti]) => {
        let key=`${si}-${ti}`;
        // Initialize flow to a random positive value (1-5 units)
        flows[key]=Math.random() * 4 + 1; 
    });
}

function updateFlows() {
    let newTotal=0;
    for(const key in flows){
        let currentF=flows[key];
        // Simulate flow drift: random change applied, then damped
        let delta=Math.random() - 0.5;
        flows[key]=currentF*FLOW_DAMPING + (delta * 0.1);
        if(Math.abs(flows[key]) < 0.1) flows[key] = Math.max(0.1, Math.sign(flows[key])*0.1);

        // Add a small boost proportional to the current flow magnitude
        flows[key]+=Math.random() * FLOW_BOOST;
        if(flows[key]>8){flows[key]=8};
        newTotal+=flows[key];
    }
    totalFlow=Math.min(10, Math.max(2, newTotal/5));
}

function getBandWidth(si, ti) {
    const flow=flows[`${si}-${ti}`]||0;
    // Width is proportional to the square root of the flow for visual effect
    return 4 + (Math.pow(flow,1.2)*0.5); 
}

function drawBands() {
    ctx.clearRect(0,0,W,H);
    ctx.fillStyle="#333";
    
    connections.forEach(([si, ti])=>{
        const key=`${si}-${ti}`;
        let width=getBandWidth(si, ti);
        let x1=SOURCES.x[si]; let y1=SOURCES.y;
        let x2=TARGETS.x[ti]; let y2=TARGETS.y;

        // Using a simple Bezier curve approximation for the band shape
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.quadraticCurveTo((x1+x2)/2, (y1+y2)/2 - 50, x2, y2);
        ctx.lineTo(x2 + width*0.8, y2); // Simple rectangular approximation for the flow volume
        ctx.quadraticCurveTo((x1+x2)/2, (y1+y2)/2 - 50, x1 - width*0.8, y1);
        ctx.closePath();
        
        let alpha=Math.min(1.0, Math.max(0.3, flow/5)); // Color intensity based on flow
        ctx.fillStyle=`rgba(60, 140, 250, ${alpha})`;
        ctx.fill();

        // Store band geometry info for particle tracking (simplified)
        this.bandData = {x1: x1, y1: y1, x2: x2, y2: y2, w: width, flow: flow};
    });
}

function spawnParticle(si, ti){
    if(particles.length >= MAX_PARTICLES) return;
    
    const bandData={x1: SOURCES.x[si], y1: SOURCES.y, x2: TARGETS.x[ti], y2: TARGETS.y, w: getBandWidth(si, ti), flow: flows[`${si}-${ti}`]};

    if (bandData.flow < 0.5) return; // Don't spawn if flow is too low
    
    particles.push({
        x: bandData.x1, y: bandData.y1, 
        targetX: bandData.x2, targetY: bandData.y2, 
        width: bandData.w * 0.8, // Particle width slightly smaller than band
        speedFactor: Math.min(1.5, bandData.flow/3), // Speed proportional to flow
        progress: 0,
        startFlow: bandData.flow
    });
}

function updateParticles() {
    for(let i=particles.length-1; i>=0; i--){
        let p=particles[i];
        p.progress += p.speedFactor * 0.02; // Advance progress
        
        // Simple linear interpolation for movement
        let t = Math.min(1, p.progress);
        p.x = p.x + (p.targetX - p.x) * (1-t)*0.1 + (p.targetX - p.x) * 0.1*t; // Smoother movement curve approximation
        p.y = p.y + (p.targetY - p.y) * (1-t)*0.1 + (p.targetY - p.y) * 0.1*t;

        if(t > 1.05){ // Finished crossing or overshot
            particles.splice(i, 1);
            continue;
        }
    }
}

function drawParticles() {
    ctx.fillStyle="#FFD700";
    const p_spacing = 20 / Math.max(1, totalFlow*0.5 + 1); // More particles on higher flow
    
    particles.forEach((p, i)=>{
        // Use particle index/flow to slightly vary size/opacity
        let alpha=Math.min(1.0, p.startFlow / 4);
        ctx.globalAlpha=alpha;
        ctx.beginPath();
        ctx.arc(p.x, p.y, Math.max(2, Math.sin((i*0.1)+Date.now()*0.0005)*3)*0.5 + 1, 0, Math.PI * 2);
        ctx.fill();
    });
}

function loop(){
    updateFlows();
    drawBands();
    
    // Particle spawning: Spawn new particles proportional to flow volume
    const spawnRate=Math.floor(totalFlow*10 + 5);
    for(let i=0;i<spawnRate;++i){
        // Randomly pick a connection and try to spawn
        const [si, ti] = connections[Math.floor(Math.random()*connections.length)];
        spawnParticle(si, ti);
    }

    updateParticles();
    drawParticles();

    requestAnimationFrame(loop);
}

init();
loop();
</script></body></html>
```
llama3.1:8bERRSTATFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sankey Diagram</title>
<style>
body { font-family: monospace; }
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="diagram" width=600 height=400></canvas>
<script>
const canvas = document.getElementById('diagram');
const ctx = canvas.getContext('2d');

let sources, targets;
let flows = [
  [20, 'A', 0.5],
  [40, 'B', 0.6],
  [60, 'C', 0.7]
];
let bands = [];
let totalFlow = 0;

function init() {
  sources = {};
  targets = {};

  for (let i = 0; i < flows.length; ++i) {
    const [flow, source, target] = flows[i];

    if (!sources[source]) sources[source] = { x: Math.random() * 100 };
    if (!targets[target]) targets[target] = { x: Math.random() * (canvas.width - 100) };

    totalFlow += flow;
    bands.push({
      from: source,
      to: target,
      flow,
      y1: sources[source].y || 0,
      y2: targets[target].y || 0
    });
  }

  for (const source in sources) {
    sources[source].y = canvas.height / flows.length * flows.findIndex(([flow, s]) => s == source);
    if (!sources[source].y) sources[source].y = 0;
  }
  for (const target in targets) {
    targets[target].y = canvas.height - 10 - canvas.height / flows.length * flows.findIndex(([flow, t]) => t == target);
    if (!targets[target].y) targets[target].y = canvas.height - 1;
  }

  ctx.fillStyle = 'black';
  for (const source in sources) {
    ctx.beginPath();
    ctx.arc(sources[source].x, sources[source].y, 5, 0, Math.PI * 2);
    ctx.fill();
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'black';
    ctx.font = '9pt sans-serif';
    ctx.fillText(source, sources[source].x - 6, sources[source].y);
  }
  for (const target in targets) {
    ctx.beginPath();
    ctx.arc(targets[target].x, targets[target].y, 5, 0, Math.PI * 2);
    ctx.fill();
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'black';
    ctx.font = '9pt sans-serif';
    ctx.fillText(target, targets[target].x - 6, targets[target].y);
  }

  let minY = Infinity;
  let maxY = -Infinity;
  for (const band of bands) {
    band.y1 = Math.min(sources[band.from].y, targets[band.to].y);
    if (!band.y1) band.y1 = 0;

    band.y2 = Math.max(targets[band.to].y, sources[band.from].y);
    if (!band.y2) band.y2 = canvas.height - 1;
    minY = Math.min(minY, band.y1);
    maxY = Math.max(maxY, band.y2);
  }
  for (const band of bands) {
    band.y1 -= minY;
    band.y2 -= minY;
  }

  const flowScale = canvas.width / (maxY - minY);
  let t = 0;

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (const source in sources) {
      sources[source].x += Math.sin(t) * 1;
      if (sources[source].x > canvas.width) sources[source].x = -10;
      else if (sources[source].x < -10) sources[source].x = canvas.width;

      ctx.beginPath();
      ctx.arc(sources[source].x, sources[source].y, 5, 0, Math.PI * 2);
      ctx.fill();

      ctx.textAlign = 'left';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = 'black';
      ctx.font = '9pt sans-serif';
      ctx.fillText(source, sources[source].x - 6, sources[source].y);
    }
    for (const target in targets) {
      targets[target].x -= Math.sin(t) * 1;
      if (targets[target].x > canvas.width) targets[target].x = -10;
      else if (targets[target].x < -10) targets[target].x = canvas.width;

      ctx.beginPath();
      ctx.arc(targets[target].x, targets[target].y, 5, 0, Math.PI * 2);
      ctx.fill();

      ctx.textAlign = 'left';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = 'black';
      ctx.font = '9pt sans-serif';
      ctx.fillText(target, targets[target].x - 6, targets[target].y);
    }

    const bandYScale = canvas.height / maxY;
    for (const band of bands) {
      let x1, x2;
      if (band.to == 'A') {
        x1 = sources[band.from].x + flowScale * Math.sin(t) * 100;
        x2 = x1;
      } else if (band.to == 'B') {
        x1 = targets[targets[band.to].from].x - flowScale * Math.sin(t) * 50;
        x2 = x1;
      } else if (band.to == 'C') {
        x1 = sources['A'].x + flowScale * Math.cos(t) * 150;
        x2 = x1;
      } else if (band.to == 'D') {
        x1 = targets[targets['B'].from].x - flowScale * Math.cos(t) * 100;
        x2 = x1;
      }
      ctx.beginPath();
      ctx.moveTo(x1, band.y1);
      ctx.lineTo(x2, band.y1);
      ctx.quadraticCurveTo((x1+x2)/2, band.y1 - (band.flow / totalFlow) * canvas.height/4, x2, band.y1);

      let p = Math.sin(t + band.index*10) * 100;
      if (p > 0 && p < 150) ctx.beginPath();
      ctx.arc(x2, band.y1 + p, 3, 0, Math.PI * 2);
      ctx.fill();

      x1 = sources[band.from].x - flowScale * Math.cos(t) * 100;
      x2 = targets[targets[band.to].from].x - flowScale * Math.sin(t) * 50;

      ctx.beginPath();
      ctx.moveTo(x1, band.y2);
      ctx.lineTo(x2, band.y2);
      ctx.quadraticCurveTo((x1+x2)/2, band.y2 + (band.flow / totalFlow) * canvas.height/4, x2, band.y2);

      p = Math.sin(t + band.index*10) * 100;
      if (p > 0 && p < 150) ctx.beginPath();
      ctx.arc(x2, band.y2 - p, 3, 0, Math.PI * 2);
      ctx.fill();
    }

    ctx.font = '24pt sans-serif';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText(`Throughput: ${totalFlow.toFixed(1)}`, -10, 20);

    requestAnimationFrame(animate);
    t += 0.01;
  }

  animate();
}

init();
</script>
</body>
</html>
```
gemma4:26bharness
No answer reached us (THIN) — 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.
mistral-small:24bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Sankey Diagram</title>
<style>
body {margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0;}
canvas {border: 1px solid black;}
#info {position: absolute; top: 20px; left: 20px; font-family: Arial, sans-serif; color: #333;}
</style>
</head>
<body>
<canvas id="sankeyCanvas" width="800" height="600"></canvas>
<div id="info">Total Throughput: 0</div>
<script>
const ctx = document.getElementById('sankeyCanvas').getContext('2d');
let throughput = 0;
let flowValues = [[1, 30], [2, 40], [3, 60]];
let targetFlows = {1: [], 2: [], 3: []};
targetFlows[1].push([4, Math.random() * 50]);
targetFlows[1].push([5, Math.random() * 30]);
targetFlows[2].push([4, Math.random() * 40]);
targetFlows[2].push([6, Math.random() * 70]);
targetFlows[3].push([5, Math.random() * 20]);
targetFlows[3].push([6, Math.random() * 80]);

function drawSankey() {
    ctx.clearRect(0, 0, 800, 600);
    const sourceNodes = [{x: 100, y: 150}, {x: 100, y: 300}, {x: 100, y: 450}];
    const targetNodes = [{x: 700, y: 100}, {x: 700, y: 250}, {x: 700, y: 400}, {x: 700, y: 550}];
    flowValues.forEach((flow, idx) => {
        drawBand(sourceNodes[idx], targetFlows[flow[0]], flow[1]);
        throughput += flow[1];
    });
    document.getElementById('info').innerText = `Total Throughput: ${throughput.toFixed(2)}`;
}

function drawBand(source, targets, flow) {
    ctx.beginPath();
    ctx.moveTo(source.x, source.y);
    for (let [targetIdx, targetValue] of targets) {
        const controlX1 = (source.x + 700) / 3;
        const controlY1 = source.y - (Math.random() * 100 - 50);
        let ratio = Math.min(1,(targetValue/flow));
        ctx.quadraticCurveTo(controlX1, controlY1, targetNodes[targetIdx].x, targetNodes[targetIdx].y);
    }
    ctx.strokeStyle = 'rgba(0, 0, 255, 0.6)';
    ctx.lineWidth = flow / 10;
    ctx.stroke();
}

function animate() {
    requestAnimationFrame(animate);
    drawSankey();

    flowValues.forEach((flow) => {
        flow[1] += (Math.random() - 0.5) * 2;
        if (flow[1] < 1) flow[1] = 1;
        else if (flow[1] > 100) flow[1] = 100;
    });
}

animate();
</script>
</body>
</html>
```
deepseek-r1:14bERRBLANKFORMAT
Show code
```html
<!DOCTYPE html>
<html><body style="margin:0;background:#1a1a1a">
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let width=800,height=600;
canvas.width=width;canvas.height=height;

const sources = [{x:150,y:100},{x:150,y:300},{x:150,y:500}];
const targets = [{x:600,y:125},{x:600,y:325},{x:600,y:475},{x:600,y:625}];
const connections=[];

class Connection {
  constructor(s,t,f) {
    this.s=s;this.t=t;
    this.flow=f;
    this.points=[];this.width=flowMax? f/flowMax*10 : 0;
    for(let i=0;i<8;i++) {
      let p = {x:0,y:0};
      this.points.push(p);
    }
    this.particle = {x:s.x,y:s.y,dirX:t.x-s.x,dirY:t.y-s.y,
                     speed:(Math.random()+1)*flowSpeed,faded:false};
  }

  draw() {
    ctx.beginPath();
    for(let i=0;i<this.points.length-1;i++) {
      let p1 = this.points[i];
      let p2 = this.points[i+1];
      if(i==0) {
        ctx.moveTo(p1.x,p1.y);
      } else {
        ctx.bezierCurveTo(
          this.points[i-1].x,this.points[i-1].y,
          p1.x,p1.y,
          p2.x,p2.y
        );
      }
    }
    ctx.strokeStyle = '#4CAF50';ctx.lineWidth=this.width;
    if(!this.faded) {ctx.stroke();} //Fade after first frame to allow full width drawing

    //Draw particles
    const scale=3;let dx=scale*(t.x-s.x),dy=scale*(t.y-s.y);
    for(let p of this.particles) {
      let dist = Math.sqrt((p.x-t.x)*(p.x-t.x)+(p.y-t.y)*(p.y-t.y));
      if(dist <50) { //Arrived
        connections.find(c => c.t==t).particles.push(p);
      } else {
        p.x += (dx)*p.speed;
        p.y += (dy)*p.speed;
      }
      ctx.fillStyle='#F44336';ctx.beginPath();ctx.arc(p.x,p.y,1,0,Math.PI*2);ctx.fill();
    }

    //Update points
    for(let i=0;i<this.points.length-1;i++) {
      let p = this.points[i];
      if(i==0) {p.x=s.x;p.y=s.y;} 
      else {p.x += (targets.find(t => t.y == this.points[i+1].y).x - s.x)/60;
            p.y += (targets.find(t => t.y == this.points[i+1].y).y - s.y)/60;}
    }
  }
}

let flowMax=0,flowSpeed=2;
const connections = sources.flatMap(s =>
  targets.map(t => {
    const f = Math.random()*300;
    if(f>flowMax) flowMax=f;
    return new Connection(s,t,f);
  })
);

function init() {
  ctx.fillStyle='#1a1a1a';ctx.fillRect(0,0,width,height);
  connections.forEach(c => c.points[0] = {x:c.s.x,y:c.s.y});
}

let totalFlow=connections.flatMap(c=>c.flow).reduce((a,b)=>a+b,0);

function animate() {
  ctx.fillStyle='rgba(26,26,26,0.05)';ctx.fillRect(0,0,width,height);
  
  connections.forEach(c => {
    c.width = c.flow/flowMax*10;
    c.points.forEach(p => {
      if(p!=c.points[0]) {
        p.x += (targets.find(t => t.y == c.t.y).x - c.s.x)/60;
        p.y += (targets.find(t => t.y == c.t.y).y - c.s.y)/60;
      }
    });
  });

  connections.forEach(c => {
    if(!c.faded) {
      ctx.beginPath();
      for(let i=0;i<c.points.length-1;i++) {
        if(i==0) {
          ctx.moveTo(c.points[i].x,c.points[i].y);
        } else {
          ctx.bezierCurveTo(
            c.points[i-1].x,c.points[i-1].y,
            c.points[i].x,c.points[i].y,
            c.points[i+1].x,c.points[i+1].y
          );
        }
      }
    }
  });

  connections.forEach(c => {
    ctx.strokeStyle = '#4CAF50';ctx.lineWidth=c.width;
    if(!c.faded) {ctx.stroke();}
  });

  totalFlow=connections.flatMap(c=>c.flow).reduce((a,b)=>a+b,0);
  
  ctx.fillStyle='white';ctx.font='20px Arial';
  ctx.fillText(`Total Flow: ${totalFlow.toFixed(1)}`, 50,50);

  flowMax *= Math.pow(0.998,1); //Gradually lower max to allow new connections
  if(Math.random()>0.99999) {
    init();
  }

  requestAnimationFrame(animate);
}

init();animate();

//Particles
connections.forEach(c => {
  c.particles = [];
});
</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.
qwen3.5:9bOKFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flow Dynamics</title>
    <style>body {margin: 0;overflow: hidden;background: #111}canvas {display: block;}</style>
</head>
<body>
<canvas id="sankeyCanvas"></canvas>
<script>
const canvas = document.getElementById('sankeyCanvas');
const ctx = canvas.getContext('2d');

let W, H;
let SourceNodes = [
    { name: "A", x: 0.1, y: 0.33 },
    { name: "B", x: 0.5, y: 0.16 },
    { name: "C", x: 0.9, y: 0.33 }
];
let TargetNodes = [
    { name: "D", x: 0.1, y: 0.75 },
    { name: "E", x: 0.3, y: 0.82 },
    { name: "F", x: 0.6, y: 0.9 },
    { name: "G", x: 0.9, y: 0.75 }
];

// Connections: [SourceIndex][TargetIndex] -> FlowValue (A->D, A->E, ..., C->G)
let Flows = [];
const NUM_SOURCES = SourceNodes.length;
const NUM_TARGETS = TargetNodes.length;

function init() {
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;

    Flows = Array(NUM_SOURCES).fill(0).map(() => Array(NUM_TARGETS).fill(Math.random()));
}

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

function updateFlows() {
    for (let i = 0; i < NUM_SOURCES; i++) {
        for (let j = 0; j < NUM_TARGETS; j++) {
            // Small random drift, ensuring positive flow and keeping total somewhat stable
            let change = (Math.random() - 0.5) * 0.1;
            let currentFlow = Flows[i][j];
            let newFlow = Math.max(0.01, currentFlow + change);
            // Clamp to reasonable bounds
            newFlow = Math.min(2.5, newFlow);
            Flows[i][j] = newFlow;
        }
    }
}

class Particle {
    constructor(flowIndex) {
        this.flowIndex = flowIndex; // [srcIdx, tgtIdx]
        this.path = this.generatePath();
        this.progress = Math.random() * 2 * Math.PI; // Start randomized
        this.speedFactor = Flows[Math.floor(this.flowIndex[0])][Math.floor(this.flowIndex[1])] / 1.5;
    }

    generatePath() {
        const [src, tgt] = this.flowIndex;
        const s = SourceNodes[src];
        const t = TargetNodes[tgt];
        // Use a simple Bezier curve approximation for the path coordinates
        return [
            { x: s.x * W, y: s.y * H }, // P0 (Source)
            { x: s.x * W + 0.5 * W, y: s.y * H - 0.2 * H }, // C1 (Control 1)
            { x: t.x * W + 0.5 * W, y: t.y * H + 0.2 * H }, // C2 (Control 2)
            { x: t.x * W, y: t.y * H }  // P3 (Target)
        ];
    }

    getPoint() {
        const p = this.path;
        let t = Math.cos(this.progress); // Use cosine for smooth movement along a conceptual path length

        // Simple interpolation based on time/progress, simulating flow progression
        // We use the distance from P0 to calculate progress factor (t)
        let ptX = p[0].x + (p[3].x - p[0].x) * t;
        let ptY = p[0].y + (p[3].y - p[0].y) * t;

        return { x: Math.min(W, Math.max(0, ptX)), y: Math.min(H, Math.max(0, ptY)) };
    }

    update() {
        // Update progress based on flow rate and time step
        this.progress += (Math.sin(Date.now() / 1000) * 0.005 + this.speedFactor * 0.005);
    }
}

let ParticlesList = [];
const MAX_PARTICLES = 80;

function initializeParticles() {
    ParticlesList = [];
    for (let i = 0; i < NUM_SOURCES; i++) {
        for (let j = 0; j < NUM_TARGETS; j++) {
            // Create particles proportional to flow. Max particles per link is 3.
            const count = Math.floor(Flows[i][j] * 2);
            for (let k = 0; k < Math.min(count, 3); k++) {
                ParticlesList.push(new Particle([i, j]));
            }
        }
    }
    // Ensure we don't exceed the cap
    if (ParticlesList.length > MAX_PARTICLES) {
         ParticlesList = ParticlesList.slice(0, MAX_PARTICLES);
    }
}

function drawBands() {
    ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
    for (let i = 0; i < NUM_SOURCES; i++) {
        for (let j = 0; j < NUM_TARGETS; j++) {
            const flow = Flows[i][j];
            if (flow === 0) continue;

            // Calculate thickness: proportional to flow, clamped
            let widthRatio = Math.min(1, flow / 2);
            let width = 5 + widthRatio * 30;
            let heightFactor = 0.8; // Scaling factor for visualization area

            ctx.beginPath();
            // Path drawing approximation (simple rectangle/curve based on start/end points)
            const s = SourceNodes[i];
            const t = TargetNodes[j];

            // Start point: (s.x*W, s.y*H)
            ctx.moveTo(s.x * W, s.y * H);
            // End point: (t.x*W, t.y*H)
            ctx.lineTo(t.x * W, t.y * H);

            // Use a simplified Bezier path approximation for the visual band
            ctx.bezierCurveTo(
                s.x * W + 50 * widthRatio, s.y * H - 20, // Control point 1 (offset)
                t.x * W - 50 * widthRatio, t.y * H + 20, // Control point 2 (offset)
                t.x * W, t.y * H
            );

            // Fill the area with opacity proportional to flow
            ctx.lineTo(t.x * W + width, t.y * H + width / 4); // Fake closure for fill visualization
            ctx.closePath();
            ctx.globalAlpha = Math.min(0.8, flow * 0.15);
            ctx.fillStyle = `rgba(0, 120, 255, ${Math.min(0.8, flow * 0.15)})`;
            ctx.fill();
        }
    }
    ctx.globalAlpha = 1; // Reset alpha for particles
}

function drawParticles() {
    for (const particle of ParticlesList) {
        particle.update();
        const pos = particle.getPoint();
        
        // Draw the particle
        ctx.fillStyle = `rgba(255, 255, 200, ${Math.random() * 0.8 + 0.2})`;
        ctx.beginPath();
        ctx.arc(pos.x, pos.y, Math.random() * 1 + 1, 0, Math.PI * 2);
        ctx.fill();
    }
}

function drawTotalThroughput() {
    let total = 0;
    for (let i = 0; i < NUM_SOURCES; i++) {
        for (let j = 0; j < NUM_TARGETS; j++) {
            total += Flows[i][j];
        }
    }
    ctx.fillStyle = '#DDD';
    ctx.font = '18px sans-serif';
    ctx.textAlign = 'left';
    ctx.fillText(`Total Throughput: ${total.toFixed(2)} / Tick`, 20, H - 20);
}

function animate() {
    // Clear canvas with slight fade effect (trail)
    ctx.fillStyle = 'rgba(17, 17, 34, 0.2)';
    ctx.fillRect(0, 0, W, H);

    drawBands();
    drawParticles();
    drawTotalThroughput();

    requestAnimationFrame(animate);
}

function loop() {
    init(); // Resize/reset dimensions if needed
    updateFlows();
    initializeParticles();
    animate();
}

loop();
</script>
</body>
</html>
```
qwq:32bBLANKFORMAT
Show code
<think>

Okay, I need to create a self-contained HTML file that renders a Sankey-style flow diagram using a canvas. The user specified three sources feeding four targets, with bands that have thickness proportional to flow. Also, particles moving along the bands, flows that drift over time, and the total throughput displayed. The animation should use requestAnimationFrame and restart when finished. No external libraries, so I have to do everything with vanilla JS.

First, I'll set up the basic HTML structure. The DOCTYPE, a canvas element inside a body, and the script tags. Since it's self-contained, all the code has to be in the HTML file.

Next, I'll need variables for the sources, targets, and flows. Sources are three nodes, targets four. The flows between them can be represented as a 3x4 array. Maybe initialize with some random values scaled between 0 and 500. The thickness of the bands will depend on the flow values. The flows should drift over time, so I can add a function that randomly adjusts the flow values each frame. The drifting could involve adding a small random delta each frame to each flow, but with some constraints to keep them within a range.

The Sankey diagram's bands are smooth curves between source and target nodes. The nodes should be positioned in a way that sources are on the left side and targets on the right. Maybe place the sources vertically spaced on the left third of the canvas, targets on the right two-thirds. The curves can be quadratic Bézier curves, where the control point is somewhere in the middle. The thickness of each band should be proportional to the flow. To calculate the thickness, I can normalize the flow values relative to the maximum flow, then scale to a suitable pixel thickness.

For the particles, each band will have particles moving along their path. The number of particles can be proportional to the flow, so more particles for higher flows. Each particle should move along the curve. To simulate the movement, I can parameterize each particle's position along the curve using a parameter t (0 to 1), incrementing it each frame. The speed (delta t per frame) can be adjusted based on the flow, so higher flows have faster particles? Or maybe the rate of particle emission. Wait, the user said "particles travelling along each band at a rate matching its flow". So the emission rate should be proportional to the flow. So higher flow means more particles per second.

The total throughput is the sum of all flows from sources. Need to display that in some corner, perhaps in a canvas text.

The animation loop will need to:

1. Update the flow values by drifting.
2. Update particle positions and emit new particles based on current flow rate.
3. Clear the canvas.
4. Draw the nodes (maybe as circles or rectangles).
5. Draw the bands between each source-target pair.
6. Draw the particles moving along each band's path.
7. Display the total throughput as text.

First, I'll structure the code. Let's start with the setup:

- Canvas size: Maybe 600x400 pixels? Adjustable, but the user didn't specify, so pick reasonable defaults.
- Nodes: Sources at x=50, spaced vertically, targets on x=500 or so. Need to decide positions. Let's say sources are at (50, 75), (50, 200), (50, 325). Targets at (550, 100), (550, 200), (550, 300), (550, 400). Maybe. The vertical positions can be evenly spaced.

The flows array: flows[i][j] where i is source index (0-2), j target (0-3). Initialize with random values between 0 and 500. Maybe use a function to generate random numbers.

For drifting the flows, each frame, add a delta to each flow, but with some noise. Maybe the delta is a random value between -flowDrift and +flowDrift, but constrained so that flows can't go below 0 or above some max. Let's say flowDrift is 0.5, so each flow can change up or down by a small amount each frame, leading to smooth drift.

The thickness of each band can be calculated as (flow / maxFlow) * maxThickness, where maxThickness is like 20px. The maxFlow is the maximum flow in the current flows array, so it needs to be recalculated every frame as flows change.

Drawing the bands: For each source-target pair with non-zero flow, draw a quadratic Bézier curve. The start point is the center of the source node, end point is the center of the target. The control point can be the midpoint between the source and target, but offset to the right? Maybe ( (source.x + target.x)/2 + 100, (source.y + target.y)/2 ). That way curves bend to the right.

The band's path is the Bézier curve. To draw it with variable thickness, maybe use a quadratic Bezier path for the stroke, with lineWidth set to the thickness. But in canvas, drawing thick lines might look jagged, but since it's a Sankey diagram, maybe acceptable.

The particles: Each particle has a position along the curve (t parameter from 0 to 1), and when it reaches 1, it's removed or recycled. To manage particles, perhaps for each flow, keep an array of particles. The emission rate could be flow / (some constant) per frame. For example, per frame, add a new particle with probability proportional to flow divided by some base rate. The base rate could be like maxFlow / 100, so that higher flows emit more particles.

Alternatively, each frame, for a flow between source i and target j with flow f, emit particles at a rate of (f / maxFlow) * emissionRate. EmissionRate could be like 0.5 so that higher flows emit more per unit time.

Wait, but in the code, each frame is a time step, so the emission rate needs to be per frame. Let's think: the flow value is in some arbitrary units. Maybe the emission rate is (flow / maxFlow) * 0.2, so that each frame, there's a chance to add a particle. The 0.2 is an arbitrary scaling factor to control density.

But since the user wants "the busiest connections visibly carry more traffic", the number of particles should be proportional to the flow. So, perhaps for each flow segment, the number of particles is proportional to flow. However, since particles are moving, the total number at any time depends on how long they take to traverse the path. So maybe the emission rate is proportional to flow divided by the traversal time. Hmm, this could get complex. Alternatively, just have the emission rate per frame be proportional to flow, so higher flows emit more particles each frame.

So, for each flow segment, each frame, if a random number is less than (flow / maxFlow) * emissionRate, then add a particle to the segment's array.

Now, for each particle, their position along the curve is tracked as a time parameter t. Each frame, they move forward by some delta. The speed could be flow-dependent? Or a constant speed, so that higher flows have more particles but they move at the same speed. Alternatively, higher flows could make particles move faster. The user said "rate matching its flow"—so maybe the speed is proportional. If so, then delta_per_frame = (flow / maxFlow) * speedBase. So particles in higher flow bands move faster. That way, the density of particles (number per unit length) remains proportional, since their speed is higher.

Alternatively, the movement per frame is a constant delta, but the emission rate is proportional to flow. Then, the number of particles on the path is proportional to (flow / maxFlow) / (delta / total_length). Since total_length is fixed (the path length), so particles per unit length would be (flow / maxFlow) / (delta / L) ) * (1/delta) ? Not sure. Maybe the simplest is to have all particles move at the same speed, and emission rate proportional to flow, so that higher flows have more particles, hence longer queues, but maybe not as visible. Alternatively, making the speed proportional might help.

Alternatively, just set the speed so that the time taken for a particle to traverse the curve is roughly the same for all curves, so that the number of particles on the path is proportional to flow. For example, if the path length is L, then dt = 1/(L * speed). To have all particles take the same time T to traverse, then speed = L / T. So the speed would vary per path. But the code would have to compute the length of each curve, which could be complicated. Alternatively, just make the movement delta per frame proportional to flow, so that higher flow makes particles move faster. Let's try that.

Alternatively, let me think: the speed (delta per frame) can be set to (flow / maxFlow) * speedBase, where speedBase is like 0.01. So each frame, the particle's t is increased by (f / maxFlow)*speedBase. Thus, higher flows have particles moving faster. That way, the number of particles on the path is (flow / maxFlow) / (delta per frame). Since delta per frame is proportional to flow, the ratio becomes (flow / maxFlow) / ( (f / maxFlow)*speedBase ) = 1/(speedBase ). So the number of particles on the path would be constant, which is not desired. Hmm.

Alternatively, the emission rate per frame is proportional to flow, and the speed is constant. Then, the time to traverse is fixed, so the number of particles on the path is (emission_rate * T) where T is traversal time. Since emission rate is proportional to flow, the number of particles would be proportional to flow, so that's good. So maybe that's better.

So, speed is a constant: delta_t per frame is a fixed value (like 0.02 per frame). The emission rate per frame for a flow f is (f / maxFlow) * emissionBase, where emissionBase is a constant (like 0.1). This way, for a flow of maxFlow, the emission rate would be 0.1, so every 10 frames on average a particle is emitted. For a flow of half max, every 20 frames, etc.

Each particle's t starts at 0, each frame add delta_t (constant) until t >=1, then remove.

Thus, the number of particles on the path is (emission rate) * (T), where T is the time taken to traverse (T = 1/delta_t). So if emission rate (per frame) is (f/max)*emissionBase, and T is 1/delta_t, then the number is (emissionBase * f/max) * (1/delta_t). So proportional to f, which is desired.

Therefore, that's the way to go.

Now, for each source-target pair (i,j), we can have an array of particles for that path. So maybe an array of arrays, particles[i][j]. To initialize, start with empty arrays.

In the animation loop:

1. Update flows: apply a small random delta to each flow, keeping between 0 and maybe 1000 (or another max). Perhaps the drift is small, like +/-0.1 per frame.

2. Compute maxFlow each frame as the maximum of all flows.

3. For each particle, update their position. For each path's particles array:

   For each particle in particles[i][j], add delta_t (constant, say 0.02) to their t. If t >=1, remove from array.

4. Emit new particles: for each flow segment (i,j), with flow f, compute the probability to emit a new particle this frame: (f / maxFlow) * emissionBase.

   So, generate a random number between 0 and 1, if it's less than that probability, then add a new particle to the array with t=0.

5. Clear canvas.

6. Draw nodes: circles or rectangles for sources and targets. Maybe radius 10 for sources, same for targets.

7. Draw the bands: for each (i,j) with nonzero flow:

   a. Compute the path's control point (midpoint offset)

   b. Calculate the thickness (f / maxFlow * maxThickness, e.g. maxThickness 20px)

   c. Draw the quadratic Bezier curve with that thickness and color (maybe color based on source or target index?)

8. Draw the particles: for each particle, compute its position along the curve at current t, and draw a small dot there.

9. Display total throughput: sum all flows from sources, and show as text.

Now, let's think about the coordinates. Let's define the canvas width and height as 600x400 pixels.

Sources are on the left third (x=50), targets on the right two-thirds (x=550). Let's say the vertical positions are spaced:

Sources:

Source 0: y = 75 (top)

Source 1: y = 200 (middle)

Source 2: y = 325 (bottom)

Targets:

Target0: y = 100

Target1: 200

Target2: 300

Target3: 400

Wait, but four targets, so 400 height would need to spread them out. Let's see:

Total vertical space 50-350 (assuming canvas height 400, bottom is 400). Maybe space them every 100 pixels:

Targets at (550, 100), (550, 200), (550, 300), (550, 400). Wait but that's too far down. Maybe starting at 100, 200, 300, 400, but the bottom one would be at y=400 which is the edge. Maybe better to center them around 200? Let me recalculate:

Suppose the vertical positions are between 50 and 350 (height 300). For four targets, spacing of 60 between centers (since 4 rows take 3 spaces). So:

Target y positions: 50 + 30 (radius?), but maybe adjust:

Let me set target positions to 100, 200, 300, 400, but that's 400 which is the bottom of the canvas. Maybe better to have them at 125, 200, 275, 350. So starting at 125, each 75 apart? Wait, 4 items with spacing. Let's see:

Top target at y = (400 - 2*radius) / 4 ?

Alternatively, perhaps just space them evenly from 100 to 300:

(400-200)/4 = 50, so positions: 100, 150, 200, 250, 300? Wait, 4 targets would need spacing of 66.66... Maybe better to just assign them at 100, 200, 300, 400. That's four points spaced by 100. The bottom one is at the very bottom. But perhaps that's okay.

Sources are on the left, x=50, y 75, 200, 325 (space of 125 between each). So the first source is upper, second in middle, third lower.

Now, for Bézier curves between each source and target:

Control point is ( (source.x + target.x)/2 + 100, (source.y + target.y)/2 )

Wait, let's see:

For example, a source at (50, 75), target at (550, 100):

Midpoint x is (50+550)/2 = 300, add 100 to get 400? Wait that would be (400, (75+100)/2=87.5). Hmm, but that might be too far to the right? Or maybe control point at ( (source.x + target.x)/2 + 100, average y). Alternatively, maybe a control point that's centered horizontally but shifted right moderately. Alternatively, a control point at the midpoint between the two nodes, but offset to the right. Let me think of a control point that's the same y as the average, but x at the midpoint plus a fixed offset. Let's say controlX = (source.x + target.x)/2 + 100, controlY = (source.y + target.y)/2. This would make the curve bend to the right between the source and target.

Alternatively, perhaps control point is at ( (source.x + target.x)/2, (source.y + target.y)/2 ), but that would make a straight line. To make a smooth curve, adding an offset.

Alternatively, perhaps controlX is (source.x + target.x)/2 + (target.x - source.x)/2 * 0.5, so that the control point is shifted towards the right by half the horizontal distance between the two nodes. Not sure. Maybe just a fixed offset like +150 in x. Maybe it's easier to code controlX as (source.x + target.x)/2 + 100, and controlY as (source.y + target.y)/2.

Now, to draw the Bezier curve:

The start point is the center of the source node (50, y_i), end point is the target node (550, y_j). The control point is (controlX, controlY).

In canvas, to draw a quadratic curve with line width, we can use the quadraticCurveTo function. However, the thickness is set via lineWidth, which is constant for the entire stroke. To have variable thickness, perhaps the Bezier must be drawn as a path with varying line widths, but that's not natively supported. Alternatively, represent the flow as the line's thickness by scaling the line width.

Alternatively, approximate it by using the line width as (f/maxFlow)*maxThickness.

Thus, for each (i,j):

Calculate the thickness = (f / maxFlow) * maxThickness (e.g. 20px max). If the thickness is too small, maybe set a minimum.

Alternatively, just set the lineWidth to that value. The smallest flow would have lineWidth 0.1, but that might be too thin. Maybe set a minimum of 1.

Alternatively, set thickness = max(1, (f/maxFlow)*20).

Hmm.

Alternatively, use a fixed thickness for all, but different colors. Probably better to use thickness.

But in code, when drawing:

ctx.beginPath();

// move to start point

Then:

ctx.moveTo(sourcePosX, sourcePosY);

ctx.quadraticCurveTo(controlX, controlY, targetPosX, targetPosY);

Then set ctx.lineWidth and stroke.

So each (i,j) with flow>0 has a curve drawn with that thickness.

Colors can be set as per source or target, but maybe just black or a single color.

Alternatively, each source has a different color. Let's say source 0 is red, 1 green, 2 blue. Then the curves from each source are their color. That would help distinguish.

Alternatively, the curves can be gray, but the thickness shows the flow.

Proceeding.

Now, in code:

First, variables:

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');

But in code we can define variables.

But since this is a code creation, need to structure it.

Variables:

sources array:

sources = [ {x:50, y:75}, {x:50, y:200}, {x:50, y:325} ]

targets = [ {x:550, y:100}, {x:550, y:200}, {x:550, y:300}, {x:550, y:400} ]

flows: a 3x4 array. flows[i][j] is the flow from source i to target j.

Initially, set to random values between 0 and 1000 or something.

particles: a 3x4 array of arrays. particles[i][j] contains the particles for the path from source i to target j.

Constants:

const canvasWidth = 600;

const canvasHeight = 400;

const radius = 10; // node radius

const speedDelta = 0.02; // delta per frame for particles' t

const emissionBase = 0.1; // base emission rate multiplier

const maxThickness = 20;

const driftAmount = 0.1; // the amount each flow can drift per frame +/-0.1

const colorSources = ['#FF0000', '#00FF00', '#0000FF'];

Now, the animation loop:

function animate() {

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    // Update flows

    for (let i = 0; i < 3; i++) {

        for (let j = 0; j <4; j++) {

            // drift the flow

            let delta = (Math.random() - 0.5)*2*driftAmount;

            flows[i][j] += delta;

            // clamp between 0 and, say, 1000? Or let it go? Maybe 0 to 1000.

            if (flows[i][j] < 0) flows[i][j]=0;

            if (flows[i][j] > 1000) flows[i][j]=1000;

        }

    }

    // compute maxFlow

    let maxFlow = 0;

    for (let i=0; i<3; i++) {

        for (let j=0; j<4; j++) {

            if (flows[i][j] > maxFlow) maxFlow = flows[i][j];

        }

    }

    // update particles:

    for (let i=0; i<3; i++) {

        for (let j=0; j<4; j++) {

            const pList = particles[i][j];

            // first process existing particles

            pList.forEach( (p, index) => {

                p.t += speedDelta;

                if (p.t >=1) {

                    // remove this particle

                    pList.splice(index,1);

                }

            });

            // add new particles

            // emission probability: (flow/maxFlow)*emissionBase

            const f = flows[i][j];

            const emitProb = (f / maxFlow) * emissionBase;

            if (Math.random() < emitProb) { // per frame

                pList.push({ t:0 });

            }

        }

    }

    // Draw nodes:

    drawNodes();

    // draw bands

    drawBands(maxFlow);

    // draw particles

    drawParticles();

    // draw total throughput

    const total = flows.reduce( (sum, s) => sum + s.reduce( (a,b)=>a+b, 0 ), 0 );

    drawText('Total: ' + total.toFixed(0), 10, 30);

    requestAnimationFrame(animate);

}

function drawNodes() {

    ctx.fillStyle = 'black';

    // Draw sources

    for (let i=0; i < 3; i++) {

        const n = sources[i];

        ctx.beginPath();

        ctx.arc(n.x, n.y, radius, 0, 2*Math.PI);

        ctx.fill();

    }

    // Draw targets

    for (let j=0; j <4; j++) {

        const n = targets[j];

        ctx.beginPath();

        ctx.arc(n.x, n.y, radius, 0, 2*Math.PI);

        ctx.fill();

    }

}

function drawBands(maxFlow) {

    ctx.lineWidth = 1;

    for (let i=0; i<3; i++) {

        for (let j=0; j<4; j++) {

            const f = flows[i][j];

            if (f ===0) continue;

            const sourcePos = sources[i];

            const targetPos = targets[j];

            // control point

            const controlX = (sourcePos.x + targetPos.x)/2 +100;

            const controlY = (sourcePos.y + targetPos.y)/2;

            // calculate thickness

            const thickness = (f/maxFlow)*maxThickness;

            if (thickness <1) continue; // don't draw if too thin?

            ctx.beginPath();

            ctx.moveTo(sourcePos.x, sourcePos.y);

            ctx.quadraticCurveTo(controlX, controlY, targetPos.x, targetPos.y);

            ctx.strokeStyle = colorSources[i]; // color based on source

            ctx.lineWidth = thickness;

            ctx.stroke();

        }

    }

}

function drawParticles() {

    ctx.fillStyle = 'white';

    ctx.beginPath(); // use beginPath to batch all particles?

    for (let i=0; i<3; i++) {

        for (let j=0; j<4; j++) {

            const pList = particles[i][j];

            const f = flows[i][j];

            if (f ===0) continue;

            const sourcePos = sources[i];

            const targetPos = targets[j];

            const controlX = (sourcePos.x + targetPos.x)/2 +100;

            const controlY = (sourcePos.y + targetPos.y)/2;

            // for each particle, compute position at t

            pList.forEach( p => {

                const t = p.t;

                // compute the point along the Bezier curve at t

                // quadratic Bezier formula

                const x = Math.pow(1-t,2)*sourcePos.x + 2*(1-t)*t*controlX + t*t*targetPos.x;

                const y = Math.pow(1-t,2)*sourcePos.y + 2*(1-t)*t*controlY + t*t*targetPos.y;

                ctx.moveTo(x,y); // but to draw circles, need to use arc

                // maybe better to use fillRect for quick circles?

                ctx.fillRect(x-1, y-1, 2, 2); // 2x2 square

            });

        }

    }

    ctx.fill(); // but batched with beginPath?

Wait, perhaps better to use fillRect each time, as beginPath might complicate.

Alternatively, draw each particle as a rectangle:

ctx.fillStyle = 'white';

for each particle {

   ctx.fillRect(x-1, y-1, 2,2);

}

But to do that, can't combine into a single path.

Alternatively, use a loop:

function drawParticles() {

    ctx.fillStyle = 'white';

    for (let i=0; i<3; i++) {

        for (let j=0; j<4; j++) {

            const pList = particles[i][j];

            const f = flows[i][j];

            if (f ===0) continue;

            const sourcePos = sources[i];

            const targetPos = targets[j];

            const controlX = (sourcePos.x + targetPos.x)/2 +100;

            const controlY = (sourcePos.y + targetPos.y)/2;

            pList.forEach( p => {

                const t = p.t;

                const x = Math.pow(1-t,2)*sourcePos.x + 2*(1-t)*t*controlX + t*t*targetPos.x;

                const y = Math.pow(1-t,2)*sourcePos.y + 2*(1-t)*t*controlY + t*t*targetPos.y;

                ctx.fillRect(x-1, y-1, 2, 2);

            });

        }

    }

}

This way, each particle is a small square.

drawText function:

function drawText(text, x, y) {

    ctx.fillStyle = 'black';

    ctx.font = '14px Arial';

    ctx.fillText(text, x, y);

}

Initialization:

// Initialize flows and particles

const flows = Array(3).fill().map( () => Array(4).fill(0) );

for (let i=0; i<3; i++) {

    for (let j=0; j<4; j++) {

        flows[i][j] = Math.random()*1000; // initial random flow

    }

}

particles = Array(3).fill().map( () => Array(4).fill().map( () => [] ) );

// particles[i][j] is an array.

Finally, start the animation:

animate();

Putting it all together in code.

But need to structure it with HTML canvas:

Probably, the full code would look like this:

But since the user asked to create the code, here's the final code:

But since the user might not have a canvas in HTML, perhaps wrap it in a script with a canvas.

Wait, but the user just wants the code creation, so the code would be:

```javascript
// Assuming a canvas element exists in HTML with id 'myCanvas'
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const canvasWidth = 600;
const canvasHeight = 400;
canvas.width = canvasWidth;
canvas.height = canvasHeight;

const sources = [
  {x:50, y:75},
  {x:50, y:200},
  {x:50, y:325}
];
const targets = [
  {x:550, y:100},
  {x:550, y:200},
  {x:550, y:300},
  {x:550, y:400}
];

let flows = Array(3).fill().map(() => Array(4).fill(0));
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 4; j++) {
    flows[i][j] = Math.random() * 1000;
  }
}

let particles = Array(3).fill().map(() => Array(4).fill().map(() => []));

const speedDelta = 0.02;
const emissionBase = 0.1;
const maxThickness = 20;
const driftAmount = 0.1;
const colorSources = ['#FF0000', '#00FF00', '#0000FF'];
const radius = 10;

function animate() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  // Update flows
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 4; j++) {
      const delta = (Math.random() - 0.5) * 2 * driftAmount;
      flows[i][j] += delta;
      if (flows[i][j] < 0) flows[i][j] = 0;
      if (flows[i][j] > 1000) flows[i][j] = 1000;
    }
  }

  // Compute max flow
  let maxFlow = 0;
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 4; j++) {
      if (flows[i][j] > maxFlow) maxFlow = flows[i][j];
    }
  }

  // Update particles
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 4; j++) {
      const pList = particles[i][j];
      // Remove completed particles
      pList.forEach((p, index) => {
        p.t += speedDelta;
        if (p.t >= 1) {
          pList.splice(index, 1);
        }
      });
      // Add new particles
      const f = flows[i][j];
      const emitProb = (f / maxFlow) * emissionBase;
      if (Math.random() < emitProb) {
        pList.push({ t: 0 });
      }
    }
  }

  // Draw nodes
  drawNodes();

  // Draw bands
  drawBands(maxFlow);

  // Draw particles
  drawParticles();

  // Draw total throughput
  const total = flows.reduce((sum, s) => sum + s.reduce((a, b) => a + b, 0), 0);
  drawText(`Total: ${total.toFixed(0)}`, 10, 30);

  requestAnimationFrame(animate);
}

function drawNodes() {
  ctx.fillStyle = 'black';
  sources.forEach(n => {
    ctx.beginPath();
    ctx.arc(n.x, n.y, radius, 0, 2 * Math.PI);
    ctx.fill();
  });
  targets.forEach(n => {
    ctx.beginPath();
    ctx.arc(n.x, n.y, radius, 0, 2 * Math.PI);
    ctx.fill();
  });
}

function drawBands(maxFlow) {
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 4; j++) {
      const f = flows[i][j];
      if (f === 0) continue;
      const source = sources[i];
      const target = targets[j];
      const controlX = (source.x + target.x) / 2 + 100;
      const controlY = (source.y + target.y) / 2;
      const thickness = (f / maxFlow) * maxThickness;
      if (thickness < 1) continue;
      ctx.beginPath();
      ctx.moveTo(source.x, source.y);
      ctx.quadraticCurveTo(controlX, controlY, target.x, target.y);
      ctx.strokeStyle = colorSources[i];
      ctx.lineWidth = thickness;
      ctx.stroke();
    }
  }
}

function drawParticles() {
  ctx.fillStyle = 'white';
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 4; j++) {
      const pList = particles[i][j];
      const f = flows[i][j];
      if (f === 0) continue;
      const source = sources[i];
      const target = targets[j];
      const controlX = (source.x + target.x) / 2 + 100;
      const controlY = (source.y + target.y) / 2;
      pList.forEach(p => {
        const t = p.t;
        const x = Math.pow(1 - t, 2) * source.x + 2 * (1 - t) * t * controlX + t * t * target.x;
        const y = Math.pow(1 - t, 2) * source.y + 2 * (1 - t) * t * controlY + t * t * target.y;
        ctx.fillRect(x - 1, y - 1, 2, 2);
      });
    }
  }
}

function drawText(text, x, y) {
  ctx.fillStyle = 'black';
  ctx.font = '14px Arial';
  ctx.fillText(text, x, y);
}

// Start animation
animate();
```

**HTML to run this:**
```html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script src="script.js"></script> <!-- Include the above JavaScript here -->
</body>
</html>
```

This code creates an animation where three sources flow to four targets via Bezier curves. The flow's thickness and particles indicate the amount of flow. Particles travel along the curves from sources to targets.
deepseek-r1:32bERRBLANKMINIFIEDFORMAT
Show code
```html
<!DOCTYPE html><html><body style="display:flex;justify-content:center;background:#000;margin:0"><canvas id=c width=800 height=600></canvas><script>
const ctx = document.getElementById('c').getContext('2d'),sources=[[150,75],[400,75],[650,75]],targets=[[100,550],[350,550],[600,550],[850,550]],flows=[],particles=[];let total=0;
function init(){flows.length=0;particles.length=0;for(let s=0;s<sources.length;s++)for(let t=0;t<targets.length;t++){const v=Math.random()*2+1;flows.push({from:s,to:t,value:v,width:(v/3)*6})}total=flows.reduce((a,f)=>a+f.value,0);particles.length=flows.map(f=>[])}
function drawNodes(){ctx.fillStyle='#444';sources.forEach(p=>{ctx.fillRect(p[0]-25,p[1]-25,50,50)});targets.forEach(p=>{ctx.fillRect(p[0]-25,p[1]-25,50,50)})};function drawFlows(){flows.forEach((f,i)=>{const s=sources[f.from],t=targets[f.to],dx=t[0]-s[0],dy=t[1]-s[1];ctx.beginPath();ctx.moveTo(s[0],s[1]);ctx.bezierCurveTo(s[0]+dx/2,s[1],s[0]+dx/2,t[1],t[0],t[1]);const w=f.width;ctx.strokeStyle=`hsl(${(f.value*360)/Math.max(...flows.map(f=>f.value))},70%,50%)`;ctx.lineWidth=w;ctx.stroke();particles[i].forEach(p=>{ctx.beginPath();const x=s[0]+p*(t[0]-s[0]),y=s[1]+p*(t[1]-s[1]);ctx.arc(x,y,3,0,2*Math.PI);ctx.fillStyle='white';ctx.fill()})})}
function updateParticles(){flows.forEach((f,i)=>{while(particles[i].length<f.value*5)particles[i].push(0);particles[i]=particles[i].map(p=>p+=f.value/100).filter(p=>p<=1)}}
function drawTotal(){ctx.fillStyle='white';ctx.font='24px monospace';ctx.fillText(`Total: ${total.toFixed(1)}`,40,40)}
init();requestAnimationFrame(function a(t){ctx.clearRect(0,0,800,600);drawNodes();drawFlows();updateParticles();drawTotal();flows.forEach(f=>f.value*=Math.exp(Math.random()*.01-0.005));total=flows.reduce((a,f)=>a+f.value,0);if(t>2e4)init();requestAnimationFrame(a)})}
</script></body></html>
```
command-r:35bOKFORMAT
Show code
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sankey Diagram</title>
    <style>
      body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      canvas {
        background: #2e3440;
        border: 5px solid #bccbd6;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      const ctx = document.getElementById("myCanvas").getContext("2d");
      let particleData = [];

      function random(min, max) {
        return Math.random() * (max - min) + min;
      }

      class Particle {
        constructor(x, y, dx, dy, color) {
          this.x = x;
          this.y = y;
          this.dx = dx ? dx : random(-10, 10);
          this.dy = dy ? dy : random(-5, 5);
          this.color = color;
        }

        update() {
          if (this.x > ctx.canvas.width || this.x < 0) {
            this.dx *= -1;
          }
          if (this.y > ctx.canvas.height || this.y < 0) {
            this.dy *= -1;
          }

          this.x += this.dx;
          this.y += this.dy;
        }

        draw() {
          ctx.fillStyle = this.color;
          ctx.beginPath();
          ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
          ctx.closePath();
          ctx.fill();
        }
      }

      function initParticles() {
        particleData = [];

        for (let i = 0; i < 400; i++) {
          const sourceIndex = Math.floor(Math.random() * 3); // random source node

          let dx, dy;
          if (sourceIndex === 0) {
            dx = -15 + Math.random() * 10;
            dy = Math.random() * 20 - 10;
          } else if (sourceIndex === 1) {
            dx = 10 + Math.random() * 10;
            dy = Math.random() * 20 - 10;
          } else {
            dx = Math.random() * 30 - 15;
            dy = -Math.random() * 10;
          }

          const color = `rgba(${Math.floor(
            random(50, 255)
          )}, ${Math.floor(random(50, 255))}, ${Math.floor(
            random(50, 255)
          )}, 0.8)`;

          particleData[i] = new Particle(30 + i * 10, 50, dx, dy, color);
        }
      }

      function updateParticles() {
        for (let i = 0; i < particleData.length; i++) {
          particleData[i].update();
        }
      }

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

        for (let i = 0; i < particleData.length; i++) {
          particleData[i].draw();
        }
      }

      initParticles();
      animate();

      function animate() {
        requestAnimationFrame(animate);
        updateParticles();
        drawParticles();
      }
    </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><head><meta charset="utf-8"><title>Sankey flow with particles</title>
<style>
html,body{margin:0;height:100%;background:#070a12;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#cfe6ff;
background:rgba(7,10,18,.62);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">throughput</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight}
fit();addEventListener('resize',fit);

const SRC=3,TGT=4;
const links=[];
for(let s=0;s<SRC;s++)for(let t=0;t<TGT;t++)
  links.push({s,t,base:6+Math.random()*40,ph:Math.random()*6.28,rate:.15+Math.random()*.25,v:0,parts:[],acc:0});

const HUE=[190,265,150];

function layout(){
  const mLeft=W*.16, mRight=W*.84, top=H*.12, bot=H*.9;
  const srcTot=[],tgtTot=[];
  for(let s=0;s<SRC;s++)srcTot[s]=links.filter(l=>l.s===s).reduce((a,b)=>a+b.v,0);
  for(let t=0;t<TGT;t++)tgtTot[t]=links.filter(l=>l.t===t).reduce((a,b)=>a+b.v,0);
  const total=srcTot.reduce((a,b)=>a+b,0)||1;
  const gapS=(bot-top)*.06, gapT=(bot-top)*.05;
  const availS=(bot-top)-gapS*(SRC-1), availT=(bot-top)-gapT*(TGT-1);

  const sPos=[],tPos=[];
  let y=top;
  for(let s=0;s<SRC;s++){const h=srcTot[s]/total*availS;sPos.push({y,h,cur:y});y+=h+gapS}
  y=top;
  for(let t=0;t<TGT;t++){const h=tgtTot[t]/total*availT;tPos.push({y,h,cur:y});y+=h+gapT}
  return {mLeft,mRight,sPos,tPos,total};
}

function frame(tm){
  const t=tm/1000;
  for(const l of links) l.v=Math.max(2,l.base*(1+.6*Math.sin(t*l.rate+l.ph)));
  const L=layout();

  g.fillStyle='#070a12';g.fillRect(0,0,W,H);

  // Baender zeichnen, dickste zuerst, damit duenne obenauf sichtbar bleiben.
  const order=[...links].sort((a,b)=>b.v-a.v);
  for(const l of order){
    const S=L.sPos[l.s],T=L.tPos[l.t];
    const th=l.v/L.total*(H*.72);
    const y0=S.cur+th/2, y1=T.cur+th/2;
    S.cur+=th;T.cur+=th;
    l.geo={y0,y1,th};

    const cx=(L.mLeft+L.mRight)/2;
    g.strokeStyle='hsla('+HUE[l.s]+',80%,60%,.26)';
    g.lineWidth=Math.max(1,th);
    g.beginPath();
    g.moveTo(L.mLeft,y0);
    g.bezierCurveTo(cx,y0,cx,y1,L.mRight,y1);
    g.stroke();
  }

  // Teilchen: Rate proportional zum Fluss.
  for(const l of links){
    l.acc+=l.v*.011;
    while(l.acc>1){l.parts.push(0);l.acc--}
    const cx=(L.mLeft+L.mRight)/2, {y0,y1}=l.geo;
    g.fillStyle='hsl('+HUE[l.s]+',95%,78%)';
    for(let i=l.parts.length-1;i>=0;i--){
      const u=l.parts[i]+=.006;
      if(u>1){l.parts.splice(i,1);continue}
      const mu=1-u;
      const x=mu*mu*mu*L.mLeft+3*mu*mu*u*cx+3*mu*u*u*cx+u*u*u*L.mRight;
      const y=mu*mu*mu*y0+3*mu*mu*u*y0+3*mu*u*u*y1+u*u*u*y1;
      g.beginPath();g.arc(x,y,1.9,0,6.2832);g.fill();
    }
  }

  g.fillStyle='#e8f2ff';g.font='600 12px ui-monospace,monospace';
  g.textAlign='right';g.textBaseline='middle';
  for(let s=0;s<SRC;s++){const p=L.sPos[s];
    g.fillStyle='hsl('+HUE[s]+',80%,66%)';
    g.fillRect(L.mLeft-9,p.y,7,Math.max(2,p.h));
    g.fillStyle='#e8f2ff';g.fillText('source '+(s+1),L.mLeft-15,p.y+p.h/2);
  }
  g.textAlign='left';
  for(let t=0;t<TGT;t++){const p=L.tPos[t];
    g.fillStyle='#7f8da3';
    g.fillRect(L.mRight+2,p.y,7,Math.max(2,p.h));
    g.fillStyle='#e8f2ff';g.fillText('target '+(t+1),L.mRight+15,p.y+p.h/2);
  }

  hud.textContent='throughput '+L.total.toFixed(0)+'  ·  '+links.length+' flows';
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script></body></html>
GPT-5.5 (Codex)frontier referenceOKMINIFIED
Show code
<html><head><meta charset="utf-8"><title>Sankey</title><style>html,body{margin:0;height:100%;background:#101318;color:#e9edf2;font:15px system-ui}canvas{display:block;width:100%;height:100%}#t{position:fixed;left:18px;top:14px;padding:7px 10px;background:#0008;border:1px solid #fff2;border-radius:6px}</style></head><body><canvas id="c"></canvas><div id="t"></div><script>
const c=document.getElementById("c"),x=c.getContext("2d"),T=document.getElementById("t");
let W,H,DPR,run=0,S,A,P;
function R(a,b){return a+Math.random()*(b-a)}
function init(){run=0;P=[];S=["Solar","Wind","Hydro"].map((n,i)=>({n,i,x:.18,y:.26+i*.24,c:["#ffce45","#68d5ff","#62d98b"][i]}));A=["Homes","Transit","Industry","Storage"].map((n,i)=>({n,i,x:.82,y:.18+i*.21,c:["#ff7b6e","#9f8cff","#4bd9c8","#f1f06b"][i]}));let k=0;S.forEach(s=>A.forEach(a=>{if(Math.random()>.18)P.push({s,a,b:R(18,85),v:0,p:[],h:k++})}));if(P.length<7)init()}
function size(){DPR=devicePixelRatio||1;W=c.width=innerWidth*DPR;H=c.height=innerHeight*DPR;x.setTransform(DPR,0,0,DPR,0,0)}
onresize=size;size();init();
function bez(p,u){let sx=p.s.x*innerWidth,sy=p.sy,tx=p.a.x*innerWidth,ty=p.ty,m=(sx+tx)/2;let v=1-u;return{x:v*v*v*sx+3*v*v*u*m+3*v*u*u*m+u*u*u*tx,y:v*v*v*sy+3*v*v*u*sy+3*v*u*u*ty+u*u*u*ty}}
function segs(list,side){let sum=list.reduce((n,p)=>n+p.v,0),h=Math.max(8,sum*.18),y=list[0][side].y*innerHeight-h/2;list.forEach(p=>{let w=Math.max(3,p.v*.18);p[side=="s"?"sy":"ty"]=y+w/2;y+=w+3})}
function frame(t){run+=.016;x.clearRect(0,0,innerWidth,innerHeight);let tot=0;P.forEach(p=>{p.v=p.b*(1+.32*Math.sin(t*.0004+p.h)+.18*Math.sin(t*.0011+p.h*2));tot+=p.v});
S.forEach(s=>segs(P.filter(p=>p.s==s),"s"));A.forEach(a=>segs(P.filter(p=>p.a==a),"a"));
x.lineCap="round";P.forEach(p=>{let w=Math.max(3,p.v*.18),g=x.createLinearGradient(p.s.x*innerWidth,0,p.a.x*innerWidth,0);g.addColorStop(0,p.s.c+"88");g.addColorStop(1,p.a.c+"88");x.strokeStyle=g;x.lineWidth=w;x.beginPath();let a=bez(p,0),b=bez(p,1),m=(a.x+b.x)/2;x.moveTo(a.x,a.y);x.bezierCurveTo(m,a.y,m,b.y,b.x,b.y);x.stroke();
let n=p.v/28;if(Math.random()<n)for(let i=0;i<Math.ceil(n);i++)p.p.push({u:0,r:R(1.2,2.5),q:R(.002,.006)});
p.p=p.p.filter(o=>(o.u+=o.q+p.v*.000015)<1);p.p.forEach(o=>{let z=bez(p,o.u);x.fillStyle="#fff";x.globalAlpha=.35+.55*o.u;x.beginPath();x.arc(z.x,z.y,o.r,0,7);x.fill();x.globalAlpha=1})});
[...S,...A].forEach(n=>{let ins=P.filter(p=>p.a==n).reduce((s,p)=>s+p.v,0),outs=P.filter(p=>p.s==n).reduce((s,p)=>s+p.v,0),v=Math.max(ins,outs),w=16,h=Math.max(36,v*.18+12),xx=n.x*innerWidth-w/2,yy=n.y*innerHeight-h/2;x.fillStyle=n.c;x.fillRect(xx,yy,w,h);x.fillStyle="#e9edf2";x.textAlign=n.x<.5?"right":"left";x.textBaseline="middle";x.fillText(n.n,n.x<.5?xx-10:xx+w+10,n.y*innerHeight)});
T.textContent="Total throughput "+Math.round(tot)+" GW";if(run>36)init();requestAnimationFrame(frame)}
requestAnimationFrame(frame);
</script></body></html>
Claude Sonnet 5frontier referenceOK
Show code
<!DOCTYPE html><html><head><meta charset="utf8"><title>Sankey Flow</title><style>html,body{margin:0;background:#0c0e13;overflow:hidden}canvas{display:block}</style></head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
let W,H;function resize(){W=cv.width=innerWidth;H=cv.height=innerHeight;}resize();addEventListener('resize',resize);
const NS=3,NT=4;
let base,freq,phase,acc,parts,t0,hues=['#4fc3f7','#81c784','#ffb74d'];
function init(){
  base=[];freq=[];phase=[];acc=[];
  for(let i=0;i<NS;i++){
    base.push([]);freq.push([]);phase.push([]);acc.push([]);
    for(let j=0;j<NT;j++){
      base[i].push(15+Math.random()*35);
      freq[i].push(0.1+Math.random()*0.25);
      phase[i].push(Math.random()*6.28);
      acc[i].push(0);
    }
  }
  parts=[];
  t0=performance.now();
}
init();
function smooth(t){return t*t*(3-2*t);}
function frame(now){
  const dt=0.016,tt=(now-t0)/1000;
  let flow=[];
  for(let i=0;i<NS;i++){
    flow.push([]);
    for(let j=0;j<NT;j++){
      flow[i].push(Math.max(4,base[i][j]*(1+0.4*Math.sin(tt*freq[i][j]+phase[i][j]))));
    }
  }
  let srcTot=[0,0,0],tgtTot=[0,0,0,0],grand=0;
  for(let i=0;i<NS;i++)for(let j=0;j<NT;j++){srcTot[i]+=flow[i][j];tgtTot[j]+=flow[i][j];grand+=flow[i][j];}
  const availH=H-140;
  const gapS=(NS-1)*14,gapT=(NT-1)*14;
  const scaleS=(availH-gapS)/grand,scaleT=(availH-gapT)/grand;
  let sy=[],ty=[];
  let acc1=70;
  for(let i=0;i<NS;i++){sy.push(acc1);acc1+=srcTot[i]*scaleS+14;}
  let acc2=70;
  for(let j=0;j<NT;j++){ty.push(acc2);acc2+=tgtTot[j]*scaleT+14;}
  const xS=90,xT=W-90;
  let anchorS=[],anchorT=[];
  for(let i=0;i<NS;i++){
    anchorS.push([]);let yy=sy[i];
    for(let j=0;j<NT;j++){const h=flow[i][j]*scaleS;anchorS[i].push(yy+h/2);yy+=h;}
  }
  for(let j=0;j<NT;j++){
    anchorT.push([]);let yy=ty[j];
    for(let i=0;i<NS;i++){const h=flow[i][j]*scaleT;anchorT[j].push(yy+h/2);yy+=h;}
  }
  ctx.fillStyle='#0c0e13';ctx.fillRect(0,0,W,H);
  for(let i=0;i<NS;i++)for(let j=0;j<NT;j++){
    const y0=anchorS[i][j],y1=anchorT[j][i],th=Math.max(1,flow[i][j]*scaleS);
    ctx.beginPath();
    let pts=[];
    for(let k=0;k<=20;k++){const p=k/20;const x=xS+(xT-xS)*p,y=y0+(y1-y0)*smooth(p);pts.push([x,y]);}
    ctx.moveTo(pts[0][0],pts[0][1]-th/2);
    for(const p of pts)ctx.lineTo(p[0],p[1]-th/2);
    for(let k=pts.length-1;k>=0;k--)ctx.lineTo(pts[k][0],pts[k][1]+th/2);
    ctx.closePath();
    ctx.fillStyle=hues[i]+'55';
    ctx.fill();
    acc[i][j]+=flow[i][j]*dt*0.06;
    while(acc[i][j]>=1){parts.push({i,j,t:0});acc[i][j]-=1;}
  }
  for(let p=parts.length-1;p>=0;p--){
    const pt=parts[p];pt.t+=dt*0.7;
    if(pt.t>=1){parts.splice(p,1);continue;}
    const y0=anchorS[pt.i][pt.j],y1=anchorT[pt.j][pt.i];
    const x=xS+(xT-xS)*pt.t,y=y0+(y1-y0)*smooth(pt.t);
    ctx.beginPath();ctx.fillStyle=hues[pt.i];ctx.arc(x,y,2.6,0,6.284);ctx.fill();
  }
  ctx.fillStyle='#eee';ctx.font='12px monospace';
  for(let i=0;i<NS;i++){
    const h=srcTot[i]*scaleS;
    ctx.fillStyle=hues[i];ctx.fillRect(xS-14,sy[i],14,h);
    ctx.fillStyle='#ddd';ctx.fillText('S'+i,xS-32,sy[i]+h/2+4);
  }
  for(let j=0;j<NT;j++){
    const h=tgtTot[j]*scaleT;
    ctx.fillStyle='#ccc';ctx.fillRect(xT,ty[j],14,h);
    ctx.fillText('T'+j,xT+20,ty[j]+h/2+4);
  }
  ctx.fillStyle='#9fe';ctx.font='16px monospace';
  ctx.fillText('total throughput: '+grand.toFixed(1),10,28);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script></body></html>
Claude Haiku 4.5frontier referenceOK
Show code
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><style>body{margin:0;background:#000;display:flex;justify-content:center;align-items:center;height:100vh}canvas{border:1px solid #666}#i{position:absolute;top:10px;left:10px;color:#fff;font-family:monospace;font-size:12px}</style></head>
<body>
<canvas id="c"></canvas>
<div id="i">Total: <span id="t">0</span></div>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d');
c.width=700;c.height=400;
let flows=[],part=[],time=0;
function init(){flows=[[10,12,15],[20,10,8],[8,18,12]];for(let s=0;s<3;s++){for(let t=0;t<4;t++){for(let p=0;p<Math.floor(flows[s][t%3])/3;p++){part.push({s,t,p:Math.random(),age:0});}}}
}
function f(){time+=0.016;flows.forEach((f,i)=>{f.forEach((v,j)=>{f[j]+=Math.sin(time*0.5+i*1.5+j*0.3)*0.3;f[j]=Math.max(1,f[j]);});});
ctx.fillStyle='#000';ctx.fillRect(0,0,c.width,c.height);
const sx=[100,100,100],sy=[80,150,220];const tx=[600,600,600,600],ty=[50,150,250,350];
ctx.fillStyle='#0af';sy.forEach((y,i)=>{ctx.beginPath();ctx.arc(sx[0],y,8,0,6.28);ctx.fill();});
ctx.fillStyle='#f0a';ty.forEach((y,i)=>{ctx.beginPath();ctx.arc(tx[0],y,8,0,6.28);ctx.fill();});
let total=0;flows.forEach((f,i)=>{f.forEach((v,j)=>{total+=v;const by=sy[i],ty_=ty[j];ctx.strokeStyle=`rgba(100,200,255,0.3)`;ctx.lineWidth=v/3;ctx.beginPath();ctx.moveTo(sx[0]+20,by);const cp1x=250,cp1y=by,cp2x=400,cp2y=ty_;ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,tx[0]-20,ty_);ctx.stroke();});});
part.forEach(p=>{p.age+=0.016;const t_=Math.min(p.age/3,1);if(t_>=1)p.age=-1;const by=sy[p.s],ty_=ty[p.t];const cp1x=250,cp1y=by,cp2x=400,cp2y=ty_;const c0=sx[0]+20,c1=cp1x,c2=cp2x,c3=tx[0]-20;const p0=by,p1=cp1y,p2=cp2y,p3=ty_;const x=Math.pow(1-t_,3)*c0+3*Math.pow(1-t_,2)*t_*c1+3*(1-t_)*t_*t_*c2+Math.pow(t_,3)*c3;const y=Math.pow(1-t_,3)*p0+3*Math.pow(1-t_,2)*t_*p1+3*(1-t_)*t_*t_*p2+Math.pow(t_,3)*p3;ctx.fillStyle='rgba(100,255,200,0.8)';ctx.beginPath();ctx.arc(x,y,3,0,6.28);ctx.fill();});
document.getElementById('t').textContent=total.toFixed(0);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:14b —56.4 sOK
qwen3-coder:30b —27.0 sOK
llama3.1:8b —122.2 sOK
gemma4:26b ——harness
mistral-small:24b —222.3 sOK
deepseek-r1:14b —65.2 sOK
qwen3:8b ——harness
qwen3.5:9b —65.4 sOK
qwq:32b —299.8 sOK
deepseek-r1:32b —288.8 sOK
command-r:35b —283.0 sOK