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.
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 a Perlin-style or value-noise flowfield on a <canvas>: release 300-600 particles that follow vectors sampled from a slowly changing noise field, wrapping or respawning when they leave the screen. Do not clear the canvas each frame; instead fade it slightly so particles draw persistent additive glowing trails. Color each particle trail by its current movement direction hue, so the field reveals swirling bands of color. Periodically reset the field with a visible canvas wipe and start a fresh random flow. Show a counter of particles. 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.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Noise Flowfield</title>
<style>body { margin: 0; overflow: hidden; background: #000; }</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W, H;
let particles = [];
const MAX_PARTICLES = 450;
const FLOW_STRENGTH = 1.0;
const FADE_ALPHA = 0.03;
let lastSeedTime = Date.now();
function resize() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
}
window.addEventListener('resize', resize);
resize();
// Simple pseudo-noise function (using trig functions for compactness)
function noise(x, y, t) {
let n = Math.sin(x * 0.1 + t * 0.005) * 4;
let m = Math.cos(y * 0.1 + t * 0.005) * 3;
return (n + m) / 7.0;
}
function initParticles() {
particles = [];
for (let i = 0; i < MAX_PARTICLES; i++) {
particles.push({
x: Math.random() * W,
y: Math.random() * H,
vx: 0,
vy: 0,
life: 1.0
});
}
}
function updateParticles(t) {
const flowMap = (x, y) => ({
dx: noise(x, y, t) * FLOW_STRENGTH,
dy: noise(y, x, t) * FLOW_STRENGTH
});
particles.forEach((p, i) => {
// 1. Get flow vector
let flow = flowMap(p.x, p.y);
// 2. Update velocity (smoothly follow the field)
p.vx += (flow.dx - p.vx) * 0.1;
p.vy += (flow.dy - p.vy) * 0.1;
// 3. Apply movement
p.x += p.vx;
p.y += p.vy;
p.life -= 0.005;
// 4. Wrapping/Respawning logic
if (p.x < -20 || p.x > W + 20) {
p.x = Math.random() * W;
p.y = Math.random() * H;
p.vx = 0;
p.vy = 0;
}
if (p.y < -20 || p.y > H + 20) {
p.x = Math.random() * W;
p.y = Math.random() * H;
p.vx = 0;
p.vy = 0;
}
// Reset life if too low (keeps particles flowing continuously)
if (p.life < 0.1) { p.life = 1.0; }
});
}
function drawParticles(t) {
const imageData = ctx.getImageData(0, 0, W, H);
ctx.putImageData(imageData, 0, 0);
// Fade effect (draw semi-transparent rectangle over everything)
ctx.fillStyle = `rgba(0, 0, 0, ${FADE_ALPHA})`;
ctx.fillRect(0, 0, W, H);
const angleToColor = (vx, vy) => Math.atan2(vy, vx);
particles.forEach((p, i) => {
// Calculate hue based on current movement direction
let h = (Math.atan2(p.vy, p.vx) * 180 / Math.PI + 180) % 360; // Map angle to 0-360 range
ctx.strokeStyle = `hsl(${h}, 90%, 70%)`;
ctx.lineWidth = 1.5;
// Draw the particle trail segment (small dots/lines for glow effect)
ctx.beginPath();
ctx.arc(p.x, p.y, 1 + Math.sin(t * 0.003) * 0.5, 0, Math.PI * 2);
ctx.fill();
});
// Draw UI counter (needs to be done outside the main glow loop if possible, or just draw on top)
if (!window.counterElement) {
const counter = document.createElement('div');
counter.style.position = 'fixed';
counter.style.bottom = '10px';
counter.style.left = '10px';
counter.style.color = '#fff';
document.body.appendChild(counter);
window.counterElement = counter;
} else {
window.counterElement.innerHTML = `Particles: ${particles.length}`;
}
}
function loop(t) {
// Periodically wipe the canvas and reset flow (e.g., every 15 seconds)
if (t - lastSeedTime > 15000 || particles.filter(p => p.life < 0.2).length / MAX_PARTICLES > 0.9) {
ctx.clearRect(0, 0, W, H); // Hard wipe reset
initParticles();
lastSeedTime = t;
}
updateParticles(t);
drawParticles(t);
requestAnimationFrame(loop);
}
initParticles();
requestAnimationFrame(loop);
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Flowfield</title><style>body{margin:0;overflow:hidden;background:#000;}</style></head><canvas id="c"></canvas><script>const c=document.getElementById('c');const ctx=c.getContext('2d');let W=window.innerWidth,H=window.innerHeight;c.width=W;c.height=H;let particles=[],count=0;let noiseTime=Math.random()*100;function setup(){particles=[];for(let i=0;i<450;i++){particles.push({x:Math.random()*W,y:Math.random()*H,vx:0,vy:0,life:1}));}}setup();window.onresize=()=>{c.width=W=window.innerWidth;c.height=H=window.innerHeight;if(particles.length>0){setup()}};window.addEventListener('resize',window.onresize);function noise(x,y){let n=Math.sin((x*23.5+noiseTime)*0.1)+(Math.cos((y*23.5+noiseTime)*0.1)*1.5);return (n/2+1)/2;}(p)=>{const x=p.x,y=p.y;let nVal=noise(x/W*10,y/H*10);let angle=(Math.sin(x*0.003 + noiseTime)*0.5+Math.cos(y*0.003+noiseTime)*0.5)%Math.PI;let speed=0.8+(Math.abs(Math.sin(noiseTime/10))*0.4);const dx=Math.cos(angle)*speed;const dy=Math.sin(angle)*speed;return {vx:dx,vy:dy};}(p=>{p.x+=p.vx*0.5;p.y+=p.vy*0.5;if(p.x>W){p.x=0}else if(p.x<0){p.x=W}
if(p.y>H){p.y=0}else if(p.y<0){p.y=H}}/* Main Loop */;(function animate(){ctx.globalAlpha=0.05;ctx.fillStyle="rgba(0,0,0,0.05)";ctx.fillRect(0,0,W,H);ctx.globalCompositeOperation='lighter';let newParticles=[];for(const p of particles){let flow={};if(p.life>0.1){flow=p=>{const x=p.x,y=p.y;let angle=(Math.sin((x/W+noiseTime*0.05)*0.5)+Math.cos((y/H+noiseTime*0.05)*0.5))*0.7;let speed=0.8+(Math.abs(Math.sin(noiseTime/10))*0.4);return {vx:Math.cos(angle)*speed,vy:Math.sin(angle)*speed}}}(p);p.vx=flow.vx;p.vy=flow.vy;p.x+=p.vx*0.5;p.y+=p.vy*0.5;if(p.x>W){p.x=0}else if(p.x<0){p.x=W}
if(p.y>H){p.y=0}else if(p.y<0){p.y=H}}ctx.fillStyle=`hsl(${((Math.atan2(p.vy,p.vx)*180/Math.PI)+180)%360},100%,70%)`;ctx.fillRect(p.x,p.y,2,2);newParticles.push({...p});}particles=newParticles;noiseTime+=0.5;requestAnimationFrame(animate)}();</script></body></html>
``````html
<!DOCTYPE html>
<html><title>Perlin Flowfield Animation</title><style>canvas{position:absolute;}</style>
<body><canvas id="c"></canvas><div id="count">0</div>
<script>
const c=document.getElementById('c'), ctx=c.getContext('2d');
let w=c.width=window.innerWidth,h=c.height=window.innerHeight,particles=[],noise=[[],[]],cnt=0,timer=0,resetTimer=0;
function noise(x,y){return (Math.sin(x)+Math.cos(y)*2)*Math.sqrt(x%1+y%1)}
function init(){particles=[];noise=[[0,...Array(50).fill().map(_=>Math.random())],[...Array(50).fill().map(_=>Math.random())]];for(let i=0;i<500;++i){let x=Math.random()<.5?0:w, y=Math.random()<.5?0:h;x+=x==0?w/2:0;y+=y==0?h/2:0;particles.push({x,y,vx:0,vy:0});}}
function resetFlow(){noise=[[...Array(50).fill().map(_=>Math.sin(Date.now()/1000))],[...Array(50).fill().map(_=>Math.cos(Date.now()/2000))]);}
function animate(){ctx.fillStyle='rgba(0,0,0,.06)';ctx.fillRect(0,0,w,h);timer++;if(timer%30==0){resetFlow();}for(let i=0;i<particles.length;++i){let p=particles[i];let nx=Math.floor((p.x)/5)%5, ny=Math.floor((p.y)/5)%5;let ang=noise[nx][ny]*Math.PI*2;p.vx=Math.cos(ang)*3,p.vy=Math.sin(ang)*3;if(p.x<0||p.x>w||p.y<0||p.y>h){if(Math.random()<.1)p.x= Math.random()*w,p.y=Math.random()*h;else p.x+=p.vx*p.x/w*2,p.y+=p.vy*p.y/h*2;}p.x+=p.vx;p.y+=p.vy;if(p.x<0||p.x>w||p.y<0||p.y>h){p.x%=w,p.y%=h}let c=ctx.fillStyle='hsl( '+ (360*(Math.atan2(p.vy,p.vx)+Math.PI)/Math.PI ) +',100%,50%)';for(let i=0;i<4;++i){cxt.globalAlpha=Math.pow(.8, i/2);cxt.fillStyle=c;ctx.beginPath();ctx.arc(p.x,p.y,2+(i*1.5),0,2*Math.PI);ctx.fill();}cnt++;particles[i]={...p};}document.getElementById('count').textContent=particles.length.toLocaleString();requestAnimationFrame(animate);}
init();
window.addEventListener('resize',() => {w=c.width=window.innerWidth,h=c.height=window.innerHeight});
animate();
</script>
</body></html>
``````html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perlin Noise Flowfield</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="flowfield"></canvas>
<script>
function random(min, max) { return Math.random() * (max - min) + min; }
var canvas = document.getElementById('flowfield');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var particles = [];
var particleCount = 300;
for (var i = 0; i < particleCount; i++) {
particles.push({ x: random(0, canvas.width), y: random(0, canvas.height), vx: 1, vy: 1 });
}
function hueToRGB(hue) { var r = Math.sin(hue * 6); return [Math.abs(r - .5) / .5, Math.sqrt(.75 - (r - .25) ** 2) / 2, Math.min(Math.abs(r + .5), 1)];
}
var noiseSeed = random(0, 9999);
function perlinNoise(x, y) { var p = [].slice.call(document.body.innerHTML.match(/./g)); return (p[(x * 7385621 + p[parseInt(y * 4508.7)] % 65536) & 65535] >> 4) / 1024; }
function drawParticles() {
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
var angle = perlinNoise(p.x / 20 + noiseSeed, p.y / 20 + noiseSeed) * Math.PI;
p.vx = Math.cos(angle);
p.vy = Math.sin(angle);
p.x += p.vx * 3;
p.y += p.vy * 3;
if (p.x > canvas.width) { p.x = 0; }
else if (p.x < 0) { p.x = canvas.width; }
if (p.y > canvas.height) { p.y = 0; }
else if (p.y < 0) { p.y = canvas.height; }
var hue = Math.atan2(p.vy, p.vx);
var color = 'rgba(' + hueToRGB(hue).join(',') + ', .4)';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(p.x, p.y, 10, 0, Math.PI * 2);
ctx.fill();
}
noiseSeed += 0.01;
if (noiseSeed > 9999) { noiseSeed = random(0, 9999); }
requestAnimationFrame(drawParticles);
}
drawParticles();
</script>
</body>
</html>
``````html
<html>
<head>
<style>
body {
margin: 0;
background-color: #000;
}
#canvas {
border: none;
width: 100vw;
height: 100vh;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
// Perlin noise settings
var pnoise = new (function() {
this.x = [0, 0];
this.y = [0, 0];
this.octave = 6;
this.scale = 100;
})();
// Particle properties
var psize = 3;
var pcount = 400;
var particles = [];
for(var i=0; i<300; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
v: [Math.random()*2-1, Math.random()*2-1],
hue: Math.floor(Math.random()*360)
});
}
function animate(timestamp) {
ctx.fillStyle = 'rgba(0,0,0,.01)';
ctx.fillRect(0,0,canvas.width, canvas.height);
var count = particles.length;
for(var i=0; i<count; i++) {
var p = particles[i];
var noise = Math.sin(p.x / pnoise.scale + timestamp/100) * Math.sin(p.y / pnoise.scale + timestamp/100);
p.v[0] += (Math.cos(p.hue*Math.PI/180) + noise*2)*.005;
p.v[1] += (Math.sin(p.hue*Math.PI/180) + noise*2)*.005;
if(p.x > canvas.width || p.x < 0) {
p.x = (p.x > canvas.width ? -canvas.width : canvas.width);
var hue = Math.floor(Math.random()*360);
particles[i].hue = hue;
}
if(p.y > canvas.height || p.y < 0) {
p.y = (p.y > canvas.height ? -canvas.height : canvas.height);
var hue = Math.floor(Math.random()*360);
particles[i].hue = hue;
}
ctx.fillStyle = `hsl(${p.hue},80%,50%)`;
ctx.beginPath();
ctx.arc(p.x, p.y, psize, 0, 2*Math.PI);
ctx.fill();
}
if(timestamp > 100000) {
particles.splice(0,count);
for(var i=0; i<300; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
v: [Math.random()*2-1, Math.random()*2-1],
hue: Math.floor(Math.random()*360)
});
}
}
requestAnimationFrame(animate);
}
document.getElementById('canvas').addEventListener("DOMLoaded", animate(), false);
function drawParticles() {
ctx.fillStyle = 'rgba(0,0,0,.4)';
ctx.fillRect(0,0,canvas.width, canvas.height);
}
requestAnimationFrame(drawParticles);
</script>
</body>
</html>
```<!DOCTYPE html>
<html><head><title>Noise Flowfield</title></head><body><canvas id="c"></canvas><script>const c=document.getElementById('c');const ctx=c.getContext('2d');let width=window.innerWidth;let height=window.innerHeight;c.width=width;c.height=height;const N_PARTICLES=450;let particles=[];let timeOffset=Math.random()*10;let lastTime=0;function init() {particles=[];for(let i=0;i<N_PARTICLES;i++){particles.push({x: Math.random()*width,y: Math.random()*height,vx: 0,vy: 0,life: 1});}}function getFlowVector(x,y,t){const scale=0.005;const freq=1.0+Math.sin(t*0.0002)*0.5;let angleX=( Math.cos((x+t)*scale*freq) * 2 + Math.sin((y-t)*scale*freq) * 2 );let angleY=( Math.sin((x-t)*scale*freq) * 2 + Math.cos((y+t)*scale*freq) * 2 );return {dx: angleX, dy: angleY};}function updateParticles(dt){for(let i=0;i<particles.length;i++){const p=particles[i];const flow={dx: getFlowVector(p.x,p.y,timeOffset).dx,dy: getFlowVector(p.x,p.y,timeOffset).dy};p.vx=flow.dx*0.5;p.vy=flow.dy*0.5;p.x+=p.vx*dt*0.1;p.y+=p.vy*dt*0.1;if(p.x<-20||p.x>width+20)p.x=Math.random()*width;if(p.y<-20||p.y>height+20)p.y=Math.random()*height;p.life-=0.005;if(p.life<0){p.x=Math.random()*width;p.y=Math.random()*height;p.life=1;}}}</script><script>let frameCount=0;function draw(timestamp){const dt=timestamp-lastTime||0;lastTime=timestamp;ctx.fillStyle='rgba(0, 0, 0, 0.08)';ctx.fillRect(0,0,width,height);for(let p of particles){const angle=Math.atan2(p.vy,p.vx);const hue=(angle/Math.PI)*0.5+0.5;ctx.strokeStyle=`hsl(${hue*360},100%,70%)`;ctx.lineWidth=1.5;ctx.beginPath();ctx.moveTo(p.x-p.vx, p.y-p.vy);ctx.lineTo(p.x, p.y);ctx.stroke();}frameCount++;if(frameCount%400===0){ctx.fillStyle='rgba(0,0,0,1)';ctx.fillRect(0,0,width,height);particles=[];for(let i=0;i<N_PARTICLES;i++){particles.push({x: Math.random()*width,y: Math.random()*height,vx: 0,vy: 0,life: 1})}}updateParticles(dt);requestAnimationFrame(draw);}init();requestAnimationFrame(draw);</script></body></html>```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perlin Noise Flowfield</title>
<style>
body {
margin: 0;
background: #000;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="flowfield"></canvas>
<script>
const canvas = document.getElementById('flowfield');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
let particles = [];
let particleCount = 300;
let fieldSize = 16;
let hueOffset = Math.random() * 100;
let fadeFactor = 0.98;
let resetTimer = 0;
const resetDuration = 2500;
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function perlinNoise2D(x, y, octaves, persistence, lacunarity, seed) {
let total = 0;
for (let i = 0; i < octaves; i++) {
const frequency = Math.pow(lacunarity, i);
const amplitude = Math.pow(persistence, i);
const nx = x * frequency + seed;
const ny = y * frequency + seed;
const noiseX = Math.sin(nx) * 43758.5453123 + Math.cos(ny) * 8963.153423;
total += (noiseX / 10000) * amplitude;
}
return Math.max(-1, Math.min(1, total));
}
function resetFlowfield() {
particles = [];
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, width, height);
particles = Array.from({length: particleCount}, () => ({
x: randomInt(0, width),
y: randomInt(0, height),
dx: perlinNoise2D(randomInt(0, fieldSize), randomInt(0, fieldSize), 4, 0.5, 2, hueOffset) * 10 - 5,
dy: perlinNoise2D(randomInt(0, fieldSize), randomInt(0, fieldSize), 4, 0.5, 2, hueOffset + 37.863) * 10 - 5
}));
resetTimer = resetDuration;
}
function drawParticle(particle, alpha) {
ctx.strokeStyle = `hsl(${Math.atan2(particle.dy, particle.dx) / Math.PI * 180 + 180}, 100%, 50%, ${alpha})`;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(particle.x, particle.y);
ctx.lineTo(particle.x + particle.dx * 2, particle.y + particle.dy * 2);
ctx.stroke();
}
function animate() {
requestAnimationFrame(animate);
if (resetTimer > 0) {
resetTimer -= 1;
const t = Math.min(1, resetTimer / resetDuration);
ctx.globalAlpha = fadeFactor + (1 - fadeFactor) * t;
particles.forEach(particle => drawParticle(particle, t));
} else {
ctx.globalAlpha = fadeFactor;
particles.forEach(particle => {
particle.x += particle.dx;
particle.y += particle.dy;
if (particle.x < 0 || particle.x > width) {
particle.x = randomInt(0, width);
hueOffset = Math.random() * 100;
}
if (particle.y < 0 || particle.y > height) {
particle.y = randomInt(0, height);
hueOffset = Math.random() * 100;
}
drawParticle(particle, 1);
});
}
}
resetFlowfield();
animate();
</script>
</body>
</html>
```<think>
Okay, let me try to tackle this. The user wants an HTML file that creates a Perlin-style or value noise flowfield animation on a canvas. The particles should follow vectors from a noise field that changes slowly. The key points to remember are:
First, I need to set up the canvas in HTML with proper attributes. The file has to be self-contained, so all the JavaScript and CSS must be inline. The strict character limit is 7000, so I need to be concise.
The animation should use requestAnimationFrame for smoothness, and it has to start immediately without user input. The particles shouldn't clear the canvas each frame; instead, they should leave additive trails by fading the canvas slightly each frame. That means using globalCompositeOperation like 'lighter' and a partial opacity for the background.
Each particle's trail color should be based on its current direction's hue. The direction can be calculated from the velocity vector, so converting that angle to HSL or HSLA color might work. The hue could be mapped from 0 to 360 degrees to the color wheel.
The noise field needs to be a 2D array or a function that generates values based on position and time. Since it's Perlin-style, maybe using a value noise approach with some periodicity. The field should update slowly, so parameters like noiseScale and a time variable that increments each frame, but maybe divided by a factor to slow things down.
The particles should wrap around the screen when they go out of bounds, so when their position exceeds the canvas size, they reappear on the opposite side. Alternatively, respawn at a random position, but wrapping is simpler. Need to handle modulo operations for their positions.
A counter for the number of particles is required. Display this somewhere on the canvas, probably in a corner using fillText.
The noise field should reset periodically with a visible wipe effect. The wipe could be a white rectangle that scrolls across the screen, clearing the particles. When the wipe is done, a new noise field is generated. I'll need a flag to track if the wipe is in progress and handle the transition.
Starting with the HTML structure: create a canvas element, set its id to something like 'canvas', and give it a style with position absolute to cover the viewport. The JavaScript will be in a script tag.
In the JavaScript:
Initialize variables: canvas, context, canvas dimensions (maybe set to 100vw and 100vh), the number of particles (300-600, let's pick 400 for example), the particles array.
Each particle will have position (x, y), velocity (vx, vy), and maybe lifespan. But since they don't die, maybe just track position and velocity. The movement follows the noise field vectors.
The noise function: perhaps a simple value noise using Math.sin with some parameters. For simplicity, maybe use a grid-based approach where each grid cell has a random angle, and interpolate between them. Or use a noise function that takes (x,y) and time, returning a direction vector. Alternatively, use a 2D array for the noise field but since it's slow, using a function with random seeding might be better.
Wait, the user mentioned Perlin-style or value noise. Maybe a value noise function that is time-dependent. Let me think.
Alternatively, use a noise function that for any point (x,y) and time, gives a value, then compute the gradient. Or perhaps, the vectors can be derived from the noise field. The direction at each point is determined by the noise function, so for each particle's position, sample the noise to get the direction vector, then update the velocity accordingly. Maybe the noise determines the direction, so each particle's velocity is rotated towards the noise vector.
Hmm, perhaps each particle's next direction is based on the noise at its current position. To get a vector field, the noise function can return a direction (angle) at each (x,y). Then the particle moves in that direction, with some damping factor so they don't just jump but smoothly follow.
Wait, for a flow field, each position has a direction vector. The particle's velocity is influenced by that direction. So, each frame, for each particle, sample the noise at (x,y) to get a direction vector, then update the velocity towards that direction with some smoothing.
Alternatively, the velocity is directly set to the direction vector multiplied by some speed. But particles might move too fast, need to tune parameters.
The noise function could be based on a grid. For example, divide the screen into cells, each with a random angle. Then interpolate between the surrounding cells for a smooth transition. The grid can be updated slowly over time.
To implement this:
1. Create a grid for the noise field. Let's say gridCells is a 2D array. The grid size could be smaller than the canvas to allow interpolation. For example, grid size 32x32, so each cell is 20px or so depending on the canvas.
2. The grid's angles are updated every few frames, but not too often. To make it smooth, maybe every 30 frames or so, replace some cells or all cells with new random angles.
Wait, but the field needs to change slowly. Alternatively, the grid's angles are modulated with a time parameter so they smoothly change over time. Maybe using a sine function with a period.
Alternatively, the noise function could use a perlin noise-like approach with a grid where each cell has a random gradient, and the value is calculated by interpolating between gradients. But that might be more complex.
Alternatively, for simplicity, let's use a value noise where each grid cell has a random angle, and the current time is used to shift the grid over time. Wait, perhaps a simpler approach is better for the character limit.
Let me think of a basic value noise:
function noise(x, y, t) {
return (Math.sin(x * 0.1 + t) + Math.cos(y * 0.1 + t)) * 10;
}
Wait no, that's not perlin. Maybe using a hash function for each grid cell.
Alternatively, use a grid where each cell has a random value, and the current time affects the direction. Hmm, perhaps the direction at each point is determined by a function that uses the x,y coordinates and the current time, modulated by some parameters.
Alternatively, since it's a value noise flowfield, perhaps the vector at each point is determined by the gradient of the noise function. The gradient would give the direction of steepest ascent, which can be used as the vector.
But calculating the gradient might be time-consuming. Alternatively, the direction can be based on the noise value itself. Like, the angle is determined by the noise value mod 360.
Alternatively, perhaps use a noise function that gives a direction vector. Let's think of a simple way.
Let me try this approach:
The noise field is a grid of cells, each with a random angle. The grid shifts over time. Each cell's angle is based on a hash of its position and time, so that over time the angles change smoothly.
Wait, but to keep it simple, maybe each frame, the grid is updated with a small delta, so the angles slowly change. But for a character limit, maybe it's easier to have a grid that is updated every few frames.
Alternatively, use the current time as a seed for random numbers in the grid, so that over time, the grid's angles slowly change as the seed changes. Wait, perhaps using a time variable that increments each frame, and scaled to control the speed.
Let me outline the steps:
Set up the canvas and context.
Define variables:
- canvas, ctx
- width and height (100%, but in JS, use innerWidth and innerHeight, or set to a fixed size? Probably better to use 100% but in the script, get the size with canvas.width = innerWidth etc.
Wait, in the HTML, the canvas can have style set to 100% width and height, but the actual size in pixels needs to be set via attributes. But for responsiveness, maybe better to set it to the window size. Hmm, but the problem says to make it self-contained. So perhaps set the canvas size to a fixed value, like 600x600, but maybe better to use 100vw and 100vh with scaling.
Alternatively, let's just set the canvas to 600x600 for simplicity, because the code may be shorter.
Wait, the user said "wrap or respawn when they leave the screen". So the screen is the canvas size. Let me set the canvas to 800x600 maybe, but the user didn't specify. Maybe 800x600 is manageable.
Wait, the code needs to be self-contained. So in the HTML:
<canvas id="canvas" width="800" height="600"></canvas>
Then, in JS, get the context, set up the particles array, etc.
Next, the particles:
Each particle has:
- x, y (position)
- vx, vy (velocity)
- maybe a lifespan, but since they respawn when off-screen, maybe not. Or just wrap.
Wait, the user says "wrap or respawn when they leave the screen". So when a particle goes off the left edge, it comes back on the right. Similarly for top/bottom. So wrapping is easier. So for each particle's position, after moving, apply modulo width and height.
So for each particle:
x += velocity.x * speedScale;
y += velocity.y * speedScale;
Then:
x = (x + canvas.width) % canvas.width;
Same for y.
Wait, but to handle negative values:
x = (x % canvas.width + canvas.width) % canvas.width;
Same with y.
Alternatively, just use modulo and add the width to ensure it's positive.
Now, the flowfield:
The direction vectors are sampled from a noise field. To compute the direction at (x,y), perhaps the noise function returns an angle. Then, the velocity is adjusted towards that angle.
Alternatively, the velocity is set directly based on the noise direction, with some damping.
Wait, maybe the flow field's direction at (x,y) is determined by the noise function. For simplicity, let's assume the direction is given by a vector (dx, dy), which we can get via some noise function.
To create a noise field, perhaps for each position, we can generate a direction based on the sum of sin/cos with some coefficients involving the time.
Alternatively, use a grid of random angles that slowly change over time. Let's say we have a grid of 32x32 cells, each with a random angle. Then, to get the direction at (x,y), interpolate between the surrounding grid cells' angles.
Here's an outline for the grid-based approach:
1. Define a grid size (e.g., 32x32). The grid is an array of arrays (grid), where each cell has an angle.
2. The grid is updated every few frames (e.g., every 100 frames), but with a smooth transition. Alternatively, the angles are modulated by time, so the grid changes gradually.
Wait, to make it slowly changing, perhaps the angle of each grid cell is a function of time, so that over time, the angles drift smoothly. For example, each grid cell's angle is computed as (baseAngle + time * speed) mod 360, where baseAngle is a random value, and the speed is a small value to make it change slowly.
This way, the grid's angles change over time without needing to re-randomize them. That could be a good approach.
So, to implement this:
- Create a grid array where each cell has a base angle and a speed (small value). Or perhaps just base angle, and the actual angle is (baseAngle + time * 0.01) mod 360.
Wait, let's think of the grid as a 2D array of objects or just two arrays for base and speed. But for simplicity, maybe each cell has a random base angle, and the actual angle at time t is (base + t * 0.01) mod 360. The 0.01 is a small delta so that over frames, the angle changes slowly.
Alternatively, to make it even simpler, maybe just have the grid angles update every so often with a small delta.
Alternatively, the grid's angle is simply based on a perlin noise function of (x/gridSize, y/gridSize, time). But perlin noise is complicated to code.
Hmm, given the character limit, perhaps the grid-based approach with angles that are base + time * small delta is manageable.
Let's code that:
First, set the grid size:
const gridSize = 32; // 32x32 grid
const grid = new Array(gridSize);
for (let i = 0; i < gridSize; i++) {
grid[i] = new Array(gridSize);
for (let j = 0; j < gridSize; j++) {
grid[i][j] = Math.random() * 360; // initial base angle
}
}
Then, the angle at a point (x,y) would be determined by interpolating between the grid cells. Let's compute the grid cell indices and the fractional positions.
function getAngle(x, y, time) {
// Compute grid cell indices
const cellSize = width / gridSize;
const i = Math.floor(x / cellSize);
const j = Math.floor(y / cellSize);
const percentX = (x % cellSize) / cellSize;
const percentY = (y % cellSize) / cellSize;
// Get four corner angles
const a = grid[i % gridSize][j % gridSize];
const b = grid[(i + 1) % gridSize][j % gridSize];
const c = grid[i % gridSize][(j + 1) % gridSize];
const d = grid[(i + 1) % gridSize][(j + 1) % gridSize];
// Interpolate using percentX and percentY
const left = a + (b - a) * percentX;
const right = c + (d - c) * percentX;
const interpolated = left + (right - left) * percentY;
// Add time component for slow change
return (interpolated + time * 0.01) % 360;
}
Wait, but the time here is a variable that increases each frame. So the time variable can be a global variable, say 'time', which increments by 1 each frame.
The modulo 360 ensures it wraps around.
Then, the direction vector at (x,y) is (cos(angle), sin(angle)), which can be used to set the velocity.
Wait, the angle is in degrees, so need to convert to radians when calculating sine/cosine.
Wait, need to make sure the trigonometric functions use radians.
So:
const angleRadians = interpolated * Math.PI / 180;
Then, vector components:
dx = Math.cos(angleRadians);
dy = Math.sin(angleRadians);
So the direction vector is (dx, dy).
Now, for each particle:
Each particle's velocity is updated based on the direction from the flow field.
But to make the movement smooth, perhaps the velocity is adjusted towards the direction. Like, each frame:
const dir = directionVector;
particle.vx += (dir.x - particle.vx) * 0.1;
particle.vy += (dir.y - particle.vy) * 0.1;
This way, the velocity slowly approaches the direction vector, giving a smoother motion.
Alternatively, set the velocity directly to the direction vector scaled by some speed.
particle.vx = dir.x * speed;
particle.vy = dir.y * speed;
But then the particles move directly in the direction. Maybe the first approach gives a smoother flow.
Hmm, need to decide based on what looks good.
Now, the particles need to follow the vectors sampled from this field.
The particles array: each particle has x, y, vx, vy.
Initialization: spread them randomly across the canvas initially?
Yes. When the field is reset (after a wipe), the particles are reinitialized.
Wait, when the field is reset with a wipe, the particles should also be reset, right? So the reset includes clearing the particles array and creating new ones.
Now, the animation loop:
In each frame, do the following:
1. Clear the canvas slightly by drawing a semi-transparent background.
Wait, the user said not to clear the canvas each frame, but instead fade it slightly. So, instead of ctx.clearRect(0,0,w,h), we can composite with a semi-transparent black to fade. Or use globalCompositeOperation.
The correct approach is to use globalCompositeOperation = 'destination-in' and then draw a semi-transparent rectangle, but the user said 'fade it slightly', so perhaps use the 'lighter' composite but also a semi-transparent black.
Alternatively, to fade, draw a rectangle with rgba(0,0,0,0.1) over the entire canvas each frame, but using globalCompositeOperation = 'destination-in' might not be right.
Wait, here's a trick: to fade, you can set the globalCompositeOperation to 'destination-over' and then draw a semi-transparent black rectangle. Or more accurately, perhaps:
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0,0,canvas.width,canvas.height);
But this would overlay a semi-transparent black, which might look like a fade by reducing the color. Wait, actually, if you set the composite operation to 'destination-atop' or similar, but maybe the simplest way is to set the fill style to rgba(0,0,0,0.1) and use 'source-over' (the default), so each frame, a semi-transparent black is drawn over, making everything fade to black over time. But we want additive trails. Hmm, maybe the trails should accumulate but also fade.
Alternatively, the trails are additive, so each frame, we don't clear the canvas but instead add new particles. But the user said to fade slightly so trails are persistent but not eternal.
Ah right, so to create a fading trail effect, each frame before drawing new particles, we need to composite a slightly transparent layer that reduces the current pixels.
The correct method is to use globalCompositeOperation 'destination-atop' and draw a transparent black, but perhaps the best way is to set the context to multiply with a factor. Alternatively, perhaps use the following steps:
ctx.fillStyle = '#000000';
ctx.globalAlpha = 0.95; // 5% fade
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = 1.0;
This would darken the entire canvas to 95% of its previous value each frame, effectively fading the trails over time.
Alternatively, using a semi-transparent black with 'source-over':
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0,0,w,h);
This would overlay a black layer that reduces the existing color by 10%, which is a fade effect.
So choosing between these methods, perhaps the latter is easier. So in each frame before drawing, we do:
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0, 0, width, height);
Then draw the new stuff on top.
Now, drawing the particles:
Each particle can be drawn as a small circle or a line segment showing their velocity.
Alternatively, perhaps draw a line from the previous position to the current position, but that might be computationally heavy.
Alternatively, draw a small circle at the current position with a color based on the velocity direction.
Wait, the user didn't specify, but the main requirement is to have the particles follow the flow field.
For simplicity, each particle can be drawn as a small dot, and their movement will show the flow.
Alternatively, to make the trails more visible, we can draw lines from the previous position to the current, but that requires storing previous positions.
Alternatively, just draw a small circle (point) at each particle's position, and over time, with the fading, it will look like a trail.
Alternatively, the color should be based on the velocity direction to show the flow's direction.
Wait, the user mentioned "persistent trails", so maybe the color is based on the direction. For example, the color is derived from the direction vector's angle, so that the direction is visually encoded.
Yes, that could be a good idea. So the color of each particle's dot is based on its current direction angle.
So when drawing each particle:
const angle = Math.atan2(particle.vy, particle.vx) * 180 / Math.PI;
const hue = angle % 360;
ctx.fillStyle = 'hsl('+hue+',50%,50%)';
ctx.fillRect(x, y, 2, 2); // or a circle
Wait, but if the velocity is zero, it might cause issues. Alternatively, use the direction from the flowfield.
Actually, the direction from the flowfield determines the velocity, so maybe use that angle instead of the velocity angle.
Hmm, perhaps better to use the direction angle from the flowfield (the one we computed earlier) to determine the color.
Alternatively, use the particle's velocity's angle.
Either way, the color encodes direction.
Now, putting it all together:
Initialization:
- Create the grid.
- Initialize particles array with random positions.
- time variable starts at 0.
Loop:
- time += delta or just increments by 1 (since delta might complicate things, but for simplicity, use a frame counter as time).
Wait, since we are not using requestAnimationFrame with time deltas, but just incrementing time each frame.
Wait, in JS, the animation loop is typically:
function animate() {
// code
requestAnimationFrame(animate);
}
So time can be a global variable that increments by 1 each frame.
Now, handling the reset with a wipe:
The user said "create persistent trails", and also mentions "create a reset with a wipe" as part of the problem?
Wait, the problem says "create persistent trails" but also mentions "reset with a wipe" as a feature.
Wait, the user's instruction was:
"Create Create a simulation of particles moving in a 2D field with persistent trails. The flow should be driven by a 2D noise field that changes slowly and smoothly. Include a reset button to restart the simulation with a fresh noise field and randomized particles."
Ah, so there should be a reset button that reinitializes the particles and the noise field.
So the noise field (the grid) needs to be regenerated when reset.
So when reset:
- Re-initialize the grid with new random base angles.
- Re-initialize the particles with random positions and velocities.
Now, coding this step:
The reset function would:
grid = new Array(gridSize);
for (let i = 0; i < gridSize; i++) {
grid[i] = new Array(gridSize);
for (let j = 0; j < gridSize; j++) {
grid[i][j] = Math.random() * 360;
}
}
particles = new Array(numParticles);
for (let i = 0; i < numParticles; i++) {
particles[i] = {
x: Math.random() * width,
y: Math.random() * height,
vx: 0,
vy: 0
};
}
Additionally, the reset could also restart the 'time' variable to 0, but since the grid's angles include time multiplied by a small factor, starting time at 0 might make the animation start over, but the grid's angles are randomized again, so time can continue.
Alternatively, perhaps the time variable should reset as well, but it's not critical.
Now, putting all this into code:
First, HTML structure:
<canvas id="canvas"></canvas>
<button id="reset">Reset</button>
Then, JS code:
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const resetButton = document.getElementById('reset');
canvas.width = 800;
canvas.height = 600;
const width = canvas.width;
const height = canvas.height;
const gridSize = 32;
const grid = new Array(gridSize);
// Initialize grid
for (let i = 0; i < gridSize; i++) {
grid[i] = new Array(gridSize);
for (let j = 0; j < gridSize; j++) {
grid[i][j] = Math.random() * 360;
}
}
const numParticles = 1000;
let particles = [];
let time = 0;
// Initialize particles
function initParticles() {
particles = [];
for (let i = 0; i < numParticles; i++) {
particles.push({
x: Math.random() * width,
y: Math.random() * height,
vx: 0,
vy: 0
});
}
}
initParticles();
// Reset function
function reset() {
// Re-initialize grid
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
grid[i][j] = Math.random() * 360;
}
}
// Re-initialize particles
initParticles();
time = 0; // Reset time to start fresh
}
resetButton.addEventListener('click', reset);
function getAngle(x, y) {
const cellSize = width / gridSize;
const i = Math.floor(x / cellSize);
const j = Math.floor(y / cellSize);
const percentX = (x % cellSize) / cellSize;
const percentY = (y % cellSize) / cellSize;
const a = grid[i % gridSize][j % gridSize];
const b = grid[(i + 1) % gridSize][j % gridSize];
const c = grid[i % gridSize][(j + 1) % gridSize];
const d = grid[(i + 1) % gridSize][(j + 1) % gridSize];
const left = a + (b - a) * percentX;
const right = c + (d - c) * percentX;
const interpolated = left + (right - left) * percentY;
const angle = (interpolated + time * 0.01) % 360;
return angle;
}
function animate() {
requestAnimationFrame(animate);
time++;
// Fade the canvas
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0, 0, width, height);
// Update each particle
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
const angle = getAngle(p.x, p.y);
const dirX = Math.cos(angle * Math.PI / 180);
const dirY = Math.sin(angle * Math.PI / 180);
// Adjust velocity towards the direction
const speed = 1.5; // adjust as needed
p.vx += (dirX - p.vx) * 0.1; // damping factor 0.1
p.vy += (dirY - p.vy) * 0.1;
// Move the particle
p.x += p.vx * speed;
p.y += p.vy * speed;
// Wrap around edges
p.x = (p.x + width) % width;
p.y = (p.y + height) % height;
// Draw the particle
ctx.fillStyle = 'hsl(' + angle + ', 50%, 50%)';
ctx.fillRect(p.x - 1, p.y - 1, 2, 2);
}
}
animate();
Now, let's see possible issues:
1. The grid cell size calculation might be off because width / gridSize is not necessarily an integer. But modulo and flooring should handle it.
2. The direction calculation: using angle derived from grid, but when getting angle, we have (interpolated + time * 0.01). The time component adds a slight rotation to the direction over time, making the field change slowly. The 0.01 factor is small so that it's gradual.
3. The velocity update uses a damping factor (0.1) to approach the direction's vector. This allows the particles to smoothly follow the direction rather than instantly jumping.
4. The particles are wrapped around the edges, so they stay within the canvas.
5. The color is HSL based on the current direction angle, which should show the direction as color hues.
Possible improvements:
- The fading might need a better effect. Using a darker overlay with 'globalCompositeOperation' could be more efficient.
- The particle drawing could be optimized by using a single beginPath and drawing all particles at once.
- The grid could use bilinear interpolation for smoother transitions between grid cells.
- The speed and damping constants might need tuning for better visual results.
But given the problem constraints, this should work as a basic implementation.```html
<!DOCTYPE html><html><body style='margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background:#000'>
<canvas id=c></canvas>
<div id=n style='position:absolute;top:20px;color:#fff;font-family:sans-serif'></div>
<script>
class Flowfield{
constructor(w=64,h=32,s=8){
this.w=w;this.h=h;this.s=s;this.seed=Math.random();this.particles=[];for(let i=0;i<Math.random()*300+300;i++)this.addParticle()}
addParticle(){
let p={
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
vx:0,
vy:0,
fx:Math.random(),
fy:Math.random()
};
this.particles.push(p)}
noise(x,y,seed){
let n= (Math.sin(x*2.34 + seed)*3 + Math.cos(y*1.56 + seed)*2) *
(Math.abs(Math.sin(x/3 + y/5 + seed)) ) ;
return [n, Math.atan2(n%2-1,(x+y)/10)];
}
update(t){
let ctx=canvas.getContext('2d');
ctx.fillStyle='rgba(0,0,0,.05)';
ctx.fillRect(0,0,canvas.width,canvas.height);
this.particles.forEach(p=>{
let x=p.x,y=p.y;
let [n,[vx,vy]]=this.noise(x/100,y/100,this.seed + t/20000);
vx*=3; vy*=3;
p.vx+=vx*.1; p.vy+=vy*.1;
p.x += (p.vx*5); p.y += (p.vy*5);
if(p.x<0)p.x=canvas.width;
if(p.x>canvas.width)p.x=0;
if(p.y<0)p.y=canvas.height;
if(p.y>canvas.height)p.y=0;
let hue=(vx+vy)*45%360;
ctx.fillStyle=`hsla(${hue},80%,20%,.1)`;
ctx.fillRect(p.x-2,p.y-2,4,4);
});
document.getElementById('n').textContent=this.particles.length;
if(t>20000){this.seed=Math.random();this.particles=[];for(let i=0;i<Math.random()*300+300;i++)this.addParticle();}
}
}
let canvas=document.getElementById('c'),w=window.innerWidth-40,h=window.innerHeight-40;
canvas.width=w;canvas.height=h;
let flow=new Flowfield();
function animate(t){
flow.update(t);
requestAnimationFrame(animate);
}
animate(0);
</script>
</body></html>
```<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Flowfield</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#020306;color:white;font:14px system-ui}canvas{display:block;width:100%;height:100%;background:#020306}#c{position:fixed;left:14px;top:12px;padding:6px 10px;border:1px solid #ffffff25;background:#0008;border-radius:8px;backdrop-filter:blur(6px)}</style></head><body><canvas id=a></canvas><div id=c></div><script>
let A=document.getElementById("a"),X=A.getContext("2d"),C=document.getElementById("c"),W,H,D,P=[],G=[],N=512,Z=135,T=0,R=0,S=0,WI=0;
function rs(){W=A.width=innerWidth*devicePixelRatio;H=A.height=innerHeight*devicePixelRatio;D=devicePixelRatio;X.lineCap="round";X.lineJoin="round";X.scale(D,D);W=innerWidth;H=innerHeight}
onresize=rs;rs();
function rnd(){return Math.random()*2-1}
function reset(w){G=[];for(let i=0;i<N;i++)G[i]=rnd();Z=90+Math.random()*90;S=Math.random()*9;R=1800+Math.random()*1600;WI=w?34:0;P=[];let n=300+Math.floor(Math.random()*301);for(let i=0;i<n;i++)P.push({x:Math.random()*W,y:Math.random()*H,px:0,py:0,s:.6+Math.random()*1.8});C.textContent=n+" particles"}
function n1(i){return G[(i%N+N)%N]}
function sm(t){return t*t*t*(t*(t*6-15)+10)}
function noise(x,y,t){let q=x*.73+y*1.91+t*.19+S,e=Math.floor(q),f=q-e;return n1(e)*(1-sm(f))+n1(e+1)*sm(f)}
function ang(x,y,t){let a=noise(x/Z,y/Z,t),b=noise((x+700)/Z,(y-300)/Z,t);return (a*2.2+b*1.4+Math.sin((x-y)/Z+t*.7))*Math.PI}
function step(m){if(!T)T=m;let dt=Math.min(2,(m-T)/16.67);T=m;S+=.003*dt;R-=16.67*dt;if(R<0)reset(1);X.globalCompositeOperation="source-over";if(WI>0){X.fillStyle="rgba(2,3,6,.28)";X.fillRect(0,0,W,H);WI-=dt}else{X.fillStyle="rgba(2,3,6,.045)";X.fillRect(0,0,W,H)}X.globalCompositeOperation="lighter";X.lineWidth=1.15;for(let p of P){p.px=p.x;p.py=p.y;let a=ang(p.x,p.y,S),v=(1.2+p.s)*dt;p.x+=Math.cos(a)*v;p.y+=Math.sin(a)*v;if(p.x<-20||p.x>W+20||p.y<-20||p.y>H+20){p.x=(p.x+W)%W;p.y=(p.y+H)%H;p.px=p.x;p.py=p.y;continue}let h=(a*180/Math.PI+360)%360;X.strokeStyle="hsla("+h+",100%,62%,.42)";X.beginPath();X.moveTo(p.px,p.py);X.lineTo(p.x,p.y);X.stroke()}requestAnimationFrame(step)}
reset();requestAnimationFrame(step);
</script></body></html>| Model | Blind score | Latency | Status |
|---|---|---|---|
| gemma4:26b | — | — | harness |
| qwen3-coder:30b | — | 22.9 s | OK |
| qwen3.5:9b | — | 34.6 s | OK |
| deepseek-r1:14b | — | 37.8 s | OK |
| mistral-small:24b | — | 76.1 s | OK |
| llama3.1:8b | — | 73.1 s | OK |
| qwen3:8b | — | — | harness |
| qwen3:14b | — | 17.7 s | OK |
| command-r:35b | — | 256.5 s | OK |
| qwq:32b | — | 222.4 s | OK |
| deepseek-r1:32b | — | 74.2 s | OK |