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 flies through a starfield on a <canvas>: keep a few hundred stars with x, y, z coordinates, move them towards the viewer, and project them with a perspective divide so they streak outwards from the centre and grow brighter and larger as they approach. Recycle each star to a fresh random position far away once it passes the camera. Show the star count and the current speed. Use only the 2D canvas context — no WebGL, no libraries. Smooth requestAnimationFrame animation, NO user input, starts immediately and keeps running (restart with a fresh random instance when finished). No external libraries, no comments needed. Output ONLY the HTML file content, nothing else.
```html
<!DOCTYPE html>
<html><head><style>canvas{position:absolute;top:0;left:0;width:100%;height:100%}</style></head><body><canvas id=c></canvas>
<script>
const c=document.getElementById('c'), ctx=c.getContext('2d');
const w=c.width=c.offsetWidth,h=c.height=c.offsetHeight;
let stars=[],i,starCount=500,cameraZ=400,focal=30,speed=.001;
function initStars(){for(i=0;i<starCount;++i)stars.push({x:Math.random()*w*2-1,y:Math.random()*h*2-1,z:-cameraZ});}
initStars();
function animate(t){
ctx.fillStyle='rgba(0,0,0,.15)';
ctx.fillRect(0,0,w,h);
const dx= (w/2), dy=(h/2);
let moved=true;
for(i=0;i<starCount;++i){
const s=stars[i];
if(s.z>cameraZ)s.z-=speed*15;
else{s.z=cameraZ+(Math.random()*3-1.5)*cameraZ;--starCount,stars.splice(i--,
1,{x:Math.random()*w*2-1,y:Math.random()*h*2-1,z:-cameraZ});i=0}
if(s.z>0){
const v= focal/(focal+s.z);
s.x*=v;
s.y*=v;
s.size=v*.5+1;
}else{s.x=0,s.y=0,s.size=2}
ctx.fillStyle='white';
ctx.beginPath();
ctx.arc(s.x+dx, s.y+dy, s.size, 0, Math.PI*2);
ctx.fill();
}
ctx.fillStyle='#fff';
ctx.font='14px monospace';
ctx.fillText(`Stars: ${starCount} | Speed: ${(speed*15).toFixed(2)}`,10,30);
requestAnimationFrame(animate);
}
animate(0);
</script></body></html>
``````html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
</style>
</head>
<body>
<canvas id="c" width=800 height=600></canvas>
<script>
var ctx = document.getElementById('c').getContext2D();
ctx.lineWidth = 1.5;
var stars = [], starcount = 0, speed = 100, viewdist = 300;
function randompos() {
return {x: Math.random()*800*3-400, y: Math.random()*600*3-300};
}
function drawstars() {
ctx.fillStyle = '#fff';
for(var i=0; i<stars.length; i++) {
var s = stars[i];
if(s.x<-viewdist) {s.x+=2000; starcount--; }
else {ctx.beginPath(); ctx.arc(-s.x/viewdist*800, -s.y/viewdist*600, Math.max(1, viewdist-s.x)/viewdist*10, 0, Math.PI*2); ctx.fill();}
}
}
function reset() {
stars = [], starcount=0;
for(var i=0; i<200; i++) {stars.push(randompos());};
requestAnimationFrame(draw);
}
requestAnimationFrame(function(){
draw();
function draw() {
ctx.clearRect(0, 0, 800, 600);
drawstars();
ctx.fillStyle = '#ff0';
ctx.font = '24px arial';
ctx.textAlign = 'left'; ctx.textBaseline = 'top';
ctx.fillText('Stars: ' + starcount + ', Speed: ' + speed, 10, 20);
requestAnimationFrame(draw);
}
});
reset();
</script>
</body>
</html>
```<!DOCTYPE html>
<html>
<head>
<title>Starfield</title>
<style>body {margin:0;overflow:hidden;}canvas{display:block;background-color:#000;}</style>
</head>
<body>
<canvas id="starCanvas"></canvas>
<script>
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
let width, height;
function resize() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
}
window.addEventListener('resize', resize);
resize();
const NUM_STARS = 300;
let stars = [];
let speed = 0.05; // Speed factor for movement
class Star {
constructor() {
this.reset();
}
reset() {
// Initial position far away (large negative Z)
this.z = Math.random() * -1000 - 100;
// Random horizontal spread (-W/2 to W/2)
this.x = (Math.random() - 0.5) * width * 2;
// Random vertical spread (-H/2 to H/2)
this.y = (Math.random() - 0.5) * height * 2;
this.size = Math.random() * 1.5 + 0.5; // Base size for drawing
}
update() {
// Move towards the viewer (Z increases, approaching 0)
this.z += speed * 30;
// Recycling check: If star passes the camera (Z > 1), reset it far away.
if (this.z > 1) {
this.reset();
}
}
draw() {
// Perspective Projection using z as depth factor 'w'
const w = this.z;
// Avoid division by zero or extreme values near the camera plane
if (Math.abs(w) < 0.1 || Math.abs(w) > 5000) return;
// Calculate screen coordinates
let sx = (this.x / w * width) + (width / 2);
let sy = (this.y / w * height) + (height / 2);
// Calculate apparent size and brightness based on z
// Closer objects (w approaches 0) are larger/brighter
const scaleFactor = 1 / Math.max(0.1, Math.abs(w));
let radius = this.size * scaleFactor * 2;
let alpha = Math.min(1, scaleFactor * 0.3);
// Draw the star streak/point
ctx.beginPath();
ctx.arc(sx, sy, radius * (w > 0 ? 0.5 : 1), 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, ${Math.floor(200 + alpha * 50)}, ${alpha})`;
ctx.fill();
}
}
function initializeStars() {
stars = [];
for (let i = 0; i < NUM_STARS; i++) {
stars.push(new Star());
}
}
function animate() {
// Clear canvas with slight residual trail effect (optional: use opacity fill)
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // Trail effect
ctx.fillRect(0, 0, width, height);
let activeStars = 0;
for (const star of stars) {
star.update();
star.draw();
activeStars++;
}
// Update UI Stats
const speedDisplay = document.getElementById('speed');
if (speedDisplay) {
speedDisplay.textContent = `Speed: ${speed.toFixed(2)}\nStars: ${NUM_STARS}`;
}
requestAnimationFrame(animate);
}
initializeStars();
animate();
// Injecting the stats display element directly since no DOM manipulation is allowed outside script scope
const style = document.createElement('style');
style.textContent = `
body::after {
content: attr(data-stats);
position: absolute;
top: 10px; left: 10px; color: #fff; font-family: monospace; z-index: 10; opacity: 0.7;
}
`;
document.head.appendChild(style);
// Overwriting the star field to draw stats dynamically
const statDiv = document.createElement('div');
statDiv.id = 'stats';
statDiv.style.cssText = `
position: absolute;
top: 10px; left: 10px; color: #fff; font-family: monospace; z-index: 10; opacity: 0.7;
`;
document.body.appendChild(statDiv);
const statElement = document.getElementById('stats');
let intervalId = setInterval(() => {
if (typeof statElement !== 'undefined') {
statElement.textContent = `Speed: ${speed.toFixed(2)}\nStars: ${NUM_STARS}`;
}
}, 100);
</script>
</body>
</html>```html
<!DOCTYPE html>
<html><head><title>Starfield</title></head><body style="margin:0;overflow:hidden"><canvas id="starCanvas" width="window.innerWidth" height="window.innerHeight"></canvas><script>const canvas = document.getElementById('starCanvas');const ctx = canvas.getContext('2d');let stars=[];const STAR_COUNT=350;const SPEED=10;function init() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;stars=[];for(let i=0;i<STAR_COUNT;i++)stars.push({...star=()=>{let angle=Math.random()*2*Math.PI;let dist=1000+Math.random()*5000;return{x:dist*Math.cos(angle),y:dist*Math.sin(angle),z:dist,size:Math.random()*1.5}});stars.push(star());}function update() {const w=canvas.width;const h=canvas.height;let starCount=0;for(let i=0;i<STAR_COUNT;i++) {let s=stars[i];s.z-=SPEED;if(s.z<-1) {s.x=Math.random()*w*2-w;s.y=Math.random()*h*2-h;s.z=5000;}}const scaleFactor=400/(w*2);for(let i=0;i<STAR_COUNT;i++) {let s=stars[i];let p=s.z/1000;let screenX=(s.x*(1-p))/(s.z/5000+1)+w/2;let screenY=(s.y*(1-p))/(s.z/5000+1)+h/2;let size=Math.max(0.5, Math.min(4, 0.3+(1-(s.z/-5000)) * 1));let alpha=Math.min(1, s.z/2000);ctx.fillStyle=`rgba(255,255,255,${alpha})`;ctx.beginPath();ctx.arc(screenX,screenY,size,0,2*Math.PI);ctx.fill();starCount++;}document.getElementById('stats').innerHTML=`Stars: ${starCount}<br>Speed: ${SPEED.toFixed(1)}`;}function animate() {ctx.fillStyle='rgba(0,0,0,0.1)';ctx.fillRect(0,0,canvas.width,canvas.height);update();requestAnimationFrame(animate);}window.addEventListener('resize', function(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;});const statsDiv=document.createElement('div');statsDiv.id='stats'style='position:fixed;top:10px;left:10px;color:#fff;font-family:monospace;z-index:10';document.body.appendChild(statsDiv);init();animate();</script></body></html>
``````html
<!DOCTYPE html>
<html><head><title>Starfield</title></head><body style="margin:0;overflow:hidden;"><canvas id="c"></canvas><script>const c=document.getElementById('c');const ctx=c.getContext('2d');let stars=[],speed=1.5,starCount=300;let W=window.innerWidth;let H=window.innerHeight;c.width=W;c.height=H;
function Star{constructor(x){this.x=x*2-W;this.y=Math.random()*H;this.z=Math.random()*100+50;}reset(){this.x=Math.random()*W;this.y=Math.random()*H;this.z=Math.random()*100+50;}update(s){this.z-=s;if(this.z<0)this.reset();}draw(c,s){let p=s/(100-this.z);let rx=this.x*p/W;let ry=this.y*p/H;let sZ=Math.max(0.5,this.z/100);let size=Math.min(20,1+Math.sqrt(sZ));let alpha=Math.min(1,sZ/30)*size/20;c.fillStyle=`rgba(255,255,255,${alpha})`;c.beginPath();c.arc(rx*W+(W-rx)/2,ry*H+(H-ry)/2,size*p/10+0.5,0,Math.PI*2);c.fill();}
function init(){stars=[];for(let i=0;i<starCount;i++){stars.push(new Star());}requestAnimationFrame(animate);}
function animate(){ctx.fillStyle='rgba(0,0,1,0.1)';ctx.fillRect(0,0,W,H);ctx.save();ctx.translate(W/2,H/2);for(let s of stars){s.update(speed);s.draw(ctx,speed);}ctx.restore();document.getElementById('stats').innerHTML=`Stars: ${starCount}<br>Speed: ${speed.toFixed(2)}`;requestAnimationFrame(animate);}
window.addEventListener('resize',()=>{(W=Math.min(window.innerWidth,1200));(H=Math.min(window.innerHeight,800));c.width=W;c.height=H;});init();</script><div id="stats" style="position:fixed;top:10px;left:10px;color:#fff;background:rgba(0,0,0,0.5);padding:5px;font-family:monospace;">Starfield Running...</div></body></html>
``````html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Starfield</title>
<style>
body {margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: black;}
canvas {display: block;}
#info {position: absolute; top: 20px; left: 20px; color: white; font-family: Arial, sans-serif;}
</style>
</head>
<body>
<canvas id="starfield"></canvas>
<div id="info">Stars: <span id="starCount">300</span> Speed: <span id="speed">1.0</span></div>
<script>
let canvas = document.getElementById('starfield');
let ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const stars = [];
const starCount = 300;
const maxSpeed = 5;
const minSpeed = 1;
let speed = Math.random() * (maxSpeed - minSpeed) + minSpeed;
document.getElementById('starCount').innerText = starCount;
document.getElementById('speed').innerText = speed.toFixed(2);
function createStars(count) {
for (let i = 0; i < count; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
z: Math.random() * canvas.width
});
}
}
createStars(starCount);
function updateStars() {
for (let star of stars) {
star.z -= speed;
if (star.z <= 0) {
star.x = Math.random() * canvas.width;
star.y = Math.random() * canvas.height;
star.z = canvas.width;
}
}
}
function drawStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let star of stars) {
let x = star.x / star.z * canvas.width + canvas.width / 2;
let y = star.y / star.z * canvas.height + canvas.height / 2;
let size = 1 / star.z * 50;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
}
}
function animate() {
updateStars();
drawStars();
requestAnimationFrame(animate);
}
requestAnimationFrame(() => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
createStars(starCount);
speed = Math.random() * (maxSpeed - minSpeed) + minSpeed;
document.getElementById('speed').innerText = speed.toFixed(2);
animate();
});
</script>
</body>
</html>
``````html
<!DOCTYPE html><html><body style="margin:0;background:#000;display:flex;justify-content:center;align-items:center;height:100vh"><canvas id=c></canvas><script>
const c=document.getElementById('c'),ctx=c.getContext('2d');
c.width=800;c.height=450;
let stars=[],count=300,speed=1.5,frame=0;
function init(){
stars.length=0;
for(let i=0;i<count;i++){
let x=(Math.random()-0.5)*500,y=(Math.random()-0.5)*500,z=Math.random()*1000+500;
stars.push({x,y,z});
}
}
function update(){
stars.forEach(s=>{
s.z-=speed;
if(s.z<=0){
s.x=(Math.random()-0.5)*500;
s.y=(Math.random()-0.5)*500;
s.z=Math.random()*1000+500;
}
let d=1/(s.z+.2);
let x=s.x*d+c.width/2,y=s.y*d+c.height/2,r=.8*(1-d);
if(r>0){
ctx.fillStyle='rgb('+Math.min(255,9/r)+', '+Math.min(255,9/r)+', '+Math.min(255,9/r)+')';
ctx.beginPath();
ctx.arc(x,y,r*3,0,Math.PI*2);
ctx.fill();
}
});
}
function draw(){
ctx.fillStyle='#000';ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle='#fff';
ctx.font='18px monospace';
ctx.fillText(`Stars: ${count} | Speed: ${speed.toFixed(2)}`,10,30);
update();
frame++;
if(frame%60==0)speed=Math.max(.5,Math.random()*3+.5);
}
init();
function animate(){
requestAnimationFrame(animate);
draw();
}
animate();
</script></body></html>
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="#" />
<script type="application/javascript">
const canvas = document.getElementById("game");
const context = canvas.getContext("2d");
let stars = [];
let speed = 0.1;
let starCount = 500;
class Star {
constructor(x, y) {
this.x = x;
this.y = y;
this.z = 300 + Math.random() * 900; // Random z-coordinate for perspective depth
this.vx = -1 + 2 * Math.random();
this.vy = -1 + 2 * Math.random();
}
}
function init() {
context.fillStyle = "rgba(0, 0, 0, 1)";
context.fillRect(
0,
0,
canvas.width,
canvas.height
);
for (let i = 0; i < starCount; i++) {
stars[i] = new Star(
Math.random() * window.innerWidth - window.innerHeight / 2, // Random x-coordinate with offset to center
Math.random() * window.innerHeight + window.innerHeight / 2 // Random y-coordinate centered on the bottom
);
}
draw();
}
function update() {
for (let i = 0; i < starCount; i++) {
stars[i].x += stars[i].vx * speed;
stars[i].y += stars[i].vy * speed;
// Check if the star has passed the camera and reset its position
if (stars[i].z <= 0) {
stars[i] = new Star(
Math.random() * window.innerWidth - window.innerHeight / 2,
Math.random() * window.innerHeight + window.innerHeight / 2
);
}
}
}
function draw() {
context.fillStyle = "rgba(0, 0, 0, 1)";
context.fillRect(
0,
0,
canvas.width,
canvas.height
);
for (let i = 0; i < starCount; i++) {
// Calculate the projected position of the star based on its z-coordinate and perspective depth
let scaleFactor = Math.min(1, stars[i].z / 900);
let width = 6 * scaleFactor; // Adjust size with distance for perspective effect
let height = 3 * scaleFactor;
context.fillStyle = `rgb(${255 -
255 *
stars[i].z /
900}, ${180 - 180 * stars[i].z / 900}, ${120 -
120 *
stars[i].z /
900})`;
context.fillRect(stars[i].x, stars[i].y, width, height);
}
requestAnimationFrame(draw);
}
init();
</script>
</head>
<body style="margin: 0; padding: 0">
<canvas
id="game"
width="${window.innerWidth}"
height="${window.innerHeight}"
tabindex="-1"
></canvas>
</body>
</html><think>
Okay, I need to create a self-contained HTML file that simulates flying through a starfield using a 2D canvas. The user specified a strict limit of 7000 characters, so I have to keep everything concise. Let me think through the steps.
First, the structure: the HTML file needs a canvas element and some script. I'll start with the basic HTML5 template. The canvas should have an id, maybe "c", and a context. Since it's a strict limit, I need to minify code as much as possible.
Next, the stars. They need x, y, z coordinates. To make them move towards the viewer, I'll decrement their z each frame. When a star's z becomes negative (i.e., passed the camera), I'll reset its z to a large positive value and randomize x and y. The projection uses perspective: x' = x * (1/z), y' = y * (1/z). Wait, actually, the perspective divide is usually done by scaling with 1/z. But I need to adjust for screen coordinates. Maybe scale by some factor to make it visible.
The stars should appear brighter and larger as they approach. So, their size and brightness can be proportional to 1/z. Since z is getting smaller (closer), 1/z increases. But when z is negative (past the camera), we need to reset. Hmm, but when z approaches zero, the star would be very bright and big. Maybe use 1/z squared for brightness to make it more intense?
For the stars' coordinates, I need to initialize them with random x and y between -width/2 and width/2, and z between some max value. Let's say for each star, x and y are within a range that when divided by z (starting at say 100) would project to the screen. The projection formula might be something like (x * (depth / z) + centerX), same for y. Wait, perhaps I need to use 1/z as the scaling factor. Let me think of the math again.
The actual projection is a bit tricky. To simulate depth, moving from z far away (large z) to closer (smaller z). The screen coordinates would be (x * (1/z), y * (1/z)), but scaled to the canvas size. Maybe set a viewing distance, so the scaling factor is (view_distance / z). Let's say view_distance is 100. So when z is 100, the scaling is 1, so x and y are as given. When z is smaller, the scaling increases, making the star bigger. But when z is 0, it would be infinite, which is bad, so we reset when z reaches 0 or goes negative.
Wait, actually, the z starts at a large value (say 100) and decreases each frame. The speed is the amount we subtract from z each frame. The star moves towards the viewer. When z becomes negative, we reset it to a large value again, and assign new x and y.
So for each star:
Initialize z to a random number between, say, 100 and 200? Or maybe all start at higher z, but with different initial positions.
The position on the canvas can be calculated as:
cx = (x/z) * viewScale + centerX;
cy = (y/z) * viewScale + centerY;
viewScale is a scaling factor to adjust how much the stars spread out. Maybe 500?
The radius of the star can be something like (200/(z)), but capped at a maximum size. Wait, but when z is small (like 10), that gives 20, maybe. Or maybe 5*(viewScale / z). Hmm.
Also, brightness: the color can be a gradient from white to yellow? Or just vary the alpha and size. Alternatively, set the stroke and fill opacity based on 1/z. But using fillStyle with rgba might help.
Now, for the code structure:
1. Initialize the canvas, get its context.
2. Define variables for canvas width and height, which should be the same as the actual canvas size (maybe using clientWidth/clientHeight to get the browser's viewport size? Or set it directly?)
Wait, the user might want it to be full screen? Or just a default size. The problem says "show the star count and current speed", so maybe a small canvas in the page with some text.
Hmm, the problem says "strict limit: max 7000 characters". So I should make the canvas as small as possible. Maybe 640x480? Or even smaller. Let's see.
Wait, the code will have to be as compact as possible. Let me think of variables:
- stars array, each with x, y, z.
- parameters like count (number of stars), speed (how much z decreases each frame).
- canvas size (width and height).
In JavaScript:
Initialize variables:
var c = document.getElementById('c'), ctx = c.getContext('2d'), w = 640, h = 360, count = 500, speed = 2;
Wait, the user said "a few hundred stars". Maybe 500 is okay. But if that's too much, maybe reduce? The speed can be adjusted.
But the problem mentions "show the star count and the current speed". So in the drawing loop, we need to display those. So text at the corners.
Now, the stars array:
We need to initialize each star with x, y, z. Let me see, initializing could be done in a loop:
var stars = [];
for (let i = 0; i < count; i++) {
stars.push({
x: Math.random() * 500 - 250, // random between -250 and 250?
y: Math.random() * 500 - 250,
z: Math.random() * 100 + 200 // initial z between 200 and 300, so far away
});
}
Wait, but maybe using a different range for x and y. Alternatively, maybe using a radius for the initial position on a sphere around the camera, but in 2D maybe just random x/y within a square.
Alternatively, since the z starts at some large value, the initial x and y can be within a range so that when divided by z, their projection is within the screen. For example, if z is 200, then x and y could be up to 200 in magnitude, so when divided by 200 gives up to 1, multiplied by some scaling factor. Hmm.
Alternatively, maybe set x between -w/2 and w/2, but scaled by some factor. Wait, perhaps the initial x and y can be in a square that's scaled by the initial z so that their projection is visible but not overlapping too much. Maybe I need to think of the initial x and y as within a certain range relative to their starting z.
Hmm, perhaps the initial x and y can be between -z and +z. But that might complicate things. Alternatively, just use random values between, say, -100 and +100 for x and y, and z starts at 200.
But maybe the initial z can be between 100 to 300. So their initial x and y can be up to 100, so when divided by z (say 100), gives a maximum of 1 (times scaling factor). So scaling factor could be like 100, so that 1 * scaling gives 100 pixels from center, so the stars start offscreen.
Alternatively, the scaling factor could be something like 1000 divided by the initial z. Hmm, perhaps the way to go is to use the following projection:
cx = (x * (1/z)) * scale + centerX;
Similarly for y.
The scale can be a constant to adjust how much they spread out.
Let me think of the code steps for each star in the animation loop:
For each star:
- reduce z by speed: z -= speed;
- if z < 0: reset x, y, z to new random values.
Then project x and y to screen coordinates:
var scale = 500;
cx = (x / z) * scale + c.width/2;
cy = (y / z) * scale + c.height/2;
The radius can be something like (scale / z) * 2, so that as z decreases, the radius increases. But when z is small, the radius becomes big, so maybe cap it. Alternatively, let it go, but when z is too small, it becomes a big dot. Hmm.
The fillStyle can be set to a white color that's brighter as the star approaches. Maybe the alpha is (1/z) * 200, but clamped at 1.0? Or use the radius as a factor for the color intensity.
Alternatively, using fillStyle as 'rgba(255,255,255,' + (1/z) + ')' but since 1/z can exceed 1 when z <1, maybe clamp it to 1.
Wait, when z is 0.5, 1/z is 2, which would be alpha 2, but that's invalid. So maybe (1/z)*0.5, but that depends on the scale. Hmm, perhaps better to use Math.min(1/z * 0.5, 1) ?
Alternatively, setting the radius and alpha based on 1/z.
Putting this together, the step for each star would be:
ctx.fillStyle = 'rgba(255,255,255,' + (1/z * 0.5) + ')';
ctx.beginPath();
ctx.arc(cx, cy, 2 * (scale/z), 0, Math.PI*2);
ctx.fill();
Wait, but doing this for 500 stars each frame might be slow. Wait, but requestAnimationFrame is okay for that.
Wait, let's see:
The steps for the animation loop:
- Clear the canvas.
- Iterate over all stars:
For each star:
z -= speed;
if (z < 0) {
reset x, y, z to new random values.
}
compute cx, cy based on x, y, z.
draw the star as a circle with position and radius.
- Draw the text with star count and speed.
So in code:
function loop() {
ctx.clearRect(0,0,w,h);
for (let i = 0; i < count; i++) {
let s = stars[i];
s.z -= speed;
if (s.z < 0) {
s.x = Math.random() * 400 - 200; // random x between -200 and 200 (assuming scaling factor makes it on screen)
s.y = Math.random() * 300 - 150; // y between -150 and 150, depending on aspect ratio
s.z = Math.random() * 100 + 200; // new z between 200 and 300.
}
let scale = 500; // choose a value that makes the stars spread out.
let cx = (s.x / s.z)*scale + w/2;
let cy = (s.y / s.z)*scale + h/2;
let rad = (scale / s.z)*2;
ctx.fillStyle = 'rgba(255,255,255,' + (rad/20) + ')'; // brightness based on radius?
ctx.beginPath();
ctx.arc(cx, cy, rad, 0, Math.PI*2);
ctx.fill();
}
ctx.fillStyle = 'white';
ctx.fillText('Stars: '+count+' Speed: '+speed, 10, h-10);
requestAnimationFrame(loop);
}
Wait, but the initial setup needs to create the stars array.
Putting all together:
In the HTML, the canvas element needs to be set with width and height, maybe via attributes.
Wait, in HTML, the canvas can be set to width and height, so:
<canvas id="c" width="640" height="360"></canvas>
Then, in the script:
var c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width,h=c.height;
count=500; speed=2;
stars=[];
for(let i=0;i<count;i++) stars.push({x:Math.random()*400-200,y:Math.random()*300-150,z:Math.random()*100+200});
function loop(){...}
loop();
Wait, but I need to start with requestAnimationFrame.
Wait, in the code:
window.requestAnimationFrame(loop);
But the loop function calls itself with requestAnimationFrame.
So the code steps:
Initialize variables.
Then define loop function.
Then start with requestAnimationFrame(loop).
Now, variables:
The count and speed are constants? Or can the user change them? The problem says "show the current speed" but doesn't mention changing it, so probably just display the initial value.
Wait the problem says "current speed", so maybe speed is a variable that could be adjusted, but since there's no user input, it's probably a constant. So just display the initial speed value.
Putting all together, I'll need to write the HTML file with all this code in a compact way, removing as much whitespace as possible.
Now, possible optimizations to save characters:
- Use one-letter variables where possible.
- Inline code as much as possible.
- Combine declarations.
For example, instead of:
var c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width,h=c.height;
count=500;speed=2;
stars=[];
Could be written as:
var c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width,h=c.height,cnt=500,s=2,stars=[];
Then, for loop:
for(i=0;i<cnt;i++)stars.push({x:Math.random()*400-200,y:Math.random()*300-150,z:Math.random()*100+200});
Using i as the loop variable without let.
But need to make sure variables are properly declared.
Alternatively, using var for all, but in the global scope.
Also, using shorter variable names.
Now, the loop function:
function l(){
ctx.clearRect(0,0,w,h);
for(var i=0;i<cnt;i++){
var s=stars[i];
s.z-=s;
if(s.z<0){
s.x=Math.random()*400-200;
s.y=Math.random()*300-150;
s.z=Math.random()*100+200;
}
var sc=500; // scale
var cx=(s.x/s.z)*sc +w/2,
cy=(s.y/s.z)*sc +h/2,
r=(sc/s.z)*2;
ctx.fillStyle='rgba(255,255,255,'+(r/20)+')';
ctx.beginPath();
ctx.arc(cx,cy,r,0,Math.PI*2);
ctx.fill();
}
ctx.fillText('Stars: '+cnt+' Speed: '+s,10,h-10);
requestAnimationFrame(l);
}
Wait, but in the code above, I used 's' as both the star object and the speed variable. That's a problem. Because in the line s.z -= s; the 's' would refer to the speed variable (speed is named s). Oh right! This is a conflict. The variable 's' here is both the loop variable's star and the variable s which is speed.
So, this is a mistake. So to avoid that, perhaps rename variables.
Original variables:
Speed is 's' (short for speed), so in the loop over stars, each star is 'star' variable (maybe 'st' as a name).
Wait, in the for loop over stars:
for(var i=0;i<cnt;i++){
var st=stars[i]; // st is the star object
st.z -= s; // s is the speed.
if (st.z <0) { reset x,y,z }
... etc.
}
So that way, no variable name clash.
Hence, the code inside the loop:
function l(){
ctx.clearRect(0,0,w,h);
for(var i=0;i<cnt;i++){
var st=stars[i];
st.z-=s;
if(st.z<0){
st.x=Math.random()*400-200;
st.y=Math.random()*300-150;
st.z=Math.random()*100+200;
}
var sc=500,cx=(st.x/sc)? No, wait, the original calculation was:
cx = (st.x / st.z)*scale + w/2,
same for cy.
So:
var sc=500;
cx=(st.x/st.z)*sc +w/2;
cy=(st.y/st.z)*sc +h/2;
r=(sc/st.z)*2;
...
}
Okay, that makes sense. So variables like sc (scale), cx, cy, r can be declared inside the loop.
But wait, inside the loop for each star. So, variables inside the star loop.
So adjusting the variable names to prevent conflicts.
Also, the fillStyle can be written more concisely, perhaps using template strings:
ctx.fillStyle = `rgba(255,255,255,${r/20})`;
But since the problem says no comments, but template literals are okay.
Wait, but the problem says "use only the 2D canvas context — no WebGL, no libraries." We're okay.
Now, putting this all into code as compact as possible.
Also, the initial setup:
At the start, after defining variables, the star array is initialized with:
for(var i=0;i<cnt;i++){
stars.push({
x:Math.random()*400-200,
y:Math.random()*300-150,
z:Math.random()*100+200
});
}
Wait, but in JS, you can write that as:
stars.push({x:Math.random()*400-200,y:Math.random()*300-150,z:Math.random()*100+200});
Now, the complete code in the HTML:
<!DOCTYPE html><html><body><canvas id=c width=640 height=360></canvas><script>
var c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width,h=c.height,cnt=500,s=2,stars=[];
for(var i=0;i<cnt;i++)stars.push({x:Math.random()*400-200,y:Math.random()*300-150,z:Math.random()*100+200});
function l(){
ctx.clearRect(0,0,w,h);
for(var i=0;i<cnt;i++){
var st=stars[i];
st.z-=s;
if(st.z<0){
st.x=Math.random()*400-200;
st.y=Math.random()*300-150;
st.z=Math.random()*100+200;
}
var sc=500,cx=(st.x/st.z)*sc +w/2,cy=(st.y/st.z)*sc +h/2,r=(sc/st.z)*2;
ctx.fillStyle=`rgba(255,255,255,${r/20})`;
ctx.beginPath();
ctx.arc(cx,cy,r,0,Math.PI*2);
ctx.fill();
}
ctx.fillText(`Stars: ${cnt} Speed: ${s}`,10,h-10);
requestAnimationFrame(l);
}
l();
</script></body></html>
Wait, but in the first line, the canvas is written as <canvas id=c ...> which is valid HTML, since the id is 'c'.
Also, the code starts the animation with l(); but l() is a function that calls requestAnimationFrame(l). So that should work.
Wait, but when you call l(), it does the first frame, then schedules another, so it's okay.
Testing the code, the stars should move towards the viewer (since z decreases each frame by speed s=2), and when z becomes negative, they are reset to positive.
The random x and y when reset are within -200 to +200 (x) and -150 to +150 (y), which assuming the scale of 500, which when divided by z (which is 200-300 at reset), gives:
cx = (x / z)*500 + 320 (since w=640, so 320 center).
So for x=200, z=200: 200/200 *500 =500 → cx=500 + 320? Wait, 200/200 is 1, multiply by 500: 500, plus 320 (w/2 is 320) → 820? But the canvas is 640px wide, so 820 is outside. Hmm, that's an issue.
Ah, perhaps the scaling is wrong.
Wait, let me recalculate:
If the scale is set to 500, then (x / z)*500 is the offset from the center.
If z is 200, then:
x can be up to 200 (max x is 200), so (200/200)*500 = 500 → the cx would be 500 + (w/2)= 320 → 500+320=820, which is beyond the canvas width of 640.
So this would cause the stars to be drawn off-screen.
Which is not desired.
Hence, the scaling is too big. Let's recalculate the scale.
We need to set the scale such that the maximum x/z * scale is less than half the canvas width.
Assume that the maximum x is 200, and minimum z is 200 (since at reset, z is between 200-300). So:
max_x / min_z * scale <= 320 (half of 640).
200/200 * scale = 1 * scale → so scale must be <= 320. So setting the scale to 320.
Similarly, for y: max y is 150, but the canvas height is 360 → half is 180.
So 150/200 * scaleY → scale for y should be 180*(200/150) → but since x and y need to have same scaling.
Alternatively, adjust the scaling to 320 (for x) and then the y scaling can be scaled proportionally.
But since the code uses the same scale for x and y, perhaps we should adjust to the smaller dimension.
Alternatively, let's set sc to 300 instead of 500. Let's see:
If sc=300:
max x/z is 200/200 * 300 = 300 → cx = 300 + 320 → 620 (within canvas width 640). That's okay.
Similarly, for y:
max y is 150, so 150/200 * 300 = 225 → cy = 225 + 180 (h/2) = 405, which is within 360 height? Wait, canvas height is 360, so 180 is center. So 225+180=405 which exceeds 360? 360-180 is 180, so it would be outside.
Hmm, so need to set the scale so that for y:
max_y / min_z * scale <= 180 (half height).
Max y is 150, min z is 200:
150/200 * scaleY <= 180 → scale <= (180 *200)/150 = 240.
So for y, scale must be ≤240.
Therefore, to satisfy both x and y, the scale should be 240.
But then, for x:
max x/z * scale = 200/200 *240=240, so cx=240 +320=560 <640 okay.
cy would be 150/200 *240= 180 → 180+180= 360 (edge), okay.
Hence, setting sc=240.
Thus, in the code, changing sc=240 instead of 500.
So adjusting:
var sc=240;
cx=(st.x/st.z)*sc +w/2,
cy=(st.y/st.z)*sc +h/2,
r = (sc/st.z)*2;
Wait but then the radius would be (240/z)*2. When z is 200, radius is (240/200)*2 = 2.4 → small radius.
But when z is smaller (approaching zero), radius becomes larger.
Hmm, but when z is 200, the star is reset, so maybe the max radius is when z is at its smallest before reset.
Wait, but z decreases each frame by s=2. So starting at z=200, after 100 frames, z would be 0, but in reality it's reset when z becomes negative.
Wait, let me see: when a star's z is 200 (initial value), and each frame decreases by s=2, so after 100 frames, it would reach 0, then be reset. So the time before reset is about 100 frames (at 60fps, ~1.7 seconds).
The radius is (240 / z) * 2. So at z=200, radius is 2.4, at z=100 it's (240/100)*2=4.8, z=50, radius 9.6, etc.
The maximum radius before reset is when z is approaching 0, so radius becomes very large, but since the code resets when z <0, it's okay.
The problem is that when z is small, the star could be large and off-screen?
But with the scale set to 240, and the position calculations, it should stay on screen.
Alternatively, perhaps the scale should be 160 to make sure.
But let's proceed with 240 for now.
So adjusting the code:
var sc=240;
cx = (st.x / st.z)*sc +w/2,
Similarly for y.
Thus, in the code, changing sc=240.
Also, the radius is (sc/z)*2. So with sc=240, at z=200, 240/200=1.2 → *2 is 2.4.
So that's okay.
Another possible issue: the random x and y when resetting are between -200 and +200 (x) and -150 to +150 (y). This is okay because with sc=240, the max x/z (when z is 200) gives 200/200 *240 =240, so the position is 240 + 320 (w/2) → 560, which is within 640.
Similarly, min x is -200, which gives -240 +320 → 80, so okay.
Thus, scaling to 240 is better.
Hence, the corrected code would have sc=240.
So the code:
var sc=240,
cx=(st.x/st.z)*sc +w/2,
cy=(st.y/st.z)*sc +h/2,
r=(sc/st.z)*2;
Also, the fillStyle alpha is r/20, so when radius is 2.4, alpha is 0.12, which is very transparent. Maybe the alpha should be higher.
Alternatively, perhaps the alpha should be independent of radius. Maybe it's better to have a constant alpha, but the user's original code had r/20. Maybe acceptable.
Alternatively, we can try 240 and see.
So let me adjust the code to use sc=240:
Adjusting the code:
<!DOCTYPE html><html><body><canvas id=c width=640 height=360></canvas><script>
var c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width,h=c.height,cnt=500,s=2,stars=[];
for(var i=0;i<cnt;i++)stars.push({x:Math.random()*400-200,y:Math.random()*300-150,z:Math.random()*100+200});
function l(){
ctx.clearRect(0,0,w,h);
for(var i=0;i<cnt;i++){
var st=stars[i];
st.z -= s;
if(st.z <0){
st.x= Math.random()*400-200;
st.y= Math.random()*300-150;
st.z= Math.random()*100+200;
}
var sc=240,cx=(st.x/st.z)*sc +w/2,cy=(st.y/st.z)*sc +h/2,r=(sc/st.z)*2;
ctx.fillStyle=`rgba(255,255,255,${r/20})`;
ctx.beginPath();
ctx.arc(cx,cy,r,0,Math.PI*2);
ctx.fill();
}
ctx.fillText(`Stars: ${cnt} Speed: ${s}`,10,h-10);
requestAnimationFrame(l);
}
l();
</script></body></html>
Wait, in the initial array initialization, the x was Math.random()*400-200, which gives a range from -200 to +200 (since Math.random()*400 can be 0 to 400, minus 200 → -200 to 200). Similarly for y: Math.random()*300-150 gives -150 to 150. So that's better.
Earlier mistake had 400 instead of 400-200, but in code above, it's correct.
Thus, this should work.
Testing this code should create a parallax effect where stars move from far (z=200-300) towards the viewer (z decreases), and when they reach behind (z<0) they reset to far away.
The radius grows as they get closer, and the alpha (transparency) increases as radius increases (since r/20 when r is larger).
Wait, the alpha is r/20. So when radius is 2.4, alpha is 0.12 (almost transparent), when radius is 24 (when z=10), alpha is 1.2 (over 1, but in rgba it's clamped to 1). So the alpha is fully opaque when r >=20.
So stars that are closer (radius 20 or more) are fully white, and slightly transparent when further away.
This should give a nice parallax effect.
So this should be the corrected code.<!doctype html>
<html><head><meta charset="utf-8"><title>Starfield tunnel</title>
<style>
html,body{margin:0;height:100%;background:#000;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#9fd0ff;
background:rgba(0,0,0,.5);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">stars 0</div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),hud=document.getElementById('hud');
let W,H,cx,cy;
function fit(){W=cv.width=innerWidth;H=cv.height=innerHeight;cx=W/2;cy=H/2}
fit();addEventListener('resize',fit);
const N=520,F=420,DEPTH=1400;
const stars=[];
function spawn(s,far){
s.x=(Math.random()*2-1)*900;
s.y=(Math.random()*2-1)*900;
s.z=far?DEPTH:Math.random()*DEPTH;
s.px=null;
}
for(let i=0;i<N;i++){const s={};spawn(s,false);stars.push(s)}
let t0=0;
function frame(t){
if(!t0)t0=t;
const el=(t-t0)/1000;
const speed=5+Math.sin(el*.35)*3.4;
g.fillStyle='rgba(0,0,0,.32)';g.fillRect(0,0,W,H);
for(const s of stars){
s.z-=speed;
if(s.z<1){spawn(s,true);continue}
const k=F/s.z, x=cx+s.x*k, y=cy+s.y*k;
if(x<-40||x>W+40||y<-40||y>H+40){spawn(s,true);continue}
const near=1-s.z/DEPTH;
const r=Math.max(.4,near*2.6);
if(s.px!=null){
g.strokeStyle='rgba('+(170+near*85|0)+','+(200+near*55|0)+',255,'+(.25+near*.7)+')';
g.lineWidth=r;
g.beginPath();g.moveTo(s.px,s.py);g.lineTo(x,y);g.stroke();
}
g.fillStyle='rgba(255,255,255,'+(.3+near*.7)+')';
g.beginPath();g.arc(x,y,r,0,6.2832);g.fill();
s.px=x;s.py=y;
}
hud.textContent='stars '+N+' · speed '+speed.toFixed(1);
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script></body></html><!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Starfield</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#02030a;color:#dfe8ff;font:14px system-ui,sans-serif}canvas{display:block;width:100vw;height:100vh}.hud{position:fixed;left:16px;top:14px;padding:8px 10px;background:#07101dcc;border:1px solid #29405d;border-radius:6px;line-height:1.5}</style></head><body><canvas id=c></canvas><div class=hud>stars: <b id=n></b><br>speed: <b id=s></b></div><script>
const c=document.getElementById("c"),x=c.getContext("2d"),n=document.getElementById("n"),sp=document.getElementById("s");let w,h,dpr,stars=[],N=520,speed=1.8,last=0;
function size(){dpr=devicePixelRatio||1;w=innerWidth;h=innerHeight;c.width=w*dpr;c.height=h*dpr;x.setTransform(dpr,0,0,dpr,0,0)}
function star(a){a.x=(Math.random()*2-1)*w;a.y=(Math.random()*2-1)*h;a.z=Math.random()*w+w;a.px=0;a.py=0}
function init(){size();stars=Array.from({length:N},()=>{let a={};star(a);return a});n.textContent=N}
onresize=()=>{init()};
function draw(t){let dt=Math.min(32,t-last||16)/16;last=t;speed=1.8+Math.sin(t*.00035)*.9;x.fillStyle="rgba(2,3,10,.34)";x.fillRect(0,0,w,h);let cx=w/2,cy=h/2,f=w*.55;for(const a of stars){let ox=a.px,oy=a.py;a.z-=speed*dt*18;if(a.z<1)star(a);let k=f/a.z,px=cx+a.x*k,py=cy+a.y*k;a.px=px;a.py=py;if(px<0||px>w||py<0||py>h){star(a);continue}let b=1-a.z/(w*2),r=.6+b*2.8;x.strokeStyle=`rgba(210,230,255,${.2+b*.8})`;x.lineWidth=r;x.beginPath();x.moveTo(ox||px,oy||py);x.lineTo(px,py);x.stroke();x.fillStyle=`rgba(255,255,255,${.25+b*.75})`;x.beginPath();x.arc(px,py,r*.55,0,7);x.fill()}sp.textContent=speed.toFixed(2);requestAnimationFrame(draw)}
init();requestAnimationFrame(draw);
</script></body></html><!DOCTYPE html><html><head><meta charset="utf8"><title>Starfield</title><style>
body{margin:0;background:#000;overflow:hidden}canvas{display:block}
#i{position:fixed;top:8px;left:8px;color:#fff;font:14px monospace}
</style></head><body><canvas id="c"></canvas><div id="i"></div><script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
function resize(){cv.width=innerWidth;cv.height=innerHeight}
resize();addEventListener('resize',resize);
const N=500;
let stars=[],speed=6,t=0;
function newStar(){
return {
x:(Math.random()-0.5)*cv.width*2,
y:(Math.random()-0.5)*cv.height*2,
z:Math.random()*1600+50,
pz:0
};
}
function init(){
stars=[];
for(let i=0;i<N;i++) stars.push(newStar());
speed=4+Math.random()*4;
t=0;
}
init();
function loop(){
ctx.fillStyle='rgba(0,0,0,0.35)';
ctx.fillRect(0,0,cv.width,cv.height);
t+=0.01;
speed=6+Math.sin(t*0.3)*4;
const cx=cv.width/2, cy=cv.height/2;
for(const s of stars){
s.pz=s.z;
s.z-=speed;
if(s.z<1){
s.x=(Math.random()-0.5)*cv.width*2;
s.y=(Math.random()-0.5)*cv.height*2;
s.z=1600;
s.pz=1600;
}
const sx=cx+(s.x/s.z)*cv.width*0.6;
const sy=cy+(s.y/s.z)*cv.width*0.6;
const px=cx+(s.x/s.pz)*cv.width*0.6;
const py=cy+(s.y/s.pz)*cv.width*0.6;
const b=Math.max(0,Math.min(1,1-s.z/1600));
const size=Math.max(0.4,b*3.2);
ctx.strokeStyle='rgba('+Math.floor(200+55*b)+','+Math.floor(200+55*b)+',255,'+(0.4+b*0.6)+')';
ctx.lineWidth=size;
ctx.beginPath();
ctx.moveTo(px,py);
ctx.lineTo(sx,sy);
ctx.stroke();
if(sx>=0&&sx<=cv.width&&sy>=0&&sy<=cv.height){
ctx.fillStyle='rgba(255,255,255,'+(0.6+b*0.4)+')';
ctx.beginPath();
ctx.arc(sx,sy,size*0.6,0,Math.PI*2);
ctx.fill();
}
}
ctx.fillStyle='#fff';ctx.font='14px monospace';
ctx.fillText('stars: '+stars.length,10,20);
ctx.fillText('speed: '+speed.toFixed(2),10,38);
if(t>200) init();
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><style>body{margin:0;background:#000;overflow:hidden}#c{display:block}#i{position:absolute;top:5px;left:5px;color:#0f0;font-family:monospace;font-size:12px}</style></head><body><canvas id="c"></canvas><div id="i"></div><script>const c=document.getElementById('c'),ctx=c.getContext('2d'),i=document.getElementById('i');c.width=800;c.height=600;const cx=400,cy=300;let st=[];for(let j=0;j<400;j++){st.push({x:(Math.random()-0.5)*400,y:(Math.random()-0.5)*300,z:Math.random()*500+100})}let sp=5;function dr(){ctx.fillStyle='#000';ctx.fillRect(0,0,800,600);let n=[];for(let s of st){s.z-=sp;if(s.z<10){s.x=(Math.random()-0.5)*400;s.y=(Math.random()-0.5)*300;s.z=500}}for(let s of st){if(s.z>0){let px=cx+s.x/(s.z/50);let py=cy+s.y/(s.z/50);if(px>0&&px<800&&py>0&&py<600){let b=Math.floor(255*(1-s.z/500));let sz=Math.max(1,(100-s.z)/100);ctx.fillStyle=`rgb(${b},${b},${b})`;ctx.fillRect(px,py,sz,sz)}}}sp=5+(Math.sin(Date.now()/2000)*2);i.textContent=`Stars: ${st.length} Speed: ${sp.toFixed(1)}`}setInterval(dr,50);</script></body></html>| Model | Blind score | Latency | Status |
|---|---|---|---|
| gemma4:26b | — | — | harness |
| qwen3:8b | — | — | harness |
| deepseek-r1:14b | — | 180.9 s | OK |
| llama3.1:8b | — | 79.2 s | OK |
| qwen3.5:9b | — | 33.1 s | OK |
| qwen3-coder:30b | — | 13.3 s | OK |
| qwen3:14b | — | 18.1 s | OK |
| mistral-small:24b | — | 72.4 s | OK |
| deepseek-r1:32b | — | 233.4 s | OK |
| command-r:35b | — | 252.7 s | OK |
| qwq:32b | — | 262.8 s | OK |