/* The egg timer The egg timer of a cooking app. The egg is drawn cut in half, and while the time runs down it really cooks: the heat of the water is worked out as it moves in through the shell, the white and the yolk (the heat equation on the cut, round the long axis of the egg, with the conductivity and the heat capacity of white and of yolk), and every bit of egg takes the colour of the hottest it has been. So the white turns from see-through to milky to white from the shell inwards, and the yolk sets from its edge to the middle: a soft egg has a runny yolk, a jammy one a set ring round a glossy middle, a hard one is set through. Bubbles form on the shell and rise while the water boils, and the egg rocks a little. When the time is up the egg is lifted out of the water: it jumps, lands with a squash, and the yolk wobbles as much as it is still runny. */ /* ---- values to change ---- */ const EGGS = [['Soft', 330], ['Jammy', 420], ['Hard', 600]]; /* the ways to have the egg: the name and how many seconds in the water */ const CHOSEN = 1; /* the way chosen when the page opens: 0 is the first */ const DEMO = 20; /* to try it out, a whole egg cooks in this many seconds; 0 = in the real time */ const START = 4; /* the egg as it goes into the water, in degrees: 4 from the fridge, 20 from the counter */ const WATER = 100; /* the water, in degrees: 100 at a rolling boil */ const BUBBLES = 1; /* how hard the water boils round the egg: 0 = no bubbles */ const WOBBLE = 1; /* how much a runny yolk wobbles when the egg is lifted out: 0 = not at all */ (() => { const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const root = document.querySelector('[data-timer]'); const pan = root.querySelector('[data-pan]'); const canvas = root.querySelector('[data-canvas]'); const timeEl = root.querySelector('[data-time]'); const timeWords = root.querySelector('[data-time-words]'); const wordEl = root.querySelector('[data-word]'); const detailEl = root.querySelector('[data-detail]'); const kindsEl = root.querySelector('[data-kinds]'); const pill = root.querySelector('[data-pill]'); const pillCopy = root.querySelector('[data-pill-copy]'); const go = root.querySelector('[data-go]'); const goWords = root.querySelector('[data-go-words]'); const resetBtn = root.querySelector('[data-reset]'); const resetIcon = root.querySelector('[data-reset-icon]'); const readout = root.querySelector('[data-readout]'); const controls = root.querySelector('[data-controls]'); const live = root.querySelector('[data-live]'); const ctx = canvas.getContext('2d'); const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v)); const smooth = (a, b, v) => { const t = clamp((v - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); }; const kinds = (Array.isArray(EGGS) && EGGS.length ? EGGS : [['Egg', 420]]).map(([n, s]) => [String(n), clamp(Math.round(+s || 60), 5, 5999)]); let chosen = clamp(Math.round(+CHOSEN) || 0, 0, kinds.length - 1); const WATER_C = clamp(+WATER || 100, 20, 100); const START_C = clamp(+START, -20, WATER_C); /* ---------------------------------------------------------------- the egg, in millimetres */ /* a large egg: 57 long and 43 across, its widest part a little towards the blunt end (on the left); the yolk a ball of 29 across, a little towards the blunt end too */ const EL = 57; const EB = 43; const SKEW = 4; const YR = 14.5; const YZ = -1.5; const halfRaw = (z) => { const v = (EL * EL - 4 * z * z) / (EL * EL + 8 * SKEW * z + 4 * SKEW * SKEW); return v > 0 ? (EB / 2) * Math.sqrt(v) : 0; }; let widest = 0; for (let z = -EL / 2; z <= EL / 2; z += 0.05) widest = Math.max(widest, halfRaw(z)); const half = (z) => (halfRaw(z) * (EB / 2)) / widest; /* ---------------------------------------------------------------- the heat */ /* the cut is a half plane round the long axis: z along the egg, r out from the axis, in cells of 0.75 mm. Each cell is a ring; heat flows through its four faces in proportion to their area */ const H = 0.75; const NZ = Math.ceil(EL / H); const NR = Math.ceil(EB / 2 / H) + 1; const Z0 = -EL / 2; const N = NZ * NR; /* conductivity in W/(m K) and heat capacity in J/(m3 K); the conductivity is 30% above the books', so the egg cooks in the times of the recipes, which count on the heat that keeps going in after it comes out */ const BOOST = 1.3; const KW = 0.54 * BOOST; const CW = 3.83e6; const KY = 0.34 * BOOST; const CY = 3.19e6; const hm = H / 1000; const inside = new Uint8Array(N); const yolkCell = new Uint8Array(N); for (let j = 0; j < NZ; j++) { for (let i = 0; i < NR; i++) { const z = Z0 + (j + 0.5) * H; const r = (i + 0.5) * H; const n = j * NR + i; inside[n] = r < half(z) ? 1 : 0; yolkCell[n] = (z - YZ) ** 2 + r * r < YR * YR ? 1 : 0; } } const cells = []; for (let n = 0; n < N; n++) if (inside[n]) cells.push(n); const CELLS = Int32Array.from(cells); /* for each cell its four neighbours (-1 = the water) and what each face lets through in a second, already divided by the heat the cell holds */ const nb = new Int32Array(N * 4).fill(-1); const gk = new Float32Array(N * 4); const kOf = (n) => (yolkCell[n] ? KY : KW); const cOf = (n) => (yolkCell[n] ? CY : CW); let worst = 0; CELLS.forEach((n) => { const i = n % NR; const j = (n - i) / NR; const ri = i + 0.5; const hold = cOf(n) * hm * hm; const face = (m, area) => { const ok = m >= 0 && inside[m]; const k = ok ? (2 * kOf(n) * kOf(m)) / (kOf(n) + kOf(m)) : kOf(n); return { m: ok ? m : -1, g: (k * area) / hold }; }; const f = [ face(i + 1 < NR ? n + 1 : -1, (i + 1) / ri), i > 0 ? face(n - 1, i / ri) : { m: -2, g: 0 }, face(j + 1 < NZ ? n + NR : -1, 1), face(j > 0 ? n - NR : -1, 1), ]; let sum = 0; f.forEach((x, k) => { nb[n * 4 + k] = x.m; gk[n * 4 + k] = x.g; sum += x.g; }); worst = Math.max(worst, sum); }); const DT = 0.8 / worst; /* the longest step that stays steady */ const temp = new Float32Array(N); const next = new Float32Array(N); const cooked = new Float32Array(N); /* the hottest each cell has been: that is what sets it */ /* outside the egg the drawing reads the nearest cell inside, so the edge is the egg's own colour */ const near = new Int32Array(N); for (let n = 0; n < N; n++) { if (inside[n]) { near[n] = n; continue; } const i = n % NR; const j = (n - i) / NR; let best = -1; let bd = 1e9; for (let dj = -4; dj <= 4; dj++) { for (let di = -4; di <= 4; di++) { const jj = j + dj; const ii = i + di; if (jj < 0 || jj >= NZ || ii < 0 || ii >= NR) continue; const m = jj * NR + ii; const d = dj * dj + di * di; if (inside[m] && d < bd) { bd = d; best = m; } } } near[n] = best < 0 ? CELLS[0] : best; } const field = new Float32Array(N); /* what the drawing reads */ let simT = 0; /* the seconds in the water worked out so far */ function freshEgg() { temp.fill(START_C); cooked.fill(START_C); simT = 0; syncField(); } function syncField() { for (let n = 0; n < N; n++) field[n] = cooked[near[n]]; fieldStamp++; } let fieldStamp = 0; function step(dt) { for (let c = 0; c < CELLS.length; c++) { const n = CELLS[c]; const t = temp[n]; const o = n * 4; let q = 0; for (let k = 0; k < 4; k++) { const m = nb[o + k]; if (m === -2) continue; q += gk[o + k] * ((m < 0 ? WATER_C : temp[m]) - t); } next[n] = t + dt * q; } for (let c = 0; c < CELLS.length; c++) { const n = CELLS[c]; const t = next[n]; temp[n] = t; if (t > cooked[n]) cooked[n] = t; } } /* works the egg out up to a time in the water, a few hundred steps a frame at most */ function cookTo(to, most = 240) { let k = 0; while (simT < to - 1e-6 && k < most) { const d = Math.min(DT, to - simT); step(d); simT += d; k++; } if (k) syncField(); return simT >= to - 1e-6; } const CENTRE = Math.floor((YZ - Z0) / H) * NR; const yolkTemp = () => temp[CENTRE]; /* how much of the yolk is still runny, by volume (each cell is a ring as big as its radius) */ function runny() { let wet = 0; let all = 0; for (let c = 0; c < CELLS.length; c++) { const n = CELLS[c]; if (!yolkCell[n]) continue; const w = (n % NR) + 0.5; all += w; if (cooked[n] < 62) wet += w; } return all ? wet / all : 0; } /* ---------------------------------------------------------------- the colours, from the CSS */ const css = getComputedStyle(document.documentElement); const probe = document.createElement('canvas').getContext('2d'); function rgbOf(nameOf, fallback) { probe.fillStyle = fallback; probe.fillStyle = css.getPropertyValue(nameOf).trim() || fallback; const v = probe.fillStyle; if (v[0] === '#') return [1, 3, 5].map((i) => parseInt(v.slice(i, i + 2), 16)); const m = v.match(/[\d.]+/g); return [+m[0], +m[1], +m[2]]; } const mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; const rgba = (c, a = 1) => `rgba(${c[0] | 0},${c[1] | 0},${c[2] | 0},${a})`; const C = { ink: rgbOf('--ink', '#f4eee2'), whiteRaw: rgbOf('--white-raw', '#c3ccb6'), whiteMilky: rgbOf('--white-milky', '#e2e4da'), whiteSet: rgbOf('--white-set', '#fbf8f0'), yolkRaw: rgbOf('--yolk-raw', '#ffa21d'), yolkJammy: rgbOf('--yolk-jammy', '#ee7d12'), yolkFudgy: rgbOf('--yolk-fudgy', '#f6a637'), yolkSet: rgbOf('--yolk-set', '#f8cf63'), shell: rgbOf('--shell', '#d4ae86'), membrane: rgbOf('--membrane', '#efe6d6'), }; /* what each temperature does to the white and to the yolk, a quarter of a degree at a time from 0 to 120 */ const LUT_N = 481; const whiteLut = new Float32Array(LUT_N * 5); const yolkLut = new Float32Array(LUT_N * 5); for (let q = 0; q < LUT_N; q++) { const t = q / 4; /* the white: see-through, then milky from 60 degrees, then firm and white towards 80 */ const milky = smooth(58, 66, t); const firm = smooth(64, 80, t); let c = mix(mix(C.whiteRaw, C.whiteMilky, milky), C.whiteSet, firm); whiteLut.set([c[0], c[1], c[2], 0.16 + 0.84 * smooth(57, 67, t), 1 - milky], q * 5); /* the yolk: runny, thick as jam from 62, just set from 66, set firm above 70, a little dry and pale past 85 */ c = C.yolkRaw; c = mix(c, C.yolkJammy, smooth(60, 65, t)); c = mix(c, C.yolkFudgy, smooth(64.5, 69.5, t)); c = mix(c, C.yolkSet, smooth(69, 77, t)); c = mix(c, mix(C.yolkSet, C.whiteSet, 0.28), smooth(82, 96, t)); yolkLut.set([c[0], c[1], c[2], 1 - smooth(60, 64, t), smooth(67, 76, t)], q * 5); } /* ---------------------------------------------------------------- the drawing, 360 by 248 */ const RW = 360; const RH = 248; const EK = 4.7; /* units of the drawing for each millimetre */ const ECX = 180; const ECY = 134; const EW = EL * EK; const EH = EB * EK; const YRu = YR * EK; const YXu = YZ * EK; /* the outline, from the blunt end along the top to the point and back along the bottom */ const outline = []; { const M = 120; for (let u = 0; u <= M; u++) { const z = -(EL / 2) * Math.cos((Math.PI * u) / M); outline.push([z * EK, -half(z) * EK]); } for (let u = M - 1; u > 0; u--) { const z = -(EL / 2) * Math.cos((Math.PI * u) / M); outline.push([z * EK, half(z) * EK]); } } const pathOf = (pts) => { const p = new Path2D(); pts.forEach(([x, y], k) => (k ? p.lineTo(x, y) : p.moveTo(x, y))); p.closePath(); return p; }; const eggPath = pathOf(outline); /* the skin just inside the shell: the outline moved in along its normals */ const inset = (d) => outline.map(([x, y], k) => { const a = outline[(k - 1 + outline.length) % outline.length]; const b = outline[(k + 1) % outline.length]; const tx = b[0] - a[0]; const ty = b[1] - a[1]; const l = Math.hypot(tx, ty) || 1; return [x + (ty / l) * d, y - (tx / l) * d]; }); const skinPath = pathOf(inset(1.7)); /* ---------------------------------------------------------------- the canvas, and the two painted layers */ let k = 1; let q = 1; /* pixels of the painted layers for each unit */ const whiteC = document.createElement('canvas'); const yolkC = document.createElement('canvas'); const WB = { x: -EW / 2 - 2, y: -EH / 2 - 2, w: EW + 4, h: EH + 4 }; const YB = { x: YXu - YRu - 2, y: -YRu - 2, w: YRu * 2 + 4, h: YRu * 2 + 4 }; let wMap = null; let yMap = null; let wImg = null; let yImg = null; let painted = -1; let fitted = false; /* where each pixel of a layer reads the heat (the cell and how far across it), and how it is lit */ function mapLayer(box, isYolk) { const w = Math.ceil(box.w * q); const h = Math.ceil(box.h * q); const idx = new Int32Array(w * h).fill(-1); const fr = new Float32Array(w * h); const fz = new Float32Array(w * h); const lit = new Float32Array(w * h); const gloss = new Float32Array(w * h); const grain = new Float32Array(w * h); let seed = 7; for (let py = 0; py < h; py++) { for (let px = 0; px < w; px++) { const ux = box.x + (px + 0.5) / q; const uy = box.y + (py + 0.5) / q; const z = ux / EK; const r = Math.abs(uy) / EK; const p = py * w + px; seed = (seed * 16807) % 2147483647; if (isYolk) { const d = Math.hypot(ux - YXu, uy) / YRu; if (d > 1.04) continue; /* a little darker towards its edge; a wet sheen and a spot of light while it is runny; a grain once set */ lit[p] = 1 - 0.13 * d ** 4; const sx = (ux - YXu) / YRu + 0.34; const sy = uy / YRu + 0.4; gloss[p] = 0.1 + 0.5 * Math.exp(-(sx * sx * 1.6 + sy * sy * 3) / 0.07); grain[p] = seed / 2147483647 - 0.5; } else { const edge = half(z) - r; if (edge < -0.6) continue; /* a cut face lit from the top left, a little darker along the shell; the raw white catches a glassy line of light just inside the shell, on top */ lit[p] = (0.9 + 0.1 * smooth(0, 3.5, edge)) * (1 + 0.035 * (-(ux / EW) - uy / EH)); gloss[p] = Math.exp(-(((edge - 2.4) / 1.3) ** 2)) * (uy < 0 ? 1 : 0.35); } /* the white under the yolk (it shows when the yolk wobbles) is the white just outside it */ let sz = z; let sr = r; const dy = Math.hypot(z - YZ, r); if (!isYolk && dy < YR + 0.8) { const f = (YR + 0.8) / Math.max(dy, 1e-3); sz = YZ + (z - YZ) * f; sr = r * f; } const gj = clamp((sz - Z0) / H - 0.5, 0, NZ - 1.001); const gi = clamp(sr / H - 0.5, 0, NR - 1.001); const j0 = Math.floor(gj); const i0 = Math.floor(gi); idx[p] = j0 * NR + i0; fr[p] = gi - i0; fz[p] = gj - j0; } } return { w, h, idx, fr, fz, lit, gloss, grain }; } function fit() { const cw = pan.clientWidth || RW; const dpr = Math.min(2, window.devicePixelRatio || 1); const nk = (cw / RW) * dpr; if (fitted && Math.abs(nk - k) < 1e-6) return; fitted = true; k = nk; canvas.width = Math.round(RW * k); canvas.height = Math.round(RH * k); q = Math.min(1.5, k); wMap = mapLayer(WB, false); yMap = mapLayer(YB, true); whiteC.width = wMap.w; whiteC.height = wMap.h; yolkC.width = yMap.w; yolkC.height = yMap.h; wImg = whiteC.getContext('2d').createImageData(wMap.w, wMap.h); yImg = yolkC.getContext('2d').createImageData(yMap.w, yMap.h); painted = -1; drawn = ''; } const sample = (n, a, b) => (field[n] * (1 - a) + field[n + 1] * a) * (1 - b) + (field[n + NR] * (1 - a) + field[n + NR + 1] * a) * b; let paintedAt = -1e9; function paintLayers(often) { if (painted === fieldStamp) return; /* while it cooks the heat moves slowly: thirty paintings a second are plenty */ const now = performance.now(); if (often && now - paintedAt < 30) return; paintedAt = now; painted = fieldStamp; { const { idx, fr, fz, lit, gloss } = wMap; const d = wImg.data; for (let p = 0; p < idx.length; p++) { const n = idx[p]; const o = p * 4; if (n < 0) { d[o + 3] = 0; continue; } const t = sample(n, fr[p], fz[p]); const l = clamp(Math.round(t * 4), 0, LUT_N - 1) * 5; const raw = whiteLut[l + 4]; const g = gloss[p] * raw; const li = lit[p]; d[o] = whiteLut[l] * li + g * 60; d[o + 1] = whiteLut[l + 1] * li + g * 60; d[o + 2] = whiteLut[l + 2] * li + g * 60; d[o + 3] = Math.min(1, whiteLut[l + 3] + g * 0.22) * 255; } whiteC.getContext('2d').putImageData(wImg, 0, 0); } { const { idx, fr, fz, lit, gloss, grain } = yMap; const d = yImg.data; for (let p = 0; p < idx.length; p++) { const n = idx[p]; const o = p * 4; if (n < 0) { d[o + 3] = 0; continue; } const t = sample(n, fr[p], fz[p]); const l = clamp(Math.round(t * 4), 0, LUT_N - 1) * 5; const wet = yolkLut[l + 3]; const li = lit[p] * (1 + yolkLut[l + 4] * 0.07 * grain[p]); const g = gloss[p] * wet; d[o] = yolkLut[l] * li + (255 - yolkLut[l]) * g; d[o + 1] = yolkLut[l + 1] * li + (255 - yolkLut[l + 1]) * g; d[o + 2] = yolkLut[l + 2] * li + (255 - yolkLut[l + 2]) * g; d[o + 3] = 255; } yolkC.getContext('2d').putImageData(yImg, 0, 0); } } /* ---------------------------------------------------------------- the bubbles */ const bubbles = []; let owed = 0; let seedB = 3; const rnd = () => { seedB = (seedB * 16807) % 2147483647; return seedB / 2147483647; }; function bubble(big = 1) { /* born on the shell, mostly on its lower half and its sides, where the water is hottest */ const z = (rnd() * 2 - 1) * (EL / 2 - 3); const below = rnd() < 0.7; const hz = half(z); const x = ECX + z * EK; const y = ECY + (below ? hz : -hz) * EK; /* the outward normal of an ellipse is near enough */ let nx = (z * EK) / ((EW / 2) ** 2); let ny = ((below ? hz : -hz) * EK) / ((EH / 2) ** 2); const l = Math.hypot(nx, ny) || 1; nx /= l; ny /= l; bubbles.push({ x, y, nx, ny, r: 0.2, R: (1.3 + rnd() * 2.6) * big, t: 0, hold: 0.12 + rnd() * 0.45, vx: 0, vy: 0, ph: rnd() * 6.3, free: false }); } function stepBubbles(dt, boil) { if (boil > 0.01 && BUBBLES > 0) { owed += dt * 16 * BUBBLES * boil; while (owed >= 1) { owed -= 1; bubble(); } } for (let i = bubbles.length - 1; i >= 0; i--) { const b = bubbles[i]; b.t += dt; if (!b.free) { /* it grows sitting on the shell, then lets go */ b.r = b.R * smooth(0, b.hold, b.t) ** 0.6; if (b.t >= b.hold) { b.free = true; b.x += b.nx * b.r; b.y += b.ny * b.r; b.vx = b.nx * 14; b.vy = b.ny * 14 - 10; } continue; } /* it rises faster and faster, wobbling, and drifts out from the egg */ b.vy = Math.max(b.vy - 340 * dt, -70 - b.R * 9); b.vx += (Math.sin(b.ph + b.t * 9) * 26 - b.vx) * Math.min(1, dt * 4); b.x += b.vx * dt; b.y += b.vy * dt; if (b.y < -8) bubbles.splice(i, 1); } } function drawBubbles() { ctx.lineWidth = 0.85; for (let i = 0; i < bubbles.length; i++) { const b = bubbles[i]; if (b.r < 0.25) continue; const a = smooth(-4, 46, b.y); let x = b.x; let y = b.y; if (!b.free) { x += b.nx * b.r * 0.6; y += b.ny * b.r * 0.6; } ctx.beginPath(); ctx.arc(x, y, b.r, 0, Math.PI * 2); ctx.fillStyle = rgba(C.ink, 0.07 * a); ctx.fill(); ctx.strokeStyle = rgba(C.ink, 0.5 * a); ctx.stroke(); if (b.r > 1.6) { ctx.beginPath(); ctx.arc(x - b.r * 0.32, y - b.r * 0.32, b.r * 0.32, Math.PI * 1.05, Math.PI * 1.6); ctx.strokeStyle = rgba(C.ink, 0.6 * a); ctx.stroke(); } } } /* ---------------------------------------------------------------- one picture */ /* how the egg sits: a dip, a rock in the water, the jump at the end with its squash, a new egg coming in */ const pose = { y: 0, rot: 0, sx: 1, sy: 1, sc: 1, a: 1, rock: 0, boil: 0 }; const jig = { t: 0, amp: 0, f: 4, tau: 0.3, on: false }; let jiggle = 0; function drawEgg() { ctx.save(); ctx.translate(ECX, ECY + pose.y); /* the squash and the stretch keep the bottom of the egg where it is */ ctx.translate(0, EH / 2); ctx.scale(pose.sx * pose.sc, pose.sy * pose.sc); ctx.translate(0, -EH / 2); ctx.rotate(pose.rot); ctx.globalAlpha = pose.a; /* the white, over the dark of the water: what is behind the egg does not show through the raw white */ ctx.fillStyle = '#000'; ctx.fill(eggPath); ctx.save(); ctx.clip(eggPath); ctx.drawImage(whiteC, WB.x, WB.y, wMap.w / q, wMap.h / q); ctx.restore(); /* the yolk, which wobbles on its own */ ctx.save(); ctx.translate(YXu, 0); ctx.scale(1 + jiggle, 1 - jiggle * 0.92); ctx.beginPath(); ctx.arc(0, 0, YRu, 0, Math.PI * 2); ctx.clip(); ctx.drawImage(yolkC, YB.x - YXu, YB.y, yMap.w / q, yMap.h / q); ctx.restore(); /* the skin and the shell */ ctx.strokeStyle = rgba(C.membrane, 0.3); ctx.lineWidth = 0.8; ctx.stroke(skinPath); ctx.lineWidth = 2.4; ctx.strokeStyle = rgba(C.shell); ctx.stroke(eggPath); ctx.restore(); } let drawn = ''; function draw() { paintLayers(state === 'running'); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.setTransform(k, 0, 0, k, 0, 0); drawBubbles(); drawEgg(); } /* ---------------------------------------------------------------- the time */ const two = (v) => String(v).padStart(2, '0'); const clock = (sec) => `${two(Math.min(99, Math.floor(sec / 60)))}:${two(sec % 60)}`; const short = (sec) => `${Math.floor(sec / 60)}:${two(sec % 60)}`; const words = (sec) => [Math.floor(sec / 60) && `${Math.floor(sec / 60)} minute${Math.floor(sec / 60) > 1 ? 's' : ''}`, sec % 60 && `${sec % 60} second${sec % 60 > 1 ? 's' : ''}`].filter(Boolean).join(' ') || '0 seconds'; let shownTime = ''; let lastTick = 0; function showTime(sec, soft = true) { const str = clock(sec); if (str === shownTime) return; const now = performance.now(); /* when the figures change faster than they could roll (the quick cook of the demo) they simply change */ const roll = soft && !REDUCED && now - lastTick > 260; lastTick = now; shownTime = str; timeWords.textContent = words(sec); if (timeEl.children.length !== str.length) { timeEl.replaceChildren(...[...str].map((ch) => { const slot = document.createElement('span'); slot.className = ch === ':' ? 'fig fig--colon' : 'fig'; const inner = document.createElement('span'); inner.textContent = ch; slot.append(inner); return slot; })); return; } [...str].forEach((ch, i) => { const slot = timeEl.children[i]; const cur = slot.lastElementChild; if (cur.textContent === ch) return; /* a roll still going finishes at once */ while (slot.children.length > 1) slot.firstElementChild.remove(); gsap.killTweensOf(cur); if (!roll) { cur.textContent = ch; gsap.set(cur, { yPercent: 0, opacity: 1 }); return; } /* like a counter wheel: the new figure sits one window above the old and they roll down together */ const nxt = document.createElement('span'); nxt.textContent = ch; slot.append(nxt); const how = { duration: 0.42, ease: 'power3.inOut' }; gsap.fromTo(cur, { yPercent: 0 }, { yPercent: 100, ...how, onComplete: () => cur.remove() }); gsap.fromTo(nxt, { yPercent: -100, opacity: 1 }, { yPercent: 0, ...how }); }); } /* the words change with a short blur */ function swapText(el, text) { if (el.textContent === text) return; el.textContent = text; if (REDUCED) { gsap.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.25, overwrite: true }); return; } gsap.fromTo(el, { opacity: 0, y: 5, filter: 'blur(3px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.26, ease: 'power2.out', overwrite: true, clearProps: 'filter,transform' }); } const degrees = () => `yolk ${Math.round(yolkTemp())} °C`; /* ---------------------------------------------------------------- the three ways */ kindsEl.style.setProperty('--count', kinds.length); const options = kinds.map(([n, sec], i) => { const label = document.createElement('label'); label.className = 'kind'; const input = document.createElement('input'); input.type = 'radio'; input.name = 'egg-way'; input.value = String(i); input.checked = i === chosen; const nm = document.createElement('span'); nm.className = 'kind__name'; nm.textContent = n; const tm = document.createElement('span'); tm.className = 'kind__time'; tm.textContent = short(sec); label.append(input, nm, tm); kindsEl.append(label); input.addEventListener('change', () => { if (!input.checked) return; /* from a finished egg, another way means the next egg */ if (state === 'done') { choose(i, false); renew(); } else if (state === 'ready' || state === 'renewing') choose(i); }); return { label, input }; }); /* the dark copy of the words inside the pill */ kinds.forEach(([n, sec]) => { const cell = document.createElement('span'); const nm = document.createElement('span'); nm.className = 'kind__name'; nm.textContent = n; const tm = document.createElement('span'); tm.className = 'kind__time'; tm.textContent = short(sec); cell.append(nm, tm); pillCopy.append(cell); }); function placePill(soft) { options.forEach((o, i) => o.label.classList.toggle('is-on', i === chosen)); const at = { xPercent: chosen * 100 }; const back = { xPercent: (-chosen * 100) / kinds.length }; if (REDUCED || !soft) { gsap.set(pill, at); gsap.set(pillCopy, back); if (soft) gsap.fromTo(pill, { opacity: 0.5 }, { opacity: 1, duration: 0.25 }); return; } /* the pill slides (no overshoot: at the ends it would run past the track), and the words inside it slide back by as much */ const how = { duration: 0.45, ease: 'power4.out', overwrite: 'auto' }; gsap.to(pill, { ...at, ...how }); gsap.to(pillCopy, { ...back, ...how }); } function choose(i, showIt = true) { chosen = i; placePill(true); if (showIt) showTime(kinds[chosen][1]); } /* ---------------------------------------------------------------- begin, pause, resume, the end, a new egg */ let state = 'ready'; /* ready, running, paused, done, renewing */ let endAt = 0; /* when it ends, by the clock, while it runs */ let leftReal = 0; /* the real seconds left, while paused */ let doneAt = 0; let total = kinds[chosen][1]; let realTotal = DEMO > 0 ? DEMO : total; const simAt = (leftR) => total - (leftR / realTotal) * total; let beginAfter = false; let renewing = null; let hop = null; let dip = null; function setButtons(action) { swapText(goWords, action); const busy = state === 'running' || state === 'paused'; kindsEl.disabled = busy; resetBtn.setAttribute('aria-disabled', String(state === 'ready' || state === 'renewing')); go.setAttribute('aria-label', action === 'Start' ? `Start a ${kinds[chosen][0].toLowerCase()} egg, ${words(total)}` : action); } function begin() { total = kinds[chosen][1]; realTotal = DEMO > 0 ? DEMO : total; state = 'running'; endAt = performance.now() + realTotal * 1000; swapText(wordEl, 'Cooking'); detailEl.textContent = degrees(); setButtons('Pause'); live.textContent = `Cooking a ${kinds[chosen][0].toLowerCase()} egg, ${words(total)}`; if (REDUCED) return; /* the egg goes down into the water in a burst of bubbles and starts to rock */ if (dip) dip.kill(); dip = gsap.timeline() .to(pose, { y: 6, duration: 0.16, ease: 'power2.out' }) .to(pose, { y: 0, duration: 0.7, ease: 'elastic.out(1, 0.5)' }); gsap.to(pose, { rock: 1, boil: 1, duration: 0.9, ease: 'power1.out', overwrite: 'auto' }); for (let i = 0; i < 10 * Math.min(2, BUBBLES); i++) bubble(0.8); } function pause() { state = 'paused'; leftReal = Math.max(0, (endAt - performance.now()) / 1000); swapText(wordEl, 'Paused'); setButtons('Resume'); live.textContent = `Paused, ${words(Math.ceil(total - simAt(leftReal) - 1e-6))} left`; gsap.to(pose, { rock: 0, boil: 0, duration: REDUCED ? 0 : 0.5, ease: 'power2.out', overwrite: 'auto' }); } function resume() { state = 'running'; endAt = performance.now() + leftReal * 1000; swapText(wordEl, 'Cooking'); setButtons('Pause'); live.textContent = 'Cooking again'; if (!REDUCED) gsap.to(pose, { rock: 1, boil: 1, duration: 0.6, ease: 'power1.out', overwrite: 'auto' }); } function verdict() { const wet = runny(); if (wet > 0.42) return 'runny yolk'; if (wet > 0.04) return 'jammy yolk'; return 'firm yolk'; } function finish() { cookTo(total, 1e9); state = 'done'; doneAt = performance.now(); showTime(0, false); const said = verdict(); swapText(wordEl, 'Done'); swapText(detailEl, said); setButtons('New egg'); live.textContent = `Done: the egg is ready, with a ${said}`; gsap.to(pose, { rock: 0, boil: 0, duration: 0.3, overwrite: 'auto' }); if (REDUCED) return; /* lifted out: it crouches, jumps, lands with a squash, and the yolk wobbles as much as it is runny */ const wet = runny(); if (hop) hop.kill(); hop = gsap.timeline() .to(pose, { sy: 0.94, sx: 1.04, y: 2, duration: 0.11, ease: 'power2.out' }) .to(pose, { y: -26, sy: 1.05, sx: 0.97, duration: 0.28, ease: 'power2.out' }) .to(pose, { sy: 1, sx: 1, duration: 0.2, ease: 'power1.inOut' }, '<0.1') .to(pose, { y: 0, duration: 0.22, ease: 'power2.in' }) .add(() => { jig.t = 0; jig.amp = WOBBLE * (0.016 + 0.2 * wet); jig.f = 6 - 3 * wet; jig.tau = 0.14 + 0.17 * wet; jig.on = jig.amp > 0.0005; }) .to(pose, { sy: 0.93, sx: 1.05, duration: 0.07, ease: 'power1.out' }) .to(pose, { sy: 1, sx: 1, duration: 0.75, ease: 'elastic.out(1, 0.42)' }); } let renewAt = 0; function renew() { renewAt = performance.now(); if (renewing) renewing.kill(); if (hop) hop.kill(); if (dip) dip.kill(); state = 'renewing'; jig.on = false; jiggle = 0; gsap.to(pose, { rock: 0, boil: 0, duration: 0.3, overwrite: 'auto' }); setButtons('Start'); const ready = () => { state = 'ready'; renewing = null; total = kinds[chosen][1]; setButtons('Start'); if (beginAfter) { beginAfter = false; begin(); } }; /* the cooked egg fades away and a raw one comes in */ renewing = gsap.timeline() .to(pose, { a: 0, sc: REDUCED ? 1 : 0.95, y: 0, sx: 1, sy: 1, rot: 0, duration: 0.26, ease: 'power2.in' }) .add(() => { freshEgg(); showTime(kinds[chosen][1]); swapText(wordEl, 'Ready'); swapText(detailEl, degrees()); }) .fromTo(pose, { sc: REDUCED ? 1 : 0.94 }, { a: 1, sc: 1, duration: REDUCED ? 0.3 : 0.55, ease: REDUCED ? 'power1.out' : 'back.out(1.6)' }) .add(ready, REDUCED ? '>' : '-=0.3'); } /* the Enter key on the button clicks with detail 0, like a script: it is told apart by its keydown */ let byKeys = false; go.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') byKeys = true; }); go.addEventListener('click', (e) => { /* a click from a script (the library's preview) only begins, resumes and, a while after the end, takes a new egg and begins: it never pauses. A click while a new egg comes in begins it as soon as it is there (but not the second click of a double click on New egg) */ const byHand = e.detail > 0 || byKeys; byKeys = false; if (state === 'ready') begin(); else if (state === 'running') { if (byHand) pause(); } else if (state === 'paused') resume(); else if (state === 'done') { if (byHand) renew(); else if (performance.now() - doneAt > 2400) { beginAfter = true; renew(); } } else if (state === 'renewing' && (!byHand || performance.now() - renewAt > 300)) beginAfter = true; }); resetBtn.addEventListener('click', () => { if (state === 'ready' || state === 'renewing') return; if (!REDUCED) gsap.fromTo(resetIcon, { rotation: 0 }, { rotation: -360, duration: 0.7, ease: 'power3.out', transformOrigin: '50% 50%' }); beginAfter = false; renew(); live.textContent = 'Started over with a new egg'; }); /* ---------------------------------------------------------------- every frame */ let shownDeg = ''; gsap.ticker.add((time, deltaMs) => { const dt = Math.min(deltaMs / 1000, 1 / 30); /* the time left comes from the clock, not from adding up the frames: a tab left in the background still ends on time, and the egg is worked out up to where the clock says */ if (state === 'running') { const leftR = Math.max(0, (endAt - performance.now()) / 1000); const at = simAt(leftR); if (leftR <= 0) finish(); else { cookTo(at); showTime(Math.ceil(total - at - 1e-6)); } } if (state === 'running' || state === 'paused') { const deg = degrees(); if (deg !== shownDeg) { shownDeg = deg; detailEl.textContent = deg; } } if (!REDUCED) { stepBubbles(dt, pose.boil); if (pose.rock > 0.001) { pose.rot = pose.rock * (Math.sin(time * 2.3) * 0.6 + Math.sin(time * 3.9 + 1.3) * 0.4) * 0.02; } else pose.rot = 0; } if (jig.on) { jig.t += dt; jiggle = jig.amp * Math.exp(-jig.t / jig.tau) * Math.sin(2 * Math.PI * jig.f * jig.t); if (jig.t > Math.min(1.4, jig.tau * 5)) { jig.on = false; jiggle = 0; } } /* when nothing moves, nothing is drawn */ const key = `${fieldStamp}|${pose.y.toFixed(2)}|${pose.rot.toFixed(4)}|${pose.sx.toFixed(4)}|${pose.sy.toFixed(4)}|${pose.sc.toFixed(4)}|${pose.a.toFixed(3)}|${jiggle.toFixed(4)}|${bubbles.length}`; if (!bubbles.length && key === drawn && painted === fieldStamp) return; drawn = key; draw(); }); /* ---------------------------------------------------------------- it comes in */ freshEgg(); fit(); if (window.ResizeObserver) new ResizeObserver(() => fit()).observe(pan); else addEventListener('resize', fit); showTime(total, false); wordEl.textContent = 'Ready'; detailEl.textContent = degrees(); placePill(false); setButtons('Start'); goWords.textContent = 'Start'; if (REDUCED) { gsap.from(root, { opacity: 0, duration: 0.5, ease: 'power1.out', lazy: false, clearProps: 'opacity' }); } else { /* the egg comes in with a small bounce, the time and the rest rise */ gsap.fromTo(pose, { a: 0, sc: 0.92 }, { a: 1, sc: 1, duration: 0.8, ease: 'back.out(1.5)', delay: 0.1 }); gsap.from([readout, kindsEl, controls], { y: 12, opacity: 0, duration: 0.7, ease: 'power3.out', stagger: 0.07, delay: 0.25, lazy: false, clearProps: 'transform,opacity' }); } })();