25:["$","title",null,{"children":"Hourglass | Vasco Asturiano | Observable"}] 4c:T1488,const hourglass = (() => { const W = 300, H = 600, S = 680, cx = W / 2, cy = H / 2, top = 20, bot = H - 20; const maxHalf = 140, neckHalf = 4, r = 3, n = 3500, G = 0.4; const maxSpeed = 7, wallFriction = 0.15; const slope = (maxHalf - neckHalf) / (cy - top); // wall slope dx/dy let theta = 0, animating = false; // rotation of the glass on screen const halfWidth = (y) => { const t = Math.min(1, Math.abs(y - cy) / (cy - top)); return neckHalf + (maxHalf - neckHalf) * t; }; // Spawn grains uniformly (by area) inside the top bulb; rejection sampling const nodes = Array.from({length: n}, () => { const y0 = top + 6, y1 = cy - 25; while (true) { const y = y0 + Math.random() * (y1 - y0); const hw = halfWidth(y) - r; const x = cx + (Math.random() * 2 - 1) * maxHalf; if (Math.abs(x - cx) <= hw) return {x, y, r}; } }); // Push a grain out of a wall along the wall's normal. No bounce (inelastic), plus a little // friction along the wall so grains resting against it don't jitter or creep. function collideWall(d, nx, ny, penetration) { d.x -= nx * penetration; d.y -= ny * penetration; const vn = d.vx * nx + d.vy * ny; if (vn > 0) { d.vx -= vn * nx; d.vy -= vn * ny; } const tx = -ny, ty = nx; const vt = d.vx * tx + d.vy * ty; d.vx -= wallFriction * vt * tx; d.vy -= wallFriction * vt * ty; } function contain() { for (let pass = 0; pass < 2; ++pass) { // 2 passes resolve corners (wall + floor) for (const d of nodes) { // Walls are straight lines; k is dhw/dy (negative in the top bulb, positive in the bottom) const k = d.y < cy ? -slope : slope; const m = Math.hypot(1, k); const hw = halfWidth(d.y) - r; const dx = d.x - cx; if (dx > hw) collideWall(d, 1 / m, -k / m, (dx - hw) / m); else if (dx < -hw) collideWall(d, -1 / m, -k / m, (-hw - dx) / m); if (d.y < top + r) collideWall(d, 0, -1, top + r - d.y); else if (d.y > bot - r) collideWall(d, 0, 1, d.y - (bot - r)); } } } // Last force before integration: cap speed so overlap-resolution kicks can't launch grains const limitSpeed = () => { for (const d of nodes) { const s = Math.hypot(d.vx, d.vy); if (s > maxSpeed) { d.vx *= maxSpeed / s; d.vy *= maxSpeed / s; } } }; // Screen-down gravity expressed in the rotated glass frame const gravityForce = () => { const gx = G * Math.sin(theta), gy = G * Math.cos(theta); for (const d of nodes) { d.vx += gx; d.vy += gy; } }; const sim = d3.forceSimulation(nodes) .alphaDecay(0).alpha(1) .velocityDecay(0.08) .force("gravity", gravityForce) .force("collide", d3.forceCollide(r + 0.1).strength(0.5).iterations(2)) .force("contain", contain) .force("limit", limitSpeed); const dpr = window.devicePixelRatio || 1; // Negative bottom margin pulls the button up into the canvas's empty padding const canvas = html`