Balls in a Circle

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_180":181,"_182":183},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",61,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","sim.js","latestPath","fileId","962d4e18-a975-11f1-a4db-1607ee4eb77e","name","fileType","script","content","const canvas = document.getElementById(\"c\");\nconst ctx = canvas.getContext(\"2d\");\nconst countEl = document.getElementById(\"count\");\nconst gravityBtn = document.getElementById(\"gravity\");\nconst resetBtn = document.getElementById(\"reset\");\n\nconst TAU = Math.PI * 2;\n\nconst REF_VIEW = 600; // view size the reference numbers describe\nconst REF_BALL_R = 5.5; // ball radius, px, at the reference size\nconst MIN_BALL_R = 3; // floor, for very small windows\nconst SPAWN_GAP_RATIO = 7 / 5.5; // required space around a new ball, in radii\nconst CELL_RATIO = 2.5; // broad-phase cell size, in radii\nconst REF_SPEED = 175; // px/sec launch speed at the reference size\nconst PLACE_TRIES = 400; // rejection-sampling attempts per spawn\nconst QUICK_TRIES = 12; // attempts once we already believe it's packed\nconst HOPELESS_AFTER = 64; // abandon a sweep that has found no room by here\nconst DIR_TRIES = 32; // launch directions considered per spawn\nconst STEP = 1 / 240; // fixed physics timestep, seconds\nconst MAX_STEPS = 6; // physics steps allowed per rendered frame\nconst REF_GRAVITY = 260; // px/sec^2 down at the reference size: arcs, not slams\nconst REF_MAX_SPEED = 1500; // safety clamp so nothing can tunnel the wall\nconst REF_BURST = 240; // outward kick, px/sec, at the moment of break-out\nconst CROWD_LIMIT = 4; // consecutive no-room spawns that mean \"packed\"\n\n// Hue advances in fixed steps, so there are only 360 possible fill styles.\n// Building them once means draw never allocates a string.\nconst COLORS = Array.from({ length: 360 }, (unused, h) => `hsl(${h} 92% 62%)`);\n\n// Everything below is in px or px/sec, so all of it is recomputed against the\n// current view size on every resize.\nlet scale = 1;\nlet ballR = REF_BALL_R;\nlet spawnGap = REF_BALL_R * SPAWN_GAP_RATIO;\nlet cell = REF_BALL_R * CELL_RATIO;\nlet speed = REF_SPEED;\nlet gravity = REF_GRAVITY;\nlet maxSpeed = REF_MAX_SPEED;\nlet burst = REF_BURST;\n\nlet gravityOn = true;\nlet brokenOut = false;\nlet crowded = 0;\nlet hue = 200;\nlet centerX = 0;\nlet centerY = 0;\nlet radius = 0;\nlet viewSize = 0;\n\n// ---- ball storage ---------------------------------------------------\n\n// Struct of arrays rather than an array of objects: one contiguous buffer per\n// field, indices instead of references. No per-ball allocation, and the hot\n// loops walk memory in order.\nlet capacity = 0;\nlet count = 0;\nlet xs = null;\nlet ys = null;\nlet vxs = null;\nlet vys = null;\nlet rs = null;\nlet hues = null;\nlet next = null; // broad-phase chain, rebuilt every step\n\nconst ensureCapacity = (needed) => {\n if (needed <= capacity) return;\n let size = capacity || 256;\n while (size < needed) size *= 2;\n\n const grown = (src) => {\n const out = new Float32Array(size);\n if (src) out.set(src);\n return out;\n };\n xs = grown(xs);\n ys = grown(ys);\n vxs = grown(vxs);\n vys = grown(vys);\n rs = grown(rs);\n\n const nextHues = new Uint16Array(size);\n if (hues) nextHues.set(hues);\n hues = nextHues;\n\n const nextChain = new Int32Array(size);\n if (next) nextChain.set(next); // the grid stays live across a spawn burst\n next = nextChain;\n capacity = size;\n};\n\nconst addBall = (x, y, angle) => {\n ensureCapacity(count + 1);\n hue = (hue + 71) % 360;\n xs[count] = x;\n ys[count] = y;\n vxs[count] = Math.cos(angle) * speed;\n vys[count] = Math.sin(angle) * speed;\n rs[count] = ballR;\n hues[count] = hue;\n count++;\n gridInsert(count - 1); // keep the broad phase usable between rebuilds\n};\n\n// Order is meaningless here, so removal is a swap with the last live slot.\nconst removeAt = (i) => {\n count--;\n if (i === count) return;\n xs[i] = xs[count];\n ys[i] = ys[count];\n vxs[i] = vxs[count];\n vys[i] = vys[count];\n rs[i] = rs[count];\n hues[i] = hues[count];\n};\n\n// ---- setup ----------------------------------------------------------\n\nconst fit = () => {\n const size = Math.max(240, Math.min(window.innerWidth - 16, window.innerHeight - 90));\n const dpr = window.devicePixelRatio ?? 1;\n canvas.style.width = `${size}px`;\n canvas.style.height = `${size}px`;\n canvas.width = Math.round(size * dpr);\n canvas.height = Math.round(size * dpr);\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n viewSize = size;\n centerX = size / 2;\n centerY = size / 2;\n radius = size / 2 - 6;\n\n // Scale the whole simulation with the view. Lengths scale by the factor and\n // time is left alone, so velocities and accelerations take the same factor\n // and the motion looks identical at any size. It also fixes the saturation\n // count, which would otherwise grow with the area of the disc.\n const nextScale = size / REF_VIEW;\n const ratio = nextScale / scale;\n scale = nextScale;\n\n ballR = Math.max(MIN_BALL_R, REF_BALL_R * scale);\n spawnGap = ballR * SPAWN_GAP_RATIO;\n cell = ballR * CELL_RATIO;\n speed = REF_SPEED * scale;\n gravity = REF_GRAVITY * scale;\n maxSpeed = REF_MAX_SPEED * scale;\n burst = REF_BURST * scale;\n\n resizeGrid();\n // How far the clearance search has to look: far enough to see any ball that\n // could sit within the capped clearance, plus a cell of slack.\n querySpan = Math.ceil((spawnGap * 3 + 2 * ballR) / cell) + 1;\n\n // Balls already in flight keep their trajectories under the new scale.\n for (let i = 0; i < count; i++) {\n rs[i] = ballR;\n vxs[i] *= ratio;\n vys[i] *= ratio;\n }\n};\n\nconst reset = () => {\n brokenOut = false;\n crowded = 0;\n count = 0;\n addBall(centerX - radius * 0.45, centerY - radius * 0.1, 0.35);\n addBall(centerX + radius * 0.45, centerY + radius * 0.1, Math.PI * 1.18);\n};\n\n// ---- physics --------------------------------------------------------\n\n// Elastic bounce off the inside of the circle: reflect velocity about the\n// radial normal. |v| is unchanged, only the direction turns.\nconst wallBounce = (i) => {\n const dx = xs[i] - centerX;\n const dy = ys[i] - centerY;\n const d = Math.hypot(dx, dy);\n const lim = radius - rs[i];\n if (d <= lim || d === 0) return;\n\n const nx = dx / d;\n const ny = dy / d;\n xs[i] = centerX + nx * lim;\n ys[i] = centerY + ny * lim;\n\n const vn = vxs[i] * nx + vys[i] * ny;\n if (vn > 0) {\n vxs[i] -= 2 * vn * nx;\n vys[i] -= 2 * vn * ny;\n }\n};\n\n// After break-out the circle is inert. With gravity on, the bottom edge of\n// the view acts as a floor so the escapees have something to land on.\nconst floorBounce = (i) => {\n const lim = viewSize - rs[i];\n if (ys[i] < lim) return;\n ys[i] = lim;\n if (vys[i] > 0) vys[i] = -vys[i];\n};\n\n// The disc is packed: switch the wall off and give everything an outward\n// kick, so the pile bursts rather than oozes.\nconst breakOut = () => {\n brokenOut = true;\n for (let i = 0; i < count; i++) {\n let dx = xs[i] - centerX;\n let dy = ys[i] - centerY;\n let d = Math.hypot(dx, dy);\n if (d < 1e-6) {\n const angle = Math.random() * TAU;\n dx = Math.cos(angle);\n dy = Math.sin(angle);\n d = 1;\n }\n vxs[i] += (dx / d) * burst;\n vys[i] += (dy / d) * burst;\n }\n};\n\n// Equal-mass elastic collision: the two balls swap the components of their\n// velocities along the line of centres; tangential components are untouched.\nconst pairCollide = (i, j) => {\n let dx = xs[j] - xs[i];\n let dy = ys[j] - ys[i];\n let d = Math.hypot(dx, dy);\n const min = rs[i] + rs[j];\n if (d >= min) return false;\n if (d === 0) {\n dx = 1;\n dy = 0;\n d = 1e-6;\n }\n\n const nx = dx / d;\n const ny = dy / d;\n const push = (min - d) / 2 + 0.01;\n xs[i] -= nx * push;\n ys[i] -= ny * push;\n xs[j] += nx * push;\n ys[j] += ny * push;\n\n const an = vxs[i] * nx + vys[i] * ny;\n const bn = vxs[j] * nx + vys[j] * ny;\n if (an - bn <= 0) return false; // already separating; not a real impact\n\n vxs[i] += (bn - an) * nx;\n vys[i] += (bn - an) * ny;\n vxs[j] += (an - bn) * nx;\n vys[j] += (an - bn) * ny;\n return true;\n};\n\n// Broad phase: bucket the balls into a uniform grid so each one only tests\n// its own cell and the eight around it, instead of every other ball. Cells\n// are wider than a contact distance, so a 3x3 neighbourhood cannot miss a\n// pair. The j > i test keeps each pair from being resolved twice.\n//\n// The grid is a flat Int32Array of cell heads with `next` chaining the rest —\n// a linked list threaded through typed arrays. Cell size scales with the ball\n// radius, so the cell count stays near constant at any view size. Cells are\n// indexed, not hashed, which matters because the placement search below does\n// tens of lookups per candidate point.\nconst GRID_PAD = 4; // cells of margin, for balls outside the view\nlet gridW = 0;\nlet gridH = 0;\nlet heads = null;\nlet querySpan = 3; // cells the clearance search reaches, set in fit\n\nconst resizeGrid = () => {\n gridW = Math.ceil(viewSize / cell) + GRID_PAD * 2;\n gridH = gridW;\n heads = new Int32Array(gridW * gridH);\n heads.fill(-1);\n};\n\n// Escaped balls get clamped into the edge cells. That costs a few redundant\n// pair tests out there and never misses a real one.\nconst gridCol = (x) => {\n const c = Math.floor(x / cell) + GRID_PAD;\n return c < 0 ? 0 : c >= gridW ? gridW - 1 : c;\n};\n\nconst gridRow = (y) => {\n const c = Math.floor(y / cell) + GRID_PAD;\n return c < 0 ? 0 : c >= gridH ? gridH - 1 : c;\n};\n\nconst gridInsert = (i) => {\n if (!heads) return;\n const c = gridRow(ys[i]) * gridW + gridCol(xs[i]);\n next[i] = heads[c];\n heads[c] = i;\n};\n\nconst buildGrid = () => {\n heads.fill(-1);\n for (let i = 0; i < count; i++) {\n const c = gridRow(ys[i]) * gridW + gridCol(xs[i]);\n next[i] = heads[c];\n heads[c] = i;\n }\n};\n\nconst collideAll = () => {\n buildGrid();\n\n let impacts = 0;\n for (let i = 0; i < count; i++) {\n const cx = gridCol(xs[i]);\n const cy = gridRow(ys[i]);\n for (let ox = -1; ox <= 1; ox++) {\n const gx = cx + ox;\n if (gx < 0 || gx >= gridW) continue;\n for (let oy = -1; oy <= 1; oy++) {\n const gy = cy + oy;\n if (gy < 0 || gy >= gridH) continue;\n let j = heads[gy * gridW + gx];\n while (j !== -1) {\n if (j > i && pairCollide(i, j)) impacts++;\n j = next[j];\n }\n }\n }\n }\n return impacts;\n};\n\nconst isOffScreen = (i) =>\n xs[i] + rs[i] < 0 || xs[i] - rs[i] > viewSize ||\n ys[i] + rs[i] < 0 || ys[i] - rs[i] > viewSize;\n\nconst step = (dt) => {\n for (let i = 0; i < count; i++) {\n // Semi-implicit Euler: accelerate, then move. Gravity bends the path\n // between impacts; a wall bounce is still a pure direction change.\n if (gravityOn) vys[i] += gravity * dt;\n const mag = Math.hypot(vxs[i], vys[i]);\n if (mag > maxSpeed) {\n vxs[i] *= maxSpeed / mag;\n vys[i] *= maxSpeed / mag;\n }\n xs[i] += vxs[i] * dt;\n ys[i] += vys[i] * dt;\n }\n\n for (let i = 0; i < count; i++) {\n if (!brokenOut) wallBounce(i);\n else if (gravityOn) floorBounce(i);\n }\n\n const impacts = collideAll();\n\n if (!brokenOut) {\n // Collision resolution nudged positions, so rebuild before the placement\n // searches read the grid. New balls insert themselves as they arrive.\n if (impacts > 0) buildGrid();\n for (let i = 0; i < impacts; i++) spawnBall();\n } else {\n // Escaped balls stop breeding, and are dropped once fully out of view.\n // Walking backwards means a swapped-in ball has already been checked.\n for (let i = count - 1; i >= 0; i--) {\n if (isOffScreen(i)) removeAt(i);\n }\n }\n};\n\n// ---- spawning -------------------------------------------------------\n\n// Smallest positive time until a ball at (x,y) moving (vx,vy) would touch\n// any existing ball. Gravity pulls on every ball equally, so it cancels out\n// of the relative motion and this straight-line solve stays exact.\nconst timeToFirstContact = (x, y, vx, vy, r) => {\n let soonest = Infinity;\n for (let i = 0; i < count; i++) {\n const px = xs[i] - x; // relative position\n const py = ys[i] - y;\n const rvx = vxs[i] - vx; // relative velocity\n const rvy = vys[i] - vy;\n const sum = rs[i] + r;\n\n const a = rvx * rvx + rvy * rvy;\n if (a < 1e-9) continue;\n const b = 2 * (px * rvx + py * rvy);\n const c = px * px + py * py - sum * sum;\n const disc = b * b - 4 * a * c;\n if (disc < 0) continue;\n\n const root = Math.sqrt(disc);\n const t1 = (-b - root) / (2 * a);\n const t2 = (-b + root) / (2 * a);\n const t = t1 > 0 ? t1 : t2 > 0 ? t2 : Infinity;\n if (t < soonest) soonest = t;\n }\n return soonest;\n};\n\nconst spawnBall = () => {\n const r = ballR;\n const maxRad = Math.max(0, radius - r - spawnGap);\n\n // 1. Find the emptiest spot we can: sample points inside the disc and keep\n // the one whose clearance to every ball and to the wall is largest.\n // Once a sweep has come back with no room anywhere, the next few are\n // near-certain to agree, so they get a token sweep instead of a full one.\n const tries = crowded === 0 ? PLACE_TRIES : QUICK_TRIES;\n let bestX = centerX;\n let bestY = centerY;\n let bestClear = -Infinity;\n\n for (let k = 0; k < tries; k++) {\n const angle = Math.random() * TAU;\n const dist = Math.sqrt(Math.random()) * maxRad; // uniform over the disc\n const x = centerX + Math.cos(angle) * dist;\n const y = centerY + Math.sin(angle) * dist;\n\n let clear = radius - r - Math.hypot(x - centerX, y - centerY);\n for (let i = 0; i < count; i++) {\n if (clear <= bestClear) break; // already worse than best\n const gap = Math.hypot(x - xs[i], y - ys[i]) - (r + rs[i]);\n if (gap < clear) clear = gap;\n }\n if (clear > bestClear) {\n bestClear = clear;\n bestX = x;\n bestY = y;\n }\n if (bestClear > spawnGap * 3) break; // comfortably clear\n if (k >= HOPELESS_AFTER && bestClear < 0) break; // packed; stop paying\n }\n\n // 2. Pick the launch direction that keeps it clear the longest. With no\n // clearance there is nothing to aim for, so take a random heading rather\n // than pay DIR_TRIES scans to be told every direction hits immediately.\n const jitter = Math.random() * TAU;\n let bestDir = jitter;\n if (bestClear >= 0) {\n let bestTime = -1;\n for (let m = 0; m < DIR_TRIES; m++) {\n const angle = jitter + (m / DIR_TRIES) * TAU;\n const t = timeToFirstContact(\n bestX, bestY,\n Math.cos(angle) * speed, Math.sin(angle) * speed,\n r,\n );\n if (t > bestTime) {\n bestTime = t;\n bestDir = angle;\n }\n }\n }\n\n addBall(bestX, bestY, bestDir);\n\n // Zero clearance anywhere, several spawns running: the disc is full.\n crowded = bestClear < 0 ? crowded + 1 : 0;\n if (crowded >= CROWD_LIMIT) breakOut();\n};\n\n// ---- render ---------------------------------------------------------\n\nconst draw = () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n ctx.beginPath();\n ctx.arc(centerX, centerY, radius, 0, TAU);\n ctx.strokeStyle = brokenOut ? \"#1c2438\" : \"#3d4a6b\";\n ctx.lineWidth = 2;\n ctx.stroke();\n\n for (let i = 0; i < count; i++) {\n ctx.beginPath();\n ctx.arc(xs[i], ys[i], rs[i], 0, TAU);\n ctx.fillStyle = COLORS[hues[i]];\n ctx.fill();\n }\n\n countEl.textContent = count;\n};\n\n// ---- loop -----------------------------------------------------------\n\nlet last = performance.now();\nlet acc = 0;\n\nconst frame = (now) => {\n const dt = Math.min((now - last) / 1000, 0.2); // don't explode after a background tab\n last = now;\n acc += dt;\n\n // Bound the catch-up. If a frame is too expensive to simulate in real time,\n // run a few steps and drop the backlog rather than piling up more work each\n // frame, which is what turns a slow frame into a visible stall.\n let steps = 0;\n while (acc >= STEP && steps < MAX_STEPS) {\n step(STEP);\n acc -= STEP;\n steps++;\n }\n if (acc > STEP * MAX_STEPS) acc = 0;\n\n draw();\n requestAnimationFrame(frame);\n};\n\n// ---- input ----------------------------------------------------------\n\n// Click or tap inside the circle to add a ball. The spot is chosen by the\n// usual search, not taken from the pointer, so a hand-placed ball lands\n// somewhere roomy like any other.\ncanvas.addEventListener(\"pointerdown\", ({ clientX, clientY }) => {\n if (brokenOut) return;\n const rect = canvas.getBoundingClientRect();\n const x = clientX - rect.left;\n const y = clientY - rect.top;\n if (Math.hypot(x - centerX, y - centerY) > radius) return;\n spawnBall();\n});\n\nwindow.addEventListener(\"resize\", fit);\nresetBtn.addEventListener(\"click\", reset);\ngravityBtn.addEventListener(\"click\", () => {\n gravityOn = !gravityOn;\n gravityBtn.textContent = `Gravity: ${gravityOn ? \"on\" : \"off\"}`;\n});\n\nfit();\nreset();\nrequestAnimationFrame(frame);\n","const canvas = document.getElementById(\"c\");\nconst ctx = canvas.getContext(\"2d\");\nconst countEl = document.getElementById(\"count\");\nconst gravityBtn = document.getElementById(\"gravity\");\nconst resetBtn = document.getElementById(\"reset\");\n\nconst TAU = Math.PI * 2;\n\nconst REF_VIEW = 600; // view size the reference numbers describe\nconst REF_BALL_R = 5.5; // ball radius, px, at the reference size\nconst MIN_BALL_R = 3; // floor, for very small windows\nconst SPAWN_GAP_RATIO = 7 / 5.5; // required space around a new ball, in radii\nconst CELL_RATIO = 2.5; // broad-phase cell size, in radii\nconst REF_SPEED = 175; // px/sec launch speed at the reference size\nconst PLACE_TRIES = 400; // rejection-sampling attempts per spawn\nconst QUICK_TRIES = 12; // attempts once we already believe it's packed\nconst HOPELESS_AFTER = 64; // abandon a sweep that has found no room by here\nconst DIR_TRIES = 32; // launch directions considered per spawn\nconst STEP = 1 / 240; // fixed physics timestep, seconds\nconst MAX_STEPS = 6; // physics steps allowed per rendered frame\nconst REF_GRAVITY = 260; // px/sec^2 down at the reference size: arcs, not slams\nconst REF_MAX_SPEED = 1500; // safety clamp so nothing can tunnel the wall\nconst REF_BURST = 240; // outward kick, px/sec, at the moment of break-out\nconst CROWD_LIMIT = 4; // consecutive no-room spawns that mean \"packed\"\n\n// Hue advances in fixed steps, so there are only 360 possible fill styles.\n// Building them once means draw never allocates a string.\nconst COLORS = Array.from({ length: 360 }, (unused, h) => `hsl(${h} 92% 62%)`);\n\n// Everything below is in px or px/sec, so all of it is recomputed against the\n// current view size on every resize.\nlet scale = 1;\nlet ballR = REF_BALL_R;\nlet spawnGap = REF_BALL_R * SPAWN_GAP_RATIO;\nlet cell = REF_BALL_R * CELL_RATIO;\nlet speed = REF_SPEED;\nlet gravity = REF_GRAVITY;\nlet maxSpeed = REF_MAX_SPEED;\nlet burst = REF_BURST;\n\nlet gravityOn = true;\nlet brokenOut = false;\nlet crowded = 0;\nlet hue = 200;\nlet centerX = 0;\nlet centerY = 0;\nlet radius = 0;\nlet viewSize = 0;\n\n// ---- ball storage ---------------------------------------------------\n\n// Struct of arrays rather than an array of objects: one contiguous buffer per\n// field, indices instead of references. No per-ball allocation, and the hot\n// loops walk memory in order.\nlet capacity = 0;\nlet count = 0;\nlet xs = null;\nlet ys = null;\nlet vxs = null;\nlet vys = null;\nlet rs = null;\nlet hues = null;\nlet next = null; // broad-phase chain, rebuilt every step\n\nconst ensureCapacity = (needed) => {\n if (needed <= capacity) return;\n let size = capacity || 256;\n while (size < needed) size *= 2;\n\n const grown = (src) => {\n const out = new Float32Array(size);\n if (src) out.set(src);\n return out;\n };\n xs = grown(xs);\n ys = grown(ys);\n vxs = grown(vxs);\n vys = grown(vys);\n rs = grown(rs);\n\n const nextHues = new Uint16Array(size);\n if (hues) nextHues.set(hues);\n hues = nextHues;\n\n const nextChain = new Int32Array(size);\n if (next) nextChain.set(next); // the grid stays live across a spawn burst\n next = nextChain;\n capacity = size;\n};\n\nconst addBall = (x, y, angle) => {\n ensureCapacity(count + 1);\n hue = (hue + 71) % 360;\n xs[count] = x;\n ys[count] = y;\n vxs[count] = Math.cos(angle) * speed;\n vys[count] = Math.sin(angle) * speed;\n rs[count] = ballR;\n hues[count] = hue;\n count++;\n gridInsert(count - 1); // keep the broad phase usable between rebuilds\n};\n\n// Order is meaningless here, so removal is a swap with the last live slot.\nconst removeAt = (i) => {\n count--;\n if (i === count) return;\n xs[i] = xs[count];\n ys[i] = ys[count];\n vxs[i] = vxs[count];\n vys[i] = vys[count];\n rs[i] = rs[count];\n hues[i] = hues[count];\n};\n\n// ---- setup ----------------------------------------------------------\n\nconst fit = () => {\n const size = Math.max(240, Math.min(window.innerWidth - 16, window.innerHeight - 90));\n const dpr = window.devicePixelRatio ?? 1;\n canvas.style.width = `${size}px`;\n canvas.style.height = `${size}px`;\n canvas.width = Math.round(size * dpr);\n canvas.height = Math.round(size * dpr);\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n viewSize = size;\n centerX = size / 2;\n centerY = size / 2;\n radius = size / 2 - 6;\n\n // Scale the whole simulation with the view. Lengths scale by the factor and\n // time is left alone, so velocities and accelerations take the same factor\n // and the motion looks identical at any size. It also fixes the saturation\n // count, which would otherwise grow with the area of the disc.\n const nextScale = size / REF_VIEW;\n const ratio = nextScale / scale;\n scale = nextScale;\n\n ballR = Math.max(MIN_BALL_R, REF_BALL_R * scale);\n spawnGap = ballR * SPAWN_GAP_RATIO;\n cell = ballR * CELL_RATIO;\n speed = REF_SPEED * scale;\n gravity = REF_GRAVITY * scale;\n maxSpeed = REF_MAX_SPEED * scale;\n burst = REF_BURST * scale;\n\n resizeGrid();\n // How far the clearance search has to look: far enough to see any ball that\n // could sit within the capped clearance, plus a cell of slack.\n querySpan = Math.ceil((spawnGap * 3 + 2 * ballR) / cell) + 1;\n\n // Balls already in flight keep their trajectories under the new scale.\n for (let i = 0; i < count; i++) {\n rs[i] = ballR;\n vxs[i] *= ratio;\n vys[i] *= ratio;\n }\n};\n\nconst reset = () => {\n brokenOut = false;\n crowded = 0;\n count = 0;\n addBall(centerX - radius * 0.45, centerY - radius * 0.1, 0.35);\n addBall(centerX + radius * 0.45, centerY + radius * 0.1, Math.PI * 1.18);\n};\n\n// ---- physics --------------------------------------------------------\n\n// Elastic bounce off the inside of the circle: reflect velocity about the\n// radial normal. |v| is unchanged, only the direction turns.\nconst wallBounce = (i) => {\n const dx = xs[i] - centerX;\n const dy = ys[i] - centerY;\n const d = Math.hypot(dx, dy);\n const lim = radius - rs[i];\n if (d <= lim || d === 0) return;\n\n const nx = dx / d;\n const ny = dy / d;\n xs[i] = centerX + nx * lim;\n ys[i] = centerY + ny * lim;\n\n const vn = vxs[i] * nx + vys[i] * ny;\n if (vn > 0) {\n vxs[i] -= 2 * vn * nx;\n vys[i] -= 2 * vn * ny;\n }\n};\n\n// After break-out the circle is inert. With gravity on, the bottom edge of\n// the view acts as a floor so the escapees have something to land on.\nconst floorBounce = (i) => {\n const lim = viewSize - rs[i];\n if (ys[i] < lim) return;\n ys[i] = lim;\n if (vys[i] > 0) vys[i] = -vys[i];\n};\n\n// The disc is packed: switch the wall off and give everything an outward\n// kick, so the pile bursts rather than oozes.\nconst breakOut = () => {\n brokenOut = true;\n for (let i = 0; i < count; i++) {\n let dx = xs[i] - centerX;\n let dy = ys[i] - centerY;\n let d = Math.hypot(dx, dy);\n if (d < 1e-6) {\n const angle = Math.random() * TAU;\n dx = Math.cos(angle);\n dy = Math.sin(angle);\n d = 1;\n }\n vxs[i] += (dx / d) * burst;\n vys[i] += (dy / d) * burst;\n }\n};\n\n// Equal-mass elastic collision: the two balls swap the components of their\n// velocities along the line of centres; tangential components are untouched.\nconst pairCollide = (i, j) => {\n let dx = xs[j] - xs[i];\n let dy = ys[j] - ys[i];\n let d = Math.hypot(dx, dy);\n const min = rs[i] + rs[j];\n if (d >= min) return false;\n if (d === 0) {\n dx = 1;\n dy = 0;\n d = 1e-6;\n }\n\n const nx = dx / d;\n const ny = dy / d;\n const push = (min - d) / 2 + 0.01;\n xs[i] -= nx * push;\n ys[i] -= ny * push;\n xs[j] += nx * push;\n ys[j] += ny * push;\n\n const an = vxs[i] * nx + vys[i] * ny;\n const bn = vxs[j] * nx + vys[j] * ny;\n if (an - bn <= 0) return false; // already separating; not a real impact\n\n vxs[i] += (bn - an) * nx;\n vys[i] += (bn - an) * ny;\n vxs[j] += (an - bn) * nx;\n vys[j] += (an - bn) * ny;\n return true;\n};\n\n// Broad phase: bucket the balls into a uniform grid so each one only tests\n// its own cell and the eight around it, instead of every other ball. Cells\n// are wider than a contact distance, so a 3x3 neighbourhood cannot miss a\n// pair. The j > i test keeps each pair from being resolved twice.\n//\n// The grid is a flat Int32Array of cell heads with `next` chaining the rest —\n// a linked list threaded through typed arrays. Cell size scales with the ball\n// radius, so the cell count stays near constant at any view size. Cells are\n// indexed, not hashed, which matters because the placement search below does\n// tens of lookups per candidate point.\nconst GRID_PAD = 4; // cells of margin, for balls outside the view\nlet gridW = 0;\nlet gridH = 0;\nlet heads = null;\nlet querySpan = 3; // cells the clearance search reaches, set in fit\n\nconst resizeGrid = () => {\n gridW = Math.ceil(viewSize / cell) + GRID_PAD * 2;\n gridH = gridW;\n heads = new Int32Array(gridW * gridH);\n heads.fill(-1);\n};\n\n// Escaped balls get clamped into the edge cells. That costs a few redundant\n// pair tests out there and never misses a real one.\nconst gridCol = (x) => {\n const c = Math.floor(x / cell) + GRID_PAD;\n return c < 0 ? 0 : c >= gridW ? gridW - 1 : c;\n};\n\nconst gridRow = (y) => {\n const c = Math.floor(y / cell) + GRID_PAD;\n return c < 0 ? 0 : c >= gridH ? gridH - 1 : c;\n};\n\nconst gridInsert = (i) => {\n if (!heads) return;\n const c = gridRow(ys[i]) * gridW + gridCol(xs[i]);\n next[i] = heads[c];\n heads[c] = i;\n};\n\nconst buildGrid = () => {\n heads.fill(-1);\n for (let i = 0; i < count; i++) {\n const c = gridRow(ys[i]) * gridW + gridCol(xs[i]);\n next[i] = heads[c];\n heads[c] = i;\n }\n};\n\nconst collideAll = () => {\n buildGrid();\n\n let impacts = 0;\n for (let i = 0; i < count; i++) {\n const cx = gridCol(xs[i]);\n const cy = gridRow(ys[i]);\n for (let ox = -1; ox <= 1; ox++) {\n const gx = cx + ox;\n if (gx < 0 || gx >= gridW) continue;\n for (let oy = -1; oy <= 1; oy++) {\n const gy = cy + oy;\n if (gy < 0 || gy >= gridH) continue;\n let j = heads[gy * gridW + gx];\n while (j !== -1) {\n if (j > i && pairCollide(i, j)) impacts++;\n j = next[j];\n }\n }\n }\n }\n return impacts;\n};\n\nconst isOffScreen = (i) =>\n xs[i] + rs[i] < 0 || xs[i] - rs[i] > viewSize ||\n ys[i] + rs[i] < 0 || ys[i] - rs[i] > viewSize;\n\nconst step = (dt) => {\n for (let i = 0; i < count; i++) {\n // Semi-implicit Euler: accelerate, then move. Gravity bends the path\n // between impacts; a wall bounce is still a pure direction change.\n if (gravityOn) vys[i] += gravity * dt;\n const mag = Math.hypot(vxs[i], vys[i]);\n if (mag > maxSpeed) {\n vxs[i] *= maxSpeed / mag;\n vys[i] *= maxSpeed / mag;\n }\n xs[i] += vxs[i] * dt;\n ys[i] += vys[i] * dt;\n }\n\n for (let i = 0; i < count; i++) {\n if (!brokenOut) wallBounce(i);\n else if (gravityOn) floorBounce(i);\n }\n\n const impacts = collideAll();\n\n if (!brokenOut) {\n // Collision resolution nudged positions, so rebuild before the placement\n // searches read the grid. New balls insert themselves as they arrive.\n if (impacts > 0) buildGrid();\n for (let i = 0; i < impacts; i++) spawnBall();\n } else {\n // Escaped balls stop breeding, and are dropped once fully out of view.\n // Walking backwards means a swapped-in ball has already been checked.\n for (let i = count - 1; i >= 0; i--) {\n if (isOffScreen(i)) removeAt(i);\n }\n }\n};\n\n// ---- spawning -------------------------------------------------------\n\n// Smallest positive time until a ball at (x,y) moving (vx,vy) would touch\n// any existing ball. Gravity pulls on every ball equally, so it cancels out\n// of the relative motion and this straight-line solve stays exact.\nconst timeToFirstContact = (x, y, vx, vy, r) => {\n let soonest = Infinity;\n for (let i = 0; i < count; i++) {\n const px = xs[i] - x; // relative position\n const py = ys[i] - y;\n const rvx = vxs[i] - vx; // relative velocity\n const rvy = vys[i] - vy;\n const sum = rs[i] + r;\n\n const a = rvx * rvx + rvy * rvy;\n if (a < 1e-9) continue;\n const b = 2 * (px * rvx + py * rvy);\n const c = px * px + py * py - sum * sum;\n const disc = b * b - 4 * a * c;\n if (disc < 0) continue;\n\n const root = Math.sqrt(disc);\n const t1 = (-b - root) / (2 * a);\n const t2 = (-b + root) / (2 * a);\n const t = t1 > 0 ? t1 : t2 > 0 ? t2 : Infinity;\n if (t < soonest) soonest = t;\n }\n return soonest;\n};\n\n// Clearance at a candidate point: distance to the nearest surface, negative\n// if the point overlaps something. Only nearby cells are consulted, so this\n// costs about the same whether there are ten balls or ten thousand.\n//\n// Two shortcuts keep it cheap. The result is capped, because a spot roomier\n// than the accept threshold needs no further measuring; and `floor` is the\n// best clearance found so far, so a candidate can be abandoned the moment it\n// is known to lose.\nconst clearanceAt = (x, y, r, floor) => {\n const cap = spawnGap * 3 + 1;\n let clear = radius - r - Math.hypot(x - centerX, y - centerY);\n if (clear > cap) clear = cap;\n if (clear <= floor) return clear;\n\n const cx = gridCol(x);\n const cy = gridRow(y);\n for (let ox = -querySpan; ox <= querySpan; ox++) {\n const gx = cx + ox;\n if (gx < 0 || gx >= gridW) continue;\n for (let oy = -querySpan; oy <= querySpan; oy++) {\n const gy = cy + oy;\n if (gy < 0 || gy >= gridH) continue;\n let j = heads[gy * gridW + gx];\n while (j !== -1) {\n const gap = Math.hypot(x - xs[j], y - ys[j]) - (r + rs[j]);\n if (gap < clear) {\n clear = gap;\n if (clear <= floor) return clear;\n }\n j = next[j];\n }\n }\n }\n return clear;\n};\n\nconst spawnBall = () => {\n const r = ballR;\n const maxRad = Math.max(0, radius - r - spawnGap);\n\n // 1. Find the emptiest spot we can: sample points inside the disc and keep\n // the one whose clearance to every ball and to the wall is largest.\n // Once a sweep has come back with no room anywhere, the next few are\n // near-certain to agree, so they get a token sweep instead of a full one.\n const tries = crowded === 0 ? PLACE_TRIES : QUICK_TRIES;\n let bestX = centerX;\n let bestY = centerY;\n let bestClear = -Infinity;\n\n for (let k = 0; k < tries; k++) {\n const angle = Math.random() * TAU;\n const dist = Math.sqrt(Math.random()) * maxRad; // uniform over the disc\n const x = centerX + Math.cos(angle) * dist;\n const y = centerY + Math.sin(angle) * dist;\n\n let clear = radius - r - Math.hypot(x - centerX, y - centerY);\n for (let i = 0; i < count; i++) {\n if (clear <= bestClear) break; // already worse than best\n const gap = Math.hypot(x - xs[i], y - ys[i]) - (r + rs[i]);\n if (gap < clear) clear = gap;\n }\n if (clear > bestClear) {\n bestClear = clear;\n bestX = x;\n bestY = y;\n }\n if (bestClear > spawnGap * 3) break; // comfortably clear\n if (k >= HOPELESS_AFTER && bestClear < 0) break; // packed; stop paying\n }\n\n // 2. Pick the launch direction that keeps it clear the longest. With no\n // clearance there is nothing to aim for, so take a random heading rather\n // than pay DIR_TRIES scans to be told every direction hits immediately.\n const jitter = Math.random() * TAU;\n let bestDir = jitter;\n if (bestClear >= 0) {\n let bestTime = -1;\n for (let m = 0; m < DIR_TRIES; m++) {\n const angle = jitter + (m / DIR_TRIES) * TAU;\n const t = timeToFirstContact(\n bestX, bestY,\n Math.cos(angle) * speed, Math.sin(angle) * speed,\n r,\n );\n if (t > bestTime) {\n bestTime = t;\n bestDir = angle;\n }\n }\n }\n\n addBall(bestX, bestY, bestDir);\n\n // Zero clearance anywhere, several spawns running: the disc is full.\n crowded = bestClear < 0 ? crowded + 1 : 0;\n if (crowded >= CROWD_LIMIT) breakOut();\n};\n\n// ---- render ---------------------------------------------------------\n\nconst draw = () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n ctx.beginPath();\n ctx.arc(centerX, centerY, radius, 0, TAU);\n ctx.strokeStyle = brokenOut ? \"#1c2438\" : \"#3d4a6b\";\n ctx.lineWidth = 2;\n ctx.stroke();\n\n for (let i = 0; i < count; i++) {\n ctx.beginPath();\n ctx.arc(xs[i], ys[i], rs[i], 0, TAU);\n ctx.fillStyle = COLORS[hues[i]];\n ctx.fill();\n }\n\n countEl.textContent = count;\n};\n\n// ---- loop -----------------------------------------------------------\n\nlet last = performance.now();\nlet acc = 0;\n\nconst frame = (now) => {\n const dt = Math.min((now - last) / 1000, 0.2); // don't explode after a background tab\n last = now;\n acc += dt;\n\n // Bound the catch-up. If a frame is too expensive to simulate in real time,\n // run a few steps and drop the backlog rather than piling up more work each\n // frame, which is what turns a slow frame into a visible stall.\n let steps = 0;\n while (acc >= STEP && steps < MAX_STEPS) {\n step(STEP);\n acc -= STEP;\n steps++;\n }\n if (acc > STEP * MAX_STEPS) acc = 0;\n\n draw();\n requestAnimationFrame(frame);\n};\n\n// ---- input ----------------------------------------------------------\n\n// Click or tap inside the circle to add a ball. The spot is chosen by the\n// usual search, not taken from the pointer, so a hand-placed ball lands\n// somewhere roomy like any other.\ncanvas.addEventListener(\"pointerdown\", ({ clientX, clientY }) => {\n if (brokenOut) return;\n const rect = canvas.getBoundingClientRect();\n const x = clientX - rect.left;\n const y = clientY - rect.top;\n if (Math.hypot(x - centerX, y - centerY) > radius) return;\n spawnBall();\n});\n\nwindow.addEventListener(\"resize\", fit);\nresetBtn.addEventListener(\"click\", reset);\ngravityBtn.addEventListener(\"click\", () => {\n gravityOn = !gravityOn;\n gravityBtn.textContent = `Gravity: ${gravityOn ? \"on\" : \"off\"}`;\n});\n\nfit();\nreset();\nrequestAnimationFrame(frame);\n","createdAt",["D",1788647861808],"branchVersion","branchId","829c7d11-4752-4dc9-b231-6228a44ae8c9","id","67eb7b8a-f123-4693-b128-99f4d21574cc","bouncing-balls-circle",["D",1788569603047],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","2 balls bouncing in a circle; collisions spawn new balls","imageUrl","7e2a7670-3af7-4da2-b7ff-bc616c08969d","pinnedFileId","32050158-a8c4-11f1-9a2d-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","efbed71c-69f2-45a6-9aeb-25d2155b8aad","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"isOwned",67,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","swanchaos","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJodmROZzhvZmNEMjR0cHpCeVVFeDk5UVBpVSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":176,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":177,"_81":178,"_83":179,"_85":25},"tree",[163,164,165],"files",[163,164,165],"counts",{"_152":63,"_153":154,"_155":63,"_156":157,"_158":159},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":145,"_32":146,"_30":147,"_131":-5,"_41":42,"_40":148,"_132":59,"_38":149,"_13":63,"_33":20,"_35":150,"_24":25,"_135":-5,"_27":151},{"_43":137,"_32":138,"_30":57,"_131":-5,"_41":42,"_40":139,"_132":59,"_38":140,"_13":141,"_33":142,"_35":143,"_24":25,"_135":-5,"_27":144},{"_43":130,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_132":25,"_38":133,"_13":134,"_33":34,"_35":37,"_24":25,"_135":-5,"_27":136},"724d9998-dd01-4388-8e22-2a4cd4fb8a22","parentId","latest",["D",1788647861808],7,"label",[28],"6d440a6f-42e1-489e-b982-7deb1ae8636a","main.tsx",54,["D",1788645819837],51,"http","// The runtime doesn't allow importing files as text, so the two static files\n// are fetched from this module's own origin and cached for the process.\nconst BASE = new URL(\".\", import.meta.url);\nconst cache = new Map();\n\nconst load = async (name: string): Promise => {\n const cached = cache.get(name);\n if (cached !== undefined) return cached;\n\n const res = await fetch(new URL(name, BASE));\n if (!res.ok) throw new Error(`could not load ${name}: ${res.status}`);\n\n const text = await res.text();\n cache.set(name, text);\n return text;\n};\n\n// Two routes: the page itself, and the simulation module it loads.\nexport default async (req: Request): Promise => {\n const { pathname } = new URL(req.url);\n\n if (pathname === \"/sim.js\") {\n return new Response(await load(\"sim.js\"), {\n headers: { \"content-type\": \"text/javascript; charset=utf-8\" },\n });\n }\n\n return new Response(await load(\"index.html\"), {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n};\n",[138],"410ad68f-22b0-4dd5-b50d-3c53ae812f85","index.html","99fb19d0-a975-11f1-81e2-1607ee4eb77e",52,["D",1788645798465],"\n\n\n\n\nBalls in a Circle\n\n\n\n

\n 2 balls\n \n \n

\n\n\n\n",[146],"pulls","branches",1,"forks","envVars",{"_160":63,"_162":63},"connections",{"_160":63,"_161":63},"count","unfilledCount","emptyCount",{"_43":145,"_32":146,"_30":147,"_131":-5,"_41":42,"_40":148,"_132":59,"_38":173,"_13":63,"_33":20,"_35":150,"_24":25,"_135":-5,"_167":174,"_27":175},{"_43":137,"_32":138,"_30":57,"_131":-5,"_41":42,"_40":139,"_132":59,"_38":170,"_13":141,"_33":142,"_35":143,"_24":25,"_135":-5,"_167":171,"_27":172},{"_43":130,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_132":25,"_38":166,"_13":134,"_33":34,"_35":37,"_24":25,"_135":-5,"_167":168,"_27":169},["D",1788647861808],"children",[],[28],["D",1788645819837],[],[138],["D",1788645798465],[],[146],["D",1788569603047],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_124":213,"_214":215,"_216":217,"_218":25,"_219":25,"_220":25,"_221":59,"_222":-5,"_223":-7,"_224":-7,"_225":63,"_226":25,"_227":25,"_228":-5,"_229":25,"_230":25,"_231":25,"_232":-5},"ENV",{"_184":185,"_186":187,"_188":87,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v61