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 packs circles into a <canvas> without overlap: repeatedly pick a random free spot, grow a new circle there until it touches an existing circle or the border, then keep it and start the next one. Draw each circle as it grows, colour it by its final size, and show how many circles are placed and how much of the area is covered. Start over with a fresh pattern once the canvas is full. 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>
<body>
<canvas id="c"></canvas>
<script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');
let circles = [];
let currentCircle = null;
let animationFrameId = null;
c.width = 800;
c.height = 600;
function init() {
circles = [];
currentCircle = null;
draw();
gameLoop();
}
function calculateMaxRadius(x, y) {
let r = Math.min(x, c.width - x, y, c.height - y);
for (const circ of circles) {
const dx = x - circ.x;
const dy = y - circ.y;
const dist = Math.sqrt(dx * dx + dy * dy);
r = Math.min(r, dist - circ.radius);
}
return r > 0 ? r : 1;
}
function placeCircle() {
if (circles.length >= 50) { // Stop condition
init();
return false;
}
const x = Math.random() * c.width;
const y = Math.random() * c.height;
const maxR = calculateMaxRadius(x, y);
if (maxR > 5) { // Ensure the circle is sizable enough to be visible/meaningful
currentCircle = { x: x, y: y, radius: 0, targetRadius: maxR };
return true;
}
return false;
}
function draw() {
ctx.clearRect(0, 0, c.width, c.height);
for (const circ of circles) {
ctx.beginPath();
ctx.arc(circ.x, circ.y, circ.radius, 0, Math.PI * 2);
ctx.fillStyle = `hsl(${Math.floor(360 * (circ.radius / c.width))}, 70%, ${10 + Math.min(50, circ.radius / 2))}%)`;
ctx.fill();
}
if (currentCircle) {
const r = currentCircle.radius;
const targetR = currentCircle.targetRadius;
const growthRate = Math.max(r * 0.1, 0.5); // Ensures visible growth
currentCircle.radius = Math.min(r + growthRate, targetR);
ctx.beginPath();
ctx.arc(currentCircle.x, currentCircle.y, currentCircle.radius, 0, Math.PI * 2);
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();
if (Math.abs(currentCircle.radius - targetR) < 1) {
circles.push({ x: currentCircle.x, y: currentCircle.y, radius: currentCircle.targetRadius });
currentCircle = null;
// Attempt to place the next circle immediately when the current one finishes
setTimeout(() => {
placeNext();
}, 50);
}
}
}
function updateMetrics() {
const coveredArea = circles.reduce((sum, c) => sum + Math.PI * c.radius * c.radius, 0);
const totalArea = c.width * c.height;
const coveragePercent = (coveredArea / totalArea) * 100;
let info = `Circles: ${circles.length}<br>`;
info += `Coverage: ${coveragePercent.toFixed(2)}%`;
document.body.innerHTML = `<canvas id="c" width="${c.width}" height="${c.height}"></canvas><div style="position:absolute; top:10px; left:10px; color:#333;">${info}</div>`;
// Re-apply the canvas size after modifying innerHTML to keep context valid
// (Though in a real scenario, we'd use dedicated UI elements)
c.width = c.width;
}
function placeNext() {
if (placeCircle()) {
updateMetrics();
} else {
console.log("Canvas full or no viable spot found.");
}
}
function gameLoop() {
draw();
updateMetrics();
animationFrameId = requestAnimationFrame(gameLoop);
}
// Start the process
init();
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circles Packing</title>
<style>
body {
margin: 0;
}
canvas {
border: solid black 1px;
}
</style>
<script>
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let w, h, r, circles = [], count = 0, area = 0;
let running = true;
function init() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
ctx.lineWidth = 1;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
for (let i = 0; i < w * h / 1000; i++) {
let x, y, r = Math.random() * 20 + 10;
do {
x = Math.floor(Math.random() * w);
y = Math.floor(Math.random() * h);
} while (closeEnough(x, y));
circleAt(x, y, r);
}
}
function closeEnough(x0, y0) {
for (let i = 0; i < circles.length; i++) {
let x1 = circles[i].x + circles[i].r;
let y1 = circles[i].y + circles[i].r;
if ((x0 - x1)*(x0 - x1) + (y0 - y1)*(y0 - y1) < (circles[i].r + r)*(circles[i].r + r)) {
return true;
}
}
return false;
}
function circleAt(x, y, r) {
let b = {x: x, y: y, r: r};
ctx.beginPath();
ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
ctx.fillStyle = `hsl(${Math.floor(Math.random() * 360)},100%,50%)`;
ctx.fill();
circles.push(b);
count++;
area += Math.PI * r * r;
}
function draw() {
if (!running) return;
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < circles.length; i++) {
let x = circles[i].x + circles[i].r;
let y = circles[i].y + circles[i].r;
if (!closeEnough(x, y)) continue;
ctx.beginPath();
ctx.arc(circles[i].x, circles[i].y, circles[i].r, 0, Math.PI*2);
ctx.strokeStyle = `hsl(${Math.floor(Math.random() * 360)},100%,${circles[i].r / (w + h) * 90 + 10}%)`;
ctx.stroke();
}
if (count > w * h / 20) {
running = false;
init();
} else {
let x, y, r = Math.random() * 50 + 10;
do {
x = Math.floor(Math.random() * w);
y = Math.floor(Math.random() * h);
} while (closeEnough(x, y));
circleAt(x, y, r);
}
ctx.font = '12px Arial';
ctx.fillStyle = 'black';
ctx.fillText(`Circles: ${count}, Area: ${(area / Math.PI).toFixed(2)}`, 10, 20);
requestAnimationFrame(draw);
}
init();
draw();
</script>
</head>
<body>
</body>
</html>
``````html
<!DOCTYPE html>
<html>
<head>
<title>Circle Packing Simulation</title>
<style>
body {margin:0;overflow:hidden;background:#222;}
canvas {display:block;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');
let W, H;
let circles = [];
let isRunning = true;
function resize() {
W = H = window.innerWidth;
c.width = W;
c.height = H;
}
window.addEventListener('resize', resize);
resize();
let state = { count: 0, area: 0 };
function drawMetrics() {
ctx.fillStyle = 'white';
ctx.font = '12px Arial';
ctx.fillText(`Circles: ${state.count}`, 10, 20);
ctx.fillText(`Coverage: ${(state.area * 100).toFixed(1)}%`, W - 150, 20);
}
function draw() {
ctx.clearRect(0, 0, W, H);
circles.forEach(c => {
// Color based on radius (normalized for visual effect)
const hue = Math.min(360, c.r * 5);
ctx.fillStyle = `hsl(${hue}, 70%, ${Math.max(40, c.r*10)}%)`;
ctx.beginPath();
ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
ctx.fill();
});
drawMetrics();
}
function tryPlaceCircle(startX, startY) {
let r = Math.min(startX, W - startX, startY, H - startY);
r *= 0.95; // Start slightly smaller than max possible
while (true) {
let canGrow = true;
for (const c of circles) {
const distSq = (startX - c.x)**2 + (startY - c.y)**2;
const requiredDist = c.r + r;
if (distSq < requiredDist**2) {
canGrow = false;
break;
}
}
let maxPossibleR = Math.min(startX, W - startX, startY, H - startY);
for (const c of circles) {
const dist = Math.sqrt((startX - c.x)**2 + (startY - c.y)**2);
maxPossibleR = Math.min(maxPossibleR, dist - c.r);
}
if (canGrow && r < maxPossibleR * 0.98) {
// Check if we are close enough to the theoretical maximum
let toleranceCheck = Math.abs(r - maxPossibleR);
if (toleranceCheck > 1) { // If difference is significant, we can grow
r = maxPossibleR;
break;
} else {
// Stable size reached or near border/circle contact
break;
}
}
// Simple growth step for animation
if (r < Math.min(startX, W - startX, startY, H - startY) * 0.98) {
r *= 1.05;
} else {
break; // Cannot grow further
}
// Safety break to prevent infinite loops near boundaries
if (r > Math.min(startX, W - startX, startY, H - startY)) break;
}
return r;
}
function placeCircle() {
const x = Math.random() * (W - 100) + 50;
const y = Math.random() * (H - 100) + 50;
let newR = tryPlaceCircle(x, y);
// Check if placement is viable or if we are too close to the edge/existing circles
if (newR < 5) {
return false; // Cannot place a circle here
}
circles.push({ x: x, y: y, r: newR });
state.count++;
state.area += Math.PI * newR**2;
return true;
}
function gameLoop() {
if (!isRunning) return;
// Randomly attempt placement repeatedly until successful or failed many times
let attempts = 0;
while (attempts < 10 && placeCircle()) {
attempts++;
}
draw();
requestAnimationFrame(gameLoop);
}
function resetGame() {
circles = [];
state.count = 0;
state.area = 0;
placeCircle(); // Place the first circle immediately to start
}
// Start everything
resetGame();
gameLoop();
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html>
<head>
<style>
body {display:flex;justify-content:center;align-items:center;height:100vh;margin:0;}
canvas {border: 1px solid black;}
</style>
</head>
<body>
<canvas id="packingCanvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('packingCanvas');
const ctx = canvas.getContext('2d');
let circles = [];
let coveredArea = 0;
let totalCircles = 0;
function getRandomPoint() {
return { x: Math.random() * canvas.width, y: Math.random() * canvas.height };
}
function circleOverlaps(center, radius) {
for (let circle of circles) {
let dx = center.x - circle.center.x;
let dy = center.y - circle.center.y;
if (Math.sqrt(dx * dx + dy * dy) < radius + circle.radius) return true;
}
return false;
}
function drawCircle(center, radius, color) {
ctx.beginPath();
ctx.arc(center.x, center.y, radius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
function animate() {
if (circles.length === 0 || coveredArea >= canvas.width * canvas.height) {
circles = [];
coveredArea = 0;
totalCircles = 0;
requestAnimationFrame(startDraw);
return;
}
for (let circle of circles) {
drawCircle(circle.center, circle.radius, `rgba(${circle.color}, 1)`);
}
let textSize = ctx.measureText(`Circles: ${totalCircles}`);
ctx.clearRect(0, canvas.height - 30, canvas.width, 30);
ctx.fillStyle = 'black';
ctx.font = "20px Arial";
ctx.fillText(`Circles: ${totalCircles}`, canvas.width / 2 - textSize.width / 2, canvas.height - 10);
requestAnimationFrame(animate);
}
function startDraw() {
let point = getRandomPoint();
let radius = 0;
while (radius < Math.min(point.x, point.y, canvas.width - point.x, canvas.height - point.y)) {
if (!circleOverlaps({ x: point.x + radius / 2, y: point.y + radius / 2 }, radius)) {
circles.push({
center: { x: point.x, y: point.y },
radius,
color: Math.floor(Math.random() * 256)
});
drawCircle(point, radius, `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.8)`);
coveredArea += Math.PI * radius * radius;
totalCircles++;
break;
}
radius += 1;
}
requestAnimationFrame(startDraw);
}
requestAnimationFrame(animate);
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html><body style="background:#000;margin:0;display:flex;justify-content:center;align-items:center;height:100vh">
<canvas id=c></canvas>
<div id=i style="position:absolute;left:0;top:0;color:white;font-family:Arial">Circles: 0</div>
<div id=ia style="position:absolute;left:0;top:20;color:white;font-family:Arial">Coverage: 0%</div>
<script>
const c=document.getElementById('c'), ctx=c.getContext('2d');
const cw=800,ch=600;
c.width=cw;c.height=ch;
let circles=[],maxRadius=5,cells=40,minR=2,maxR=100;
let count=0,areaCovered=0;
class Circle{
constructor(x,y,r){
this.x=x;this.y=y;this.r=r;
this.growing=false;
this.color=`hsl(${Math.random()*360},70%,50%)`;
}
overlaps(other){
const dx=this.x-other.x,dy=this.y-other.y,d=dx*dx+dy*dy;
return d< (this.r+other.r)**2;
}
draw(){
ctx.beginPath();
if(this.growing)ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
else{
ctx.fillStyle=this.color;ctx.fillRect(this.x-this.r,this.y-this.r,2*this.r,2*this.r);
}
ctx.strokeStyle='white';ctx.lineWidth=1;
ctx.stroke();
}
}
function getCell(x,y){
return Math.floor(x/cellSize),Math.floor(y/cellSize);
}
let cellSize=cw/cells,chSize=ch/cells;
function checkCollision(x,y,r){
for(let i of circles)if(i.x-i.r<=x+r &&i.x+i.r>=x-r &&i.y-i.r<=y+r &&i.y+i.r>=y-r &&Math.hypot(i.x-x,i.y-y)<r+i.r+1)c.fillStyle='white'; // Check collisions
return false;
}
function growCircle(c,x,y,r,step){
if(step>1000||c.x+c.r>=cw ||c.x-c.r<=0 ||c.y+c.r>=ch ||c.y-c.r<=0){c.growing=false;return;}
for(let i of circles)if(i.overlaps(c)){
c.growing=false;
return;
}
ctx.clearRect(0,0,cw,ch);
circles.forEach(c=>c.draw());
count=circles.length;areaCovered=circles.reduce((a,c)=>a+Math.PI*c.r**2,0)/(cw*ch)*100;
document.getElementById('i').textContent=`Circles: ${count}`;
document.getElementById('ia').textContent=`Coverage: ${areaCovered.toFixed(1)}%`;
requestAnimationFrame(()=>growCircle(c,x,y,r,step+1));
}
function placeNewCircle(){
if(count>=cells*cells)clearCanvas();
const x=Math.random()*(cw-2*minR)+minR;
const y=Math.random()*(ch-2*minR)+minR;
const r=minR+(Math.random()*(maxR-minR));
const newC=new Circle(x,y,r);
if(checkCollision(newC.x,newC.y,newC.r)){
circles.push(newC);
growCircle(newC,x,y,r,0);
}else placeNewCircle();
}
function clearCanvas(){
ctx.clearRect(0,0,cw,ch);
circles=[];count=0;areaCovered=0;
document.getElementById('i').textContent='Circles: 0';
document.getElementById('ia').textContent='Coverage: 0%';
placeNewCircle();
}
placeNewCircle();
setInterval(clearCanvas,3e4*1e6); // No, wait...
// Wait, no. The animation should restart when full.
</script>
</body></html>
``````html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Circle Packing</title></head>
<body><canvas id="canvas" style="border:1px solid #333;"></canvas><script>const canvas=document.getElementById('canvas');const ctx=canvas.getContext('2d');let W=600,H=500;canvas.width=W;canvas.height=H;ctx.fillStyle='#111';ctx.fillRect(0,0,W,H);let circles=[];let animationFrameId=null;function init() {circles=[];let maxAttempts=200;for (let i=0;i<maxAttempts;++i){const x=Math.random()*W;const y=Math.random()*H;if(x-10>0&&y-10>0&&x+10<W&&y+10<H){const r_start=Math.min(Math.random()*20, Math.max(5, 1));let currentR=r_start;if(!isOverlapping(x, y, currentR)){circles.push({x:x,y:y,r:currentR,finalR:0});}else{break;}}drawStats();animate();/* The main loop */const animate=(t)=>{animationFrameId=requestAnimationFrame(()=>runCycle(t));};function runCycle(t){if (circles.length > 0) {const firstCircle=circles[0];if(firstCircle.finalR===0 && !isOverlapping(firstCircle.x, firstCircle.y, firstCircle.r*1.1)){// Grow check
let newR = Math.min(W/2, H/2);while(!isOverlapping(firstCircle.x, firstCircle.y, newR)){newR+=0.5;}newR-=0.5;if(newR > firstCircle.r){firstCircle.finalR=newR;drawGrowth(firstCircle);else{/* Start new circle or finish */}}
} else if (circles[circles.length-1].finalR>0 && circles.filter(c=>c.finalR===0).every(Boolean)){/* All finished, need restart check */const coverageRatio=(Math.PI*(circles.reduce((sum, c)=>sum+c.r*2*c.y/W,0)/3)+Math.PI*(circles.reduce((sum, c)=>sum+c.x*2*c.finalR/H,0)/3))/ (W*H);if(coverageRatio>0.8){/* Restart */init();drawGrowth(circles[0]);return;}} else { /* Start new circle if current one is small or finished */
const lastCircle=circles[circles.length-1];if(!lastCircle||lastCircle.finalR===0 || Math.random()<0.2) {const x=Math.random()*W;const y=Math.random()*H;let r_start=Math.min(Math.random()*20, 15);if(x-r_start>0&&y-r_start>0&&x+r_start<W&&y+r_start<H){circles.push({x:x,y:y,r:r_start,finalR:0});}else{return;}}
}
drawGrowth(circles[0]);
} else {/* First circle setup */if (Math.random() < 0.5) {const x=W/2;let y=Math.random()*H;let r_start=10;while(!isOverlapping(x,y,r_start*1.1)){y+=1;}circles.push({x:x,y:y,r:r_start,finalR:0});}else {const y=H/2;let x=Math.random()*W;let r_start=10;while(!isOverlapping(x,y,r_start*1.1)){x+=1;}circles.push({x:x,y:y,r:r_start,finalR:0});}}
animationFrameId=requestAnimationFrame(()=>runCycle(t));}function isOverlapping(cx,cy,cr){let overlap=false;for(const c of circles){if(c.finalR>0&&Math.hypot(cx-c.x,cy-c.y)<c.r+cr-(c.finalR/2)){overlap=true;break;}if(c.finalR===0 && Math.hypot(cx-c.x,cy-c.y)<c.r+cr){overlap=true;break;}}return overlap}function drawGrowth(circle){ctx.beginPath();ctx.arc(circle.x,circle.y,circle.r*1.1,0,Math.PI*2);ctx.strokeStyle=`rgba(50, 50, 255, ${circle.finalR/W * 0.8 + 0.2})`;ctx.lineWidth=3;ctx.stroke();ctx.beginPath();ctx.arc(circle.x,circle.y,Math.min(canvas.width/2, canvas.height/2),0,Math.PI*2);ctx.clip();let alpha=Math.max(0,Math.min(1,(circle.finalR-circle.r)/5)));if(alpha>0){ctx.fillStyle=`rgba(255, 100, 0, ${alpha * 0.8})`;ctx.globalAlpha=alpha*0.8;ctx.fill();}}function drawStats(){let totalArea=0,count=circles.length;for(const c of circles){totalArea+=Math.PI*(c.finalR>0?c.finalR:c.r)*c.finalR/2;}let coverageRatio=(totalArea/(W*H)).toFixed(3);ctx.fillStyle='#fff';ctx.font='16px Arial';ctx.fillText(`Circles: ${count} | Coverage: ${coverageRatio}`, 10, 20);if (circles[0] && circles[0].finalR===0) ctx.fillText("Growing...", 10, 40);else if(count>=25){ctx.fillStyle='rgba(0,0,0,0.3)';ctx.fillRect(0,0,W,H);}else{ctx.fillStyle='#aaa';ctx.font='14px Arial';ctx.fillText("Click to start (or wait for auto-start)", 10, H-20);}}document.addEventListener('DOMContentLoaded',()=>init());</script></body></html>
```<think>
Alright, I need to create a self-contained HTML file that packs circles into a canvas without overlaps. The user specified a strict limit of 7000 characters, so I need to be concise. Let's start by outlining the steps.
First, the HTML structure: a canvas element with some attributes. Then, in the JavaScript section, I'll need to set up the canvas context, handle animation frames, and manage the circles.
The algorithm should pick a random free spot, grow a circle until it touches another circle or the border, then add it as a new circle. I have to track all existing circles to check for overlaps. The color should be based on the final size, maybe using a gradient or a function of the radius.
To start, I'll set up the canvas and the initial variables. The animation loop will use requestAnimationFrame for smoothness. When the canvas is full, it should restart with a new pattern.
Hmm, how to represent each circle? Maybe an array of objects with x, y, radius, color. The main loop needs to check if the current circle can grow more without overlapping.
Choosing a random starting point: perhaps pick a random x and y within the canvas. Then, increment the radius until it touches any existing circle or the edge. The growing process has to check all existing circles each step.
Collision detection between two circles: the distance between centers should be at least the sum of their radii. Also, check distance to edges (distance from x to 0 or width is >= radius).
When a circle can't grow further, add it to the array and draw it. The drawing should be done progressively; maybe redraw all circles each frame while the current one is growing?
Wait, but redrawing all each frame might be slow. Alternatively, maybe the animation loop both grows the current circle and draws everything. Each frame, the current circle's radius increases a little until it can't, then moves to the next.
To optimize, perhaps the main loop increments the radius step by step. When it can't go further, store the final radius and start a new circle.
Also, the color by final size. Maybe use HSL where the hue varies with size, or map radius to a color value.
Calculating area coverage: the total area of all circles divided by the canvas area. Need to track that and display it.
When the canvas is full (no more circles can be added), restart. How to determine when it's full? Maybe after several attempts to place circles fail, like 100 tries without success, then trigger a reset.
Putting it all together: setup function to initialize variables, the loop function that handles each frame. The loop checks if the current circle can grow, if not, starts a new one. When no more circles can be placed, reset.
Now, code structure. The HTML is straightforward: a canvas with id 'c', and a div for stats (number of circles and area covered).
Variables: canvas, ctx, circles array, current circle (cx, cy, current radius), step (to increment radius), lastRadius (for color?), stats div.
The main loop: each frame, if there's a current circle, try to grow it. If it can't, finalize it and start new. Otherwise, increase radius and check again.
Wait, perhaps in each frame, the current circle's radius is increased by a small delta. Check for collisions with all existing circles and edges. If any collision, revert to last valid radius and finalize the circle.
Alternatively, each step increases radius until any collision is detected, then stop.
Hmm, maybe start with a tiny radius for the new circle, then incrementally add to it each frame until a collision occurs.
But to make it smooth, the step size should be small enough that it doesn't jump over the collision point. Maybe step is 0.5 or 1 pixel per frame.
Collision detection each frame for the growing circle against all existing ones. If any collision, stop growing and add it.
The color can be based on the final radius. Maybe map the radius to a color, like using a gradient from blue (small) to red (large), or using a function of radius.
For the area covered, compute the sum of πr² for all circles divided by canvas area (width*height).
When resetting, clear the canvas and reset the circles array, then start over.
Now, putting this into code.
The HTML:
```html
<canvas id="c"></canvas><div id="s"></div>
```
JS setup:
```javascript
const c = document.getElementById('c'), ctx = c.getContext('2d'), stats = document.getElementById('s');
let circles = [], r = 0, current = null, step = 0.5, count = 0, area = 0;
let w = c.width = 600, h = c.height = 600;
function loop() {
// logic here
requestAnimationFrame(loop);
}
loop();
```
But need to handle starting a new circle, checking for placement, etc.
When starting a new circle, pick random x and y. Then, grow until collision.
Wait, the process should be: in each frame, if there's no current circle, try to find a starting position. Maybe try a few random spots to find one where a circle can fit at least minimally.
Alternatively, when a circle can't be placed anymore, wait until all attempts fail, then reset.
Hmm, perhaps:
In the loop:
- If there's no current circle, attempt to find a new starting position by generating random x and y. Then set current to that position with radius 0.
- Then, in each frame, grow the current circle's radius by step. Check for collisions with existing circles and edges. If any, then reset to the previous radius, finalize the circle, and start a new one.
Wait, but how to track previous radius? Maybe increment radius, check, and if collision occurs, revert to the previous radius (so the current is now final), add to circles, and start a new one.
Structure:
Inside loop:
if (current) {
// try to grow
let ok = true;
let newRad = current.r + step;
// check if newRad is possible
for (let c of circles) {
let dx = current.x - c.x, dy = current.y - c.y;
if (dx*dx + dy*dy < (current.r + newRad + step)*(current.r + newRad + step)) { // Hmm, maybe better to check distance between centers vs sum of radii
ok = false;
break;
}
}
// also check edges
if (current.x - newRad < 0 || current.x + newRad > w || current.y - newRad < 0 || current.y + newRad > h) ok = false;
if (ok) {
current.r = newRad;
} else {
// can't grow further, finalize current.r (before adding step)
circles.push(current);
count++;
area += Math.PI * current.r**2;
current = null;
}
// draw the current circle as it grows
ctx.beginPath();
ctx.arc(current.x, current.y, current.r, 0, Math.PI*2);
ctx.fillStyle = 'hsl(' + (current.r / (w/2)*120) + ',50%,50%)';
ctx.fill();
} else {
// find a new spot
let tries = 0;
do {
let x = Math.random() * w, y = Math.random() * h;
let minRad = 0;
let ok = true;
for (let c of circles) {
let dx = x - c.x, dy = y - c.y;
let d = Math.hypot(dx, dy);
if (d < c.r) {
ok = false;
break;
}
}
if (ok && x >= minRad && x <= w - minRad && y >= minRad && y <= h - minRad) {
current = {x, y, r:0};
break;
}
tries++;
} while (tries < 10);
if (tries === 10) {
// couldn't find a spot, reset
ctx.clearRect(0,0,w,h);
circles = [];
count = 0;
area = 0;
current = null;
}
}
// draw all circles
ctx.clearRect(0,0,w,h);
for (let c of circles) {
ctx.beginPath();
ctx.arc(c.x, c.y, c.r, 0, Math.PI*2);
ctx.fillStyle = 'hsl(' + (c.r / (w/2)*120) + ',50%,50%)';
ctx.fill();
}
// draw the current one if exists
if (current) {
ctx.beginPath();
ctx.arc(current.x, current.y, current.r, 0, Math.PI*2);
ctx.fillStyle = 'hsl(' + (current.r / (w/2)*120) + ',50%,50%)';
ctx.fill();
}
// update stats
stats.textContent = `Circles: ${count} | Coverage: ${(area/(w*h)*100).toFixed(1)}%`;
```
Wait, but this has some issues.
First, in the collision check for the new current position before starting: the code is checking if the new spot is not inside any existing circle, which is necessary. But then, when growing, it checks again.
Also, the initial code may have a problem with the loop structure. The main loop function must be structured to handle all these steps efficiently.
Another thing: the order of operations. Maybe first clear the canvas each frame, then draw all existing circles and the current one.
But the current approach might be too computationally heavy, especially as the number of circles grows, since for each new radius step, it has to check against all existing circles.
To optimize, perhaps precompute the circles array and the checks.
Also, when starting a new circle, the random position has to be such that even a small circle can fit. The minRad is zero, but perhaps it's better to start with at least a minimal radius?
Wait, perhaps when creating the new current circle, it's set to radius 0, and then we attempt to grow. The initial position must be such that even a tiny circle can fit (so not inside existing circles). The collision check in the 'do-while' loop ensures that the starting point is not inside another circle.
Hmm.
Another possible issue: when checking for collisions while growing, the code may need to check the new proposed radius (current.r + step) against existing circles. Wait in the code above, the newRad is current.r + step, but when checking against existing circles' radius and positions.
The code's collision check is:
dx = current.x - c.x, dy = current.y - c.y
distance squared between centers: dx² + dy²
sum of radii: (current.r + newRad) ?
Wait, no, the current circle is growing to newRad (current.r + step). The existing circle has radius c.r. The distance between centers must be >= (newRad + c.r), otherwise they overlap.
Wait, the distance between centers must be at least (current's new radius + c's radius). So the squared distance should be >= (newRad + c.r)^2.
So the condition would be: dx*dx + dy*dy < (newRad + c.r)^2. If that's true, they are overlapping.
So in the collision check loop:
If (dx² + dy² < (current.r + step + c.r)^2) then it's overlapping.
Wait, no: current is moving from current.r to current.r + step. So newRad = current.r + step.
Thus, the new radius is newRad, and the existing circle has radius c.r. The distance between centers must be >= (newRad + c.r).
So the squared distance must be > (newRad + c.r)^2.
Therefore, the condition for collision would be if (dx² + dy² < (newRad + c.r)^2).
Thus, in code:
if (dx*dx + dy*dy < (newRad + c.r)**2) then collision.
Also, checking edges: current.x - newRad >=0, current.x + newRad <=w, similarly for y.
So in code:
if ( (current.x - newRad < 0) || (current.x + newRad > w) || (current.y - newRad <0) || (current.y + newRad >h) ) then edge collision.
So in the code above, the check is:
if (current.x - newRad <0 || ... ) → ok = false.
Therefore, the collision check is correct.
Now, the problem in the code I sketched is that the 'do-while' loop for starting a new circle has a tries limit of 10. If after 10 tries it can't find a starting position (i.e., the canvas is full), then it triggers a reset.
But in reality, after many circles, there might be a lot of attempts needed. So setting tries to 100 might be better? Or perhaps a different approach.
Alternatively, when the current remains null for a certain number of frames, we can assume the canvas is full.
Alternatively, track the number of consecutive failures to start a new circle. For example, if after 100 attempts to find a starting position, we can reset.
But in the current code, the 'tries' is within the loop for starting each new circle. So each time a circle is finished, it tries up to 10 times to find a new starting position. If it can't, then it resets.
This could lead to early reset if the current circle is placed but the next can't be found. But maybe that's acceptable.
Another issue is the initial 'current' being set to null, and in each loop iteration, if it's null, the code tries to find a new starting position.
The color calculation: 'hsl(' + (current.r / (w/2)*120) + ',50%,50%)'
This maps the radius to a hue between 0 and 120 degrees (so blue to green). Maybe better to have a wider range. Let's see, w is 600, so w/2 is 300. So radius up to 300 would give 120 degrees. But the maximum possible radius would be min(w/2, h/2), so 300. So that's okay.
Alternatively, maybe using current.r / (maxPossibleRadius) * 360, but the current formula is okay for now.
Testing the code's structure.
Now, putting all together into a single HTML file.
The code must be concise, so variables should be minimized. Also, since it's strict on characters, need to abbreviate variable names where possible.
Let me try to code it step by step, making variables shorter.
Also, in JavaScript, can use single-line if's and for loops.
Let me think of variable names:
canvas → c
ctx → ctx
circles array → a
current circle → o
step → s (maybe 1 instead of 0.5 to speed up?)
count → n (number of circles)
area → area (maybe keep it)
stats → s
Wait, but stats is an element, so maybe keep as s.
Wait, let me abbreviate:
const c=document.getElementById`c`,ctx=c.getContext`2d`,s=document.getElementById`stats`; but 'stats' is in the HTML as 's'? Wait the div is id="s".
So div is: <div id="s"></div>
Thus:
const c=document.getElementById("c"),ctx=c.getContext("2d"),s=document.getElementById("s");
Variables:
var a=[],r=0,o=null,s=1,n=0,k=0;
Wait but variable names need to be unique. Let's see:
Maybe:
let circles=[], current=null, step=1, count=0, area=0;
But shortened:
let a=[],o=null,s=1,n=0,k=0;
Wait, need to map area properly. Or perhaps area can be k.
But maybe it's better not to abbreviate too much. Let me go step by step.
Full code outline:
```html
<canvas id=c></canvas><div id=s></div>
<script>
const c=document.getElementById("c"),ctx=c.getContext("2d"),s=document.getElementById("s");
let w=c.width=600,h=c.height=600,a=[],o=null,s=1,n=0,k=0; // s is step? Or step is s. Maybe step=1
function l(){ // loop
if(o){
let f=o.r+s,ok=1;
for(let c of a){
let dx=o.x-c.x,dy=o.y-c.y,d=dx*dx+dy*dy;
if(d<(f+c.r)**2){ok=0;break}
}
if(o.x<f||o.x>h-f||o.y<f||o.y>h-f)ok=0;
if(ok)o.r=f;
else{
a.push(o);
n++;
k+=Math.PI*o.r**2;
o=null;
}
}else{
let x,y,t=0;
do{
x=Math.random()*w;
y=Math.random()*h;
let ok=1;
for(let c of a){
let dx=x-c.x,dy=y-c.y,d=dx*dx+dy*dy;
if(d<(c.r)**2){// check if new point is inside existing circle?
ok=0;break
}
}
if(ok){
o={x,y,r:0};
break;
}
t++;
}while(t<10);
if(t==10){
ctx.clearRect(0,0,w,h);
a=[];n=0;k=0;o=null;
}
}
ctx.clearRect(0,0,w,h);
a.forEach(c=>{
ctx.beginPath();
ctx.arc(c.x,c.y,c.r,0,Math.PI*2);
ctx.fillStyle='hsl('+c.r/(w/2)*120+',50%,50%)';
ctx.fill();
});
if(o){
ctx.beginPath();
ctx.arc(o.x,o.y,o.r,0,Math.PI*2);
ctx.fillStyle='hsl('+o.r/(w/2)*120+',50%,50%)';
ctx.fill();
}
s.textContent=`Circles: ${n}| Coverage: ${((k/(w*h))*100).toFixed(1)}%`;
requestAnimationFrame(l);
}
requestAnimationFrame(l);
</script>
```
Wait, there are a few issues here:
1. The 's' variable is used for step (step=1), but also for the stats element. That's conflicting. So need to rename.
Let me fix the variable names so stats is 's', step is 't', but better to use different names.
Let me redefine variables:
const c=document.getElementById("c"),ctx=c.getContext("2d"),s=document.getElementById("s");
let w=c.width=600,h=c.height=600,a=[],o=null,step=1,n=0,k=0;
Then in the loop:
function l() {
if(o){
let f=o.r + step; // new radius
Then the loop proceeds.
In the else (starting new circle):
The check for existing circles is:
for(c of a) {
dx = x - c.x; dy = y - c.y;
d = dx*dx + dy*dy;
if(d < (c.r)**2 → then the new point is inside existing circle → not allowed.
Thus, the starting position must be outside all existing circles.
Yes.
Thus, the code.
Now, the problem with variable 's' which is the stats element conflicting with step. Let's change step to 'st'.
Now, code:
```html
<canvas id=c></canvas><div id=s></div>
<script>
const c=document.getElementById("c"),ctx=c.getContext("2d"),st=document.getElementById("s");
let w=c.width=600,h=c.height=600,a=[],o=null,step=1,n=0,k=0;
function l(){
if(o){
let f=o.r+step,ok=1;
for(let c of a){
let dx=o.x-c.x,dy=o.y-c.y,d=dx*dx+dy*dy;
if(d<(f+c.r)**2)ok=0;
}
if(o.x<f||o.x>w-f||o.y<f||o.y>h-f)ok=0;
if(ok)o.r=f;
else{
a.push(o);
n++;
k+=Math.PI*(o.r)**2;
o=null;
}
}else{
let x,y,t=0;
do{
x=Math.random()*w;
y=Math.random()*h;
let ok=1;
for(let c of a){
let dx=x-c.x,dy=y-c.y,d=dx*dx+dy*dy;
if(d<(c.r)**2)ok=0;
}
if(ok){
o={x,y,r:0};
break;
}
t++;
}while(t<10);
if(t==10){
ctx.clearRect(0,0,w,h);
a=[];n=0;k=0;o=null;
}
}
ctx.clearRect(0,0,w,h);
a.forEach(c=>{
ctx.beginPath();
ctx.arc(c.x,c.y,c.r,0,Math.PI*2);
ctx.fillStyle='hsl('+c.r/(w/2)*120+',50%,50%)';
ctx.fill();
});
if(o){
ctx.beginPath();
ctx.arc(o.x,o.y,o.r,0,Math.PI*2);
ctx.fillStyle='hsl('+o.r/(w/2)*120+',50%,50%)';
ctx.fill();
}
st.textContent=`Circles: ${n}| Coverage: ${((k/(w*h))*100).toFixed(1)}%`;
requestAnimationFrame(l);
}
requestAnimationFrame(l);
</script>
```
Now, check for possible syntax errors.
In the line:
ctx.fillStyle='hsl('+c.r/(w/2)*120+',50%,50%)';
Missing a multiplication operator between c.r and (w/2) ?
Wait, the expression is: c.r/(w/2)*120 → same as (c.r/(w/2))*120
But in JavaScript, it's written as (c.r / (w/2)) * 120 → which is okay.
Alternatively, to make it more accurate:
The hue is calculated as (c.r / (w/2)) * 120 → scaling the radius to 0-120 degrees.
This should work.
Now, checking the edge collision:
if(o.x < f || o.x > w-f || o.y < f || o.y > h-f) → because the circle must be entirely within the canvas. So x - r >=0, x + r <=w → x >= r and x <= w - r → equivalent to o.x >= f (since f = o.r + step? Wait no: f is the new radius (o.r + step). Wait o.r is the current radius, and f is the new radius (o.r + step). So the condition is:
o.x - f >=0 → o.x >= f?
Wait, no, the center must be at least f away from the edges.
Wait, the condition should be:
o.x - f >=0 (left edge)
o.x + f <= w (right edge)
o.y - f >=0 (top edge)
o.y + f <= h (bottom edge)
Thus, the four conditions:
o.x >= f,
o.x <= w - f,
o.y >= f,
o.y <= h - f.
But in code:
if( o.x < f || o.x > w - f || o.y < f || o.y > h - f ) → no, that would be:
The condition is if any of these are true, then it's outside.
Wait no: To be inside, the center must be between f and w-f in x, etc. So the condition for edge collision is:
if (o.x < f || o.x > w - f || o.y < f || o.y > h - f) → meaning the center is too near the edge, so the circle would go beyond.
Thus, in code:
if( o.x < f || o.x > w - f || o.y < f || o.y > h - f ) → ok=0.
But in the current code, the condition is written as:
if(o.x < f || o.x > w - f || o.y < f || o.y > h - f) → but in the code it's written as:
if(o.x <f || o.x>w-f || o.y<f || o.y>h-f) → which is correct.
Thus, okay.
Now, let's see if this code works.
Testing possible issues:
- When starting a new circle, the loop runs up to 10 times to find a starting position not inside any existing circles. If it can't (after 10 tries), then reset.
- The color calculation is okay.
- The step is 1, so the circles grow by 1 pixel each frame. If this is too slow, increasing step to 2 or more might help, but the initial code can be adjusted.
- The coverage calculation is k/(w*h)*100, where k is the sum of πr² for each circle.
This should be okay.
Now, to make it even more concise (to save characters):
Use shorter variable names:
- a instead of circles
- o instead of current
- st instead of stats
- n instead of count
- k instead of area
Maybe shorten function names, but requestAnimationFrame is necessary.
Shorten Math functions:
Math.PI → (1).toFixed is okay.
Now, the code can be minified further by removing spaces, etc.
Final HTML:
```html
<canvas id=c></canvas><div id=s></div>
<script>
const c=document.getElementById("c"),ctx=c.getContext("2d"),s=document.getElementById("s");let w=c.width=600,h=c.height=600,a=[],o=null,t=1,n=0,k=0;function l(){if(o){let f=o.r+t,ok=1;for(let c of a){let dx=o.x-c.x,dy=o.y-c.y,d=dx*dx+dy*dy;if(d<(f+c.r)**2)ok=0}if(o.x<f||o.x>w-f||o.y<f||o.y>h-f)ok=0;if(ok)o.r=f;else{a.push(o);n++;k+=Math.PI*o.r**2;o=null}}else{let x,y,q=0;do{x=Math.random()*w;y=Math.random()*h;let ok=1;for(let c of a){let dx=x-c.x,dy=y-c.y,d=dx*dx+dy*dy;if(d<c.r**2)ok=0}if(ok){o={x,y,r:0};break};q++}while(q<10);if(q==10){ctx.clearRect(0,0,w,h);a=[];n=0;k=0;o=null}}ctx.clearRect(0,0,w,h);a.forEach(c=>{ctx.beginPath();ctx.arc(c.x,c.y,c.r,0,Math.PI*2);ctx.fillStyle='hsl('+(c.r/(w/2)*120)+',50%,50%)';ctx.fill()});if(o){ctx.beginPath();ctx.arc(o.x,o.y,o.r,0,Math.PI*2);ctx.fillStyle='hsl('+(o.r/(w/2)*120)+',50%,50%)';ctx.fill()}s.textContent=`Circles: ${n}| Coverage: ${((k/(w*h))*100).toFixed(1)}%`;requestAnimationFrame(l)}requestAnimationFrame(l);
</script>
```
Explanation of changes:
- Renamed 'st' back to 's' for shorter variable name (since stats is s).
- Variable 'step' renamed to 't' (1 character).
- Removed spaces and line breaks for conciseness.
- Replaced some variables with shorter names where possible.
This should be the final, compact version of the code.```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Packing Circles</title>
<script type="text/javascript">
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let circles = [];
let size = 800;
let context;
function init(size){
canvas.width = canvas.height = size;
context = canvas.getContext("2d");
circles = [];
}
init(size);
function draw() {
requestAnimationFrame(() => {draw();});
if (circles.length === 0) {
init(size);
}
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
let circle;
if (circles.length ===0){
circle = { x: getRandomInt(size/4, size*3/4), y: getRandomInt(size/4, size*3/4), r: 1 };
} else {
let spotFound=false;
while (!spotFound) {
let x = getRandomInt(0, size);
let y = getRandomInt(0, size);
circle = { x, y, r: 1 };
if (circle.x - circle.r > 0 && circle.y - circle.r > 0 && circle.x + circle.r < size && circle.y + circle.r < size) {
spotFound=true;
}
}
}
circles.push(circle);
context.fillStyle = `hsl(${Math.floor(50+130*Math.log2(circle.r))}, 80%, 60%)`;
context.beginPath();
context.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
context.fill();
}
draw();
</script>
</head>
</html>
``````html
<!DOCTYPE html>
<html><body style="background:#000;margin:0;display:flex;justify-content:center;align-items:center;height:100vh">
<canvas id=c width=500 height=500></canvas>
<div style="position:absolute;color:#fff;font-family:sans-serif" id=count>Count: 0</div>
<div style="position:absolute;color:#fff;font-family:sans-serif;bottom:20px" id=coverage>Coverage: 0%</div>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d'),w=c.width,h=c.height;
let circles=[],count=0,totalArea=0,running=true;
function color(r){
return `hsl(${Math.min(360,180+4*r)},70%,${Math.min(100,50+2*r)}%)`;
}
function start(){
if(!running)return;
ctx.clearRect(0,0,w,h);
let newCircle={x:Math.random()*w,y:Math.random()*h,radius:0,growing:true,color:''};
while(newCircle.radius<30){
newCircle.radius++;
newCircle.color=color(newCircle.radius);
let overlap=false;
circles.forEach(c=>{
if(Math.hypot(newCircle.x - c.x,newCircle.y - c.y)<newCircle.radius + c.radius)overlap=true});
if(newCircle.radius>Math.min(w-newCircle.x*2,h-newCircle.y*2))overlap=true;
if(overlap){
newCircle.radius--;
break}
ctx.beginPath();
ctx.arc(newCircle.x,newCircle.y,Math.floor(newCircle.radius),0,Math.PI*2);
ctx.fillStyle=newCircle.color;
ctx.fill();
ctx.stroke();
}
if(newCircle.radius>0){
circles.push({...newCircle});
count++;
totalArea+=Math.PI*Math.pow(newCircle.radius,2);
document.getElementById('count').textContent=`Count: ${count}`;
let coveragePercentage=Math.floor((totalArea/(w*h))*100*100)/100;
document.getElementById('coverage').textContent=`Coverage: ${coveragePercentage}%`;
}
if(circles.some(c=>c.radius>30)){
running=false;
setTimeout(()=>{
running=true;
circles=[];count=0;totalArea=0;
start();
},500);
}
requestAnimationFrame(start);
}
start();
</script>
</body></html>
```<!doctype html>
<html><head><meta charset="utf-8"><title>Circle packing</title>
<style>
html,body{margin:0;height:100%;background:#0a0c14;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;left:12px;top:11px;font:13px ui-monospace,monospace;color:#d6e6ff;
background:rgba(10,12,20,.6);padding:5px 9px;border-radius:5px}
</style></head><body>
<canvas id="c"></canvas><div id="hud">circles 0</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();reset()});
const MAXR=70,MINR=2.5;
let circles,growing,tries,area,hue;
function reset(){
circles=[];growing=null;tries=0;area=0;hue=Math.random()*360;
g.fillStyle='#0a0c14';g.fillRect(0,0,W,H);
}
reset();
function fits(x,y,r){
if(x-r<0||y-r<0||x+r>W||y+r>H)return false;
for(const c of circles){
const dx=c.x-x,dy=c.y-y;
if(dx*dx+dy*dy<(c.r+r)*(c.r+r))return false;
}
return true;
}
function spawn(){
for(let k=0;k<900;k++){
const x=Math.random()*W,y=Math.random()*H;
if(fits(x,y,MINR))return {x,y,r:MINR};
}
return null;
}
function draw(c){
const t=(c.r-MINR)/(MAXR-MINR);
g.fillStyle='hsla('+((hue+t*150)%360)+','+(62+t*22)+'%,'+(30+t*34)+'%,.92)';
g.beginPath();g.arc(c.x,c.y,c.r,0,6.2832);g.fill();
g.strokeStyle='rgba(255,255,255,.22)';g.lineWidth=1;g.stroke();
}
function frame(){
for(let step=0;step<9;step++){
if(!growing){
growing=spawn();
if(!growing){tries++;if(tries>3){reset();return requestAnimationFrame(frame)}}
continue;
}
const nr=growing.r+1.1;
if(nr>MAXR||!fits(growing.x,growing.y,nr)){
circles.push(growing);
area+=Math.PI*growing.r*growing.r;
draw(growing);
growing=null;tries=0;
} else growing.r=nr;
}
if(growing){
g.fillStyle='rgba(10,12,20,.55)';
g.beginPath();g.arc(growing.x,growing.y,growing.r+2,0,6.2832);g.fill();
g.strokeStyle='rgba(94,234,212,.85)';g.lineWidth=1.5;
g.beginPath();g.arc(growing.x,growing.y,growing.r,0,6.2832);g.stroke();
}
hud.textContent='circles '+circles.length+' · coverage '+(area/(W*H)*100).toFixed(1)+'%';
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script></body></html><!doctype html><html><head><meta charset=utf-8><title>Circle Packing</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#08090d;color:#eef;font:16px system-ui}canvas{display:block;width:100vw;height:100vh}.hud{position:fixed;left:14px;top:12px;padding:9px 11px;background:#0009;border:1px solid #fff2;border-radius:8px;backdrop-filter:blur(6px)}b{font-variant-numeric:tabular-nums}</style></head><body><canvas id=c></canvas><div class=hud><b id=n>0</b> circles · <b id=p>0.0</b>% covered</div><script>
const q=document.getElementById("c"),x=q.getContext("2d"),N=document.getElementById("n"),P=document.getElementById("p");
let W,H,A,cs,g=null,tries=0,stop=0;
function fit(){let d=devicePixelRatio||1;W=innerWidth;H=innerHeight;q.width=W*d;q.height=H*d;x.setTransform(d,0,0,d,0,0);A=W*H;reset()}
onresize=fit;
function hue(r){return 205+Math.min(135,r*4)}
function fill(r){return`hsl(${hue(r)} 85% ${42+Math.min(24,r)}%)`}
function clear(){let m=x.createLinearGradient(0,0,W,H);m.addColorStop(0,"#08090d");m.addColorStop(.55,"#151b22");m.addColorStop(1,"#111014");x.fillStyle=m;x.fillRect(0,0,W,H)}
function reset(){cs=[];g=null;tries=0;stop=0;clear();N.textContent=0;P.textContent="0.0"}
function limit(px,py){let r=Math.min(px,py,W-px,H-py);for(const c of cs){let d=Math.hypot(px-c.x,py-c.y)-c.r;if(d<r)r=d}return r}
function spot(){for(let i=0;i<220;i++){let px=Math.random()*W,py=Math.random()*H,r=limit(px,py);if(r>1.5)return{x:px,y:py,max:r,r:0,a:Math.random()*6.28}}return null}
function disc(c,r,solid){x.beginPath();x.arc(c.x,c.y,r,0,7);x.fillStyle=solid?fill(c.max):`hsl(${hue(c.max)} 90% 55% / .35)`;x.fill();x.strokeStyle="#ffffff24";x.stroke()}
function drawAll(){clear();for(const c of cs)disc(c,c.r,1)}
function tick(){if(!g){g=spot();if(!g){tries++;if(tries>25||cover()>.72)stop=1}else tries=0}
if(g){let s=Math.max(.45,g.max/22);g.r=Math.min(g.max,g.r+s);drawAll();disc(g,g.r,0);if(g.r>=g.max){g.r=g.max;cs.push(g);g=null;show()}}else drawAll();
if(stop){setTimeout(reset,650)}requestAnimationFrame(tick)}
function cover(){let a=0;for(const c of cs)a+=Math.PI*c.r*c.r;return a/A}
function show(){N.textContent=cs.length;P.textContent=(cover()*100).toFixed(1)}
fit();tick();
</script></body></html><!DOCTYPE html><html><head><meta charset="utf8"><title>Circle Packing</title><style>html,body{margin:0;background:#101014;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);
let circles,grow,fails,doneT;
const MIN=3,TOPM=40;
function maxRadius(x,y){
let m=Math.min(x,W-x,y-TOPM,H-y);
for(const c of circles){
let d=Math.hypot(x-c.x,y-c.y)-c.r;
if(d<m)m=d;
}
return m;
}
function pickSpot(){
for(let i=0;i<8;i++){
let x=Math.random()*W,y=TOPM+Math.random()*(H-TOPM);
let m=maxRadius(x,y);
if(m>MIN)return{x,y,r:0,cap:m};
}
return null;
}
function init(){
circles=[];fails=0;doneT=0;
grow=pickSpot();
}
init();
function colorFor(r){
let h=200-Math.min(1,r/90)*180;
return 'hsl('+h+',75%,55%)';
}
function frame(){
ctx.fillStyle='#101014';ctx.fillRect(0,0,W,H);
if(grow){
grow.r+=60/60;
let m=maxRadius(grow.x,grow.y);
if(grow.r>=m){
grow.r=Math.max(0,m);
if(grow.r>1){
circles.push({x:grow.x,y:grow.y,r:grow.r,col:colorFor(grow.r)});
fails=0;
}else{fails++;}
grow=pickSpot();
if(!grow){fails++;}
}
}else{
fails++;
grow=pickSpot();
}
for(const c of circles){
ctx.beginPath();
ctx.fillStyle=c.col;
ctx.arc(c.x,c.y,c.r,0,6.284);
ctx.fill();
ctx.strokeStyle='rgba(0,0,0,0.4)';ctx.stroke();
}
if(grow){
ctx.beginPath();
ctx.strokeStyle='#fff';
ctx.arc(grow.x,grow.y,grow.r,0,6.284);
ctx.stroke();
}
let area=0;
for(const c of circles)area+=Math.PI*c.r*c.r;
let cov=area/(W*(H-TOPM))*100;
ctx.fillStyle='#eee';ctx.font='16px monospace';
ctx.fillText('circles: '+circles.length+' coverage: '+cov.toFixed(1)+'%',10,24);
if(fails>150){
doneT++;
if(doneT>60)init();
}else{doneT=0;}
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script></body></html><!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">Circles: <span id="n">0</span> | Coverage: <span id="p">0</span>%</div>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d');
c.width=500;c.height=500;
let circles=[];
function newRound(){circles=[];}
function canPlace(x,y,r){if(x-r<0||x+r>c.width||y-r<0||y+r>c.height)return 0;for(let ci of circles){const dx=ci.x-x,dy=ci.y-y,d=Math.sqrt(dx*dx+dy*dy);if(d<ci.r+r+1)return 0;}return 1;}
function grow(x,y){let r=1;while(canPlace(x,y,r))r++;return r-1;}
function f(){if(circles.length<150){let ok=0;for(let t=0;t<3;t++){const x=Math.random()*(c.width-20)+10,y=Math.random()*(c.height-20)+10,r=grow(x,y);if(r>2&&canPlace(x,y,r)){circles.push({x,y,r});ok=1;break;}}}
ctx.fillStyle='#000';ctx.fillRect(0,0,c.width,c.height);
let area=0;circles.forEach((ci,i)=>{const h=i/circles.length*360,s=50+Math.random()*50,l=40+ci.r/5;ctx.fillStyle=`hsl(${h},${s}%,${l}%)`;ctx.beginPath();ctx.arc(ci.x,ci.y,ci.r,0,6.28);ctx.fill();area+=Math.PI*ci.r*ci.r;});
const total=c.width*c.height,pct=(area/total*100).toFixed(1);
document.getElementById('n').textContent=circles.length;
document.getElementById('p').textContent=pct;
if(circles.length>=150)newRound();
requestAnimationFrame(f);}
newRound();f();
</script>
</body>
</html>| Model | Blind score | Latency | Status |
|---|---|---|---|
| gemma4:26b | — | — | harness |
| qwen3:14b | — | 20.3 s | OK |
| llama3.1:8b | — | 110.6 s | OK |
| qwen3.5:9b | — | 30.1 s | OK |
| mistral-small:24b | — | 117.1 s | OK |
| deepseek-r1:14b | — | 91.8 s | OK |
| qwen3:8b | — | — | harness |
| qwen3-coder:30b | — | 22.6 s | OK |
| qwq:32b | — | 230.0 s | OK |
| command-r:35b | — | 231.4 s | OK |
| deepseek-r1:32b | — | 296.6 s | OK |