/* The oven knob The mode knob of an oven, and the oven it runs, seen through the door. The knob is a bakelite pointer in a brass ring with the modes printed round it, as on a real oven: it is turned round with the hand, the wheel or the keys, and it clicks. Turning it, the knob gives a little in its notch, then past the middle of the way it is thrown into the next one by a spring and settles with a small bounce; the mark under the new symbol latches on to the ring, the symbol jumps and the mode's name rolls in from the side the knob is turning to. Behind the glass the oven does what the mode says: the lamp comes on, the fan spins up and blurs, and the elements heat up and glow. Their glow is worked out from the temperature with Planck's law at three wavelengths, so a heating element goes from dull red to orange and the grill, hotter, to yellow; their light falls on the inside of the oven through a light map worked out once per element, and the hot air bends the view. */ /* ---- values to change ---- */ const START = 4; /* the mode when the page opens: 0 is Off, 1 Light, 2 Defrost, 3 Fan bake, 4 Bake, 5 Grill, 6 Pizza */ const PITCH = 45; /* the degrees between two positions of the knob */ const CREEP = 0.3; /* how much the knob gives before it clicks over, as a share of the hand's turn */ const CLICK = [2400, 0.5]; /* the spring that throws the knob into its notch: how stiff, how damped (1 = no bounce) */ const HEAT = [0.5, 2.6]; /* the seconds an element takes to heat up and to cool down */ const FAN = 4.5; /* the fan's top speed, in turns a second */ const HAZE = 0.6; /* how far the hot air bends the view, in pixels */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const oven = document.querySelector('[data-oven]'); const canvas = oven.querySelector('[data-cavity]'); const ctx = canvas.getContext('2d'); const dial = oven.querySelector('[data-dial]'); const printSvg = oven.querySelector('[data-print]'); const hub = oven.querySelector('[data-hub]'); const knobSvg = oven.querySelector('[data-knob]'); const nameEl = oven.querySelector('[data-name]'); const lineEl = oven.querySelector('[data-line]'); const live = oven.querySelector('[data-live]'); /* ---------------------------------------------------------------- the modes */ /* what each mode turns on: the lamp, the fan and the elements that heat */ const MODES = [ { name: 'Off', line: 'Turn the knob to choose how the oven heats.', lamp: 0, fan: 0, heat: [] }, { name: 'Light', line: 'Just the lamp, to check a bake without opening the door.', lamp: 1, fan: 0, heat: [] }, { name: 'Defrost', line: 'The fan stirs the air with no heat, to thaw food gently.', lamp: 1, fan: 1, heat: [] }, { name: 'Fan bake', line: 'The ring heats and the fan carries it to every shelf.', lamp: 1, fan: 1, heat: ['ring'] }, { name: 'Bake', line: 'Top and bottom heat in still air, for one shelf at a time.', lamp: 1, fan: 0, heat: ['top', 'bottom'] }, { name: 'Grill', line: 'Strong heat from the grill above, to brown and crisp.', lamp: 1, fan: 0, heat: ['grill'] }, { name: 'Pizza', line: 'Bottom heat and the fan, for a crisp base and a cooked top.', lamp: 1, fan: 1, heat: ['bottom', 'ring'] }, ]; const LAST = MODES.length - 1; const END = LAST * PITCH; const notchOf = (h) => Math.min(LAST, Math.max(0, Math.round(h / PITCH))); /* ---------------------------------------------------------------- light and colour */ function linear(hex, fallback) { const h = (hex || fallback).trim().replace('#', ''); const f = h.length === 3 ? h.split('').map((c) => c + c).join('') : h; return [0, 2, 4].map((i) => Math.pow(parseInt(f.slice(i, i + 2), 16) / 255, 2.2)); } const css = getComputedStyle(document.documentElement); const ENAMEL = linear(css.getPropertyValue('--cavity'), '#40454d'); const LAMP_COL = linear(css.getPropertyValue('--lamp'), '#ffd2a1'); const PRINT = linear(css.getPropertyValue('--print'), '#f6f2e8'); const GLASS = (css.getPropertyValue('--glass') || '#08090b').trim(); /* the glow of hot metal: Planck's law at the red, green and blue the eye adds up, as a share of the red at 1000 K. It climbs very steeply: an element shows nothing below 700 K, is dull red at 900 and orange at 1000 */ const C2 = 14388000; /* the second radiation constant, in nanometre kelvin */ const WAVES = [610, 549, 465]; function glowOf(t) { if (t < 640) return [0, 0, 0]; return WAVES.map((w) => Math.pow(610 / w, 5) * Math.exp(C2 / 610000 - C2 / (w * t))); } /* from light to a byte on screen: a soft shoulder, so the hot parts go to yellow instead of clipping, and the gamma. The table is read by the square root of the light, so the dark inside of the oven has no steps */ const LUT_N = 4096; const LUT_MAX = 14; const LUT = new Uint8ClampedArray(LUT_N); for (let i = 0; i < LUT_N; i++) { const x = LUT_MAX * Math.pow(i / (LUT_N - 1), 2); LUT[i] = Math.round(255 * Math.pow(1 - Math.exp(-x), 1 / 2.2)); } const toByte = (x) => (x <= 0 ? 0 : LUT[Math.min(LUT_N - 1, Math.round(Math.sqrt(x / LUT_MAX) * (LUT_N - 1)))]); const rgb = (c) => `rgb(${toByte(c[0])},${toByte(c[1])},${toByte(c[2])})`; const rgba = (c, a) => `rgba(${toByte(c[0])},${toByte(c[1])},${toByte(c[2])},${a.toFixed(3)})`; /* ---------------------------------------------------------------- the oven, in its own units */ /* the window is 328 by 184; the opening into the oven is the box's front, one unit is half its width */ const CW = 328; const CH = 184; const OX = 12; const OY = 12; const OW = 304; const OH = 160; const HALF = OW / 2; const MX = OX + HALF; const MY = OY + OH / 2; const BOX = OH / OW; /* the box's half height */ const DEEP = 1; /* and its depth */ const EYE = [0, 0.08, 1.25]; /* the eye: a little below the middle, this far in front of the glass */ const ROOM = 293; /* the kitchen, in kelvin */ function at(x, y, z) { const s = EYE[2] / (EYE[2] + z); return [MX + (EYE[0] + (x - EYE[0]) * s) * HALF, MY + (EYE[1] + (y - EYE[1]) * s) * HALF, s]; } /* a path with rounded corners, in the plane of a wall */ function bend(corners, r) { const out = [corners[0]]; for (let i = 1; i < corners.length - 1; i++) { const [px, pz] = corners[i - 1]; const [cx, cz] = corners[i]; const [nx, nz] = corners[i + 1]; const l1 = Math.hypot(cx - px, cz - pz); const l2 = Math.hypot(nx - cx, nz - cz); const a = [cx + ((px - cx) * Math.min(r, l1 / 2)) / l1, cz + ((pz - cz) * Math.min(r, l1 / 2)) / l1]; const b = [cx + ((nx - cx) * Math.min(r, l2 / 2)) / l2, cz + ((nz - cz) * Math.min(r, l2 / 2)) / l2]; for (let s = 0; s <= 6; s++) { const t = s / 6; const u = 1 - t; out.push([u * u * a[0] + 2 * u * t * cx + t * t * b[0], u * u * a[1] + 2 * u * t * cz + t * t * b[1]]); } } out.push(corners[corners.length - 1]); return out; } /* cut a path into pieces no longer than step, so each piece gets its own thickness and its own light */ function fine(path, step) { const out = [path[0]]; for (let i = 1; i < path.length; i++) { const a = path[i - 1]; const b = path[i]; const n = Math.max(1, Math.ceil(Math.hypot(b[0] - a[0], b[1] - a[1], b[2] - a[2]) / step)); for (let k = 1; k <= n; k++) out.push([a[0] + ((b[0] - a[0]) * k) / n, a[1] + ((b[1] - a[1]) * k) / n, a[2] + ((b[2] - a[2]) * k) / n]); } return out; } const CEIL = -BOX + 0.055; const FLOOR = BOX - 0.05; const FAN_AT = [0, -0.06, DEEP]; const LAMP_AT = [0.66, -0.33, DEEP]; const RACK_Y = 0.3; const flat = (pts, y) => pts.map(([x, z]) => [x, y, z]); const ringPath = []; for (let i = 0; i <= 64; i++) { const a = (i / 64) * Math.PI * 2; ringPath.push([FAN_AT[0] + Math.cos(a) * 0.3, FAN_AT[1] + Math.sin(a) * 0.3, DEEP - 0.04]); } /* the elements: where they are, how hot they run and how much of their light reaches the walls (the grill runs hotter, so it looks yellower, but it is a thinner tube and its light is held back to keep the oven in one range) */ const ELEMENTS = [ { key: 'top', hot: 1000, gives: 1, path: flat(bend([[-0.74, DEEP], [-0.74, 0.14], [0.74, 0.14], [0.74, DEEP]], 0.1), CEIL) }, { key: 'grill', hot: 1060, gives: 0.42, path: flat(bend([[-0.46, DEEP], [-0.46, 0.3], [-0.155, 0.3], [-0.155, 0.84], [0.155, 0.84], [0.155, 0.3], [0.46, 0.3], [0.46, DEEP]], 0.07), CEIL + 0.012) }, { key: 'bottom', hot: 990, gives: 1, path: flat(bend([[-0.66, DEEP], [-0.66, 0.18], [0.66, 0.18], [0.66, DEEP]], 0.1), FLOOR) }, { key: 'ring', hot: 985, gives: 1.15, path: ringPath }, ].map((e) => ({ ...e, path: fine(e.path, 0.07) })); const KEYS = ELEMENTS.map((e) => e.key); /* ---------------------------------------------------------------- the light map */ /* every point of the inside is found once: a ray from the eye through the glass, to the wall it hits. Then, for each light (four elements and the lamp), how much of it reaches the point: the sum over the light's length of cos / distance squared. Each frame only mixes the five maps by the light each source gives off */ const BW = 152; const BH = 80; const NPX = BW * BH; const SOURCES = KEYS.concat('lamp'); const FIELD = SOURCES.map(() => new Float32Array(NPX)); const MEAN = SOURCES.map(() => 0); const SHADE = new Float32Array(NPX); /* how open each point is: the corners get less of the bounced light */ const samples = SOURCES.map((key) => { if (key === 'lamp') return [[LAMP_AT[0], LAMP_AT[1], LAMP_AT[2] - 0.03, 0.9]]; const path = ELEMENTS.find((e) => e.key === key).path; const list = []; for (let i = 1; i < path.length; i += 2) { const a = path[i - 1]; const b = path[Math.min(path.length - 1, i + 1)]; list.push([path[i][0], path[i][1], path[i][2], Math.hypot(b[0] - a[0], b[1] - a[1], b[2] - a[2])]); } return list; }); /* and the same for a few points in the open (the rack, the fan, each element), lit from every side */ function reach(p, n) { return samples.map((list, s) => { let sum = 0; for (const [x, y, z, w] of list) { const dx = x - p[0]; const dy = y - p[1]; const dz = z - p[2]; const d2 = dx * dx + dy * dy + dz * dz + 0.004; const d = Math.sqrt(d2); const cos = n ? Math.max(0, (n[0] * dx + n[1] * dy + n[2] * dz) / d) : 1; /* the lamp shines forwards, out of its lens */ const out = SOURCES[s] === 'lamp' ? 0.3 + 0.7 * Math.max(0, -dz / d) : 1; sum += (w * cos * out) / d2; } return sum; }); } (function bake() { for (let j = 0; j < BH; j++) { for (let i = 0; i < BW; i++) { const X = (OX + ((i + 0.5) * OW) / BW - MX) / HALF; const Y = (OY + ((j + 0.5) * OH) / BH - MY) / HALF; const dx = X - EYE[0]; const dy = Y - EYE[1]; const dz = EYE[2]; let t = (DEEP + EYE[2]) / dz; let n = [0, 0, -1]; if (dx) { const tx = ((dx > 0 ? 1 : -1) - EYE[0]) / dx; if (tx < t) { t = tx; n = [dx > 0 ? -1 : 1, 0, 0]; } } if (dy) { const ty = ((dy > 0 ? BOX : -BOX) - EYE[1]) / dy; if (ty < t) { t = ty; n = [0, dy > 0 ? -1 : 1, 0]; } } const p = [EYE[0] + t * dx, EYE[1] + t * dy, -EYE[2] + t * dz]; const o = j * BW + i; const got = reach(p, n); got.forEach((v, s) => { FIELD[s][o] = v; MEAN[s] += v / NPX; }); /* how far the point is from the walls it meets */ let edge; if (n[0]) edge = Math.min(p[1] + BOX, BOX - p[1], DEEP - p[2]); else if (n[1]) edge = Math.min(1 - Math.abs(p[0]), DEEP - p[2]); else edge = Math.min(1 - Math.abs(p[0]), BOX - Math.abs(p[1])); SHADE[o] = 1 - 0.45 * Math.exp(-Math.max(0, edge) / 0.09); } } })(); const REACH = { fan: reach([FAN_AT[0], FAN_AT[1], DEEP - 0.02], [0, 0, -1]), rackFront: reach([0, RACK_Y, 0.1], null), rackBack: reach([0, RACK_Y, DEEP - 0.1], null), }; /* a tube takes the light along its whole length, not at one point (one point can sit right next to another tube) */ ELEMENTS.forEach((e) => { const sum = SOURCES.map(() => 0); for (let i = 0; i < 8; i++) reach(e.path[Math.floor(((i + 0.5) / 8) * e.path.length)], null).forEach((v, s) => (sum[s] += v / 8)); e.reach = sum; }); /* ---------------------------------------------------------------- the light of the moment */ const LAMP_POWER = 0.42; const ELEMENT_POWER = 0.11; const BOUNCE = 0.5; /* the light the enamel sends back round the oven */ const OUTSIDE = [0.0016, 0.0019, 0.0026]; /* the kitchen's light, coming in through the glass */ const EXPOSE = 1.6; const heat = Object.fromEntries(KEYS.map((k) => [k, ROOM])); let lamp = 0; /* the lamp's light, from 0 to 1 */ let fanW = 0; /* the fan's speed, in turns a second */ let fanA = 0; /* and its angle, in degrees */ let air = 0; /* how hot the air is, from 0 to about 1 */ let haze = 0; let source = SOURCES.map(() => [0, 0, 0]); function sourcesNow() { source = SOURCES.map((key) => { if (key === 'lamp') return LAMP_COL.map((c) => c * lamp * LAMP_POWER); const gives = ELEMENTS.find((e) => e.key === key).gives; return glowOf(heat[key]).map((c) => c * ELEMENT_POWER * gives); }); } /* the light falling on a point, from what it reaches */ function lightFrom(r) { const out = [OUTSIDE[0], OUTSIDE[1], OUTSIDE[2]]; for (let s = 0; s < SOURCES.length; s++) { const f = r[s] + MEAN[s] * BOUNCE; out[0] += source[s][0] * f; out[1] += source[s][1] * f; out[2] += source[s][2] * f; } return out; } /* the light map, mixed and turned into pixels */ const mapCanvas = document.createElement('canvas'); mapCanvas.width = BW; mapCanvas.height = BH; const mapCtx = mapCanvas.getContext('2d'); const mapImg = mapCtx.createImageData(BW, BH); function relight() { const d = mapImg.data; const amb = [0, 1, 2].map((ch) => OUTSIDE[ch] + SOURCES.reduce((sum, key, i) => sum + source[i][ch] * MEAN[i] * BOUNCE, 0)); for (let o = 0; o < NPX; o++) { let r = amb[0] * SHADE[o]; let g = amb[1] * SHADE[o]; let b = amb[2] * SHADE[o]; for (let s = 0; s < SOURCES.length; s++) { const f = FIELD[s][o]; r += source[s][0] * f; g += source[s][1] * f; b += source[s][2] * f; } const q = o * 4; d[q] = toByte(r * ENAMEL[0] * EXPOSE); d[q + 1] = toByte(g * ENAMEL[1] * EXPOSE); d[q + 2] = toByte(b * ENAMEL[2] * EXPOSE); d[q + 3] = 255; } mapCtx.putImageData(mapImg, 0, 0); } /* the colour of the lit wall behind a point of the window */ function wallAt(x, y) { const i = Math.min(BW - 1, Math.max(0, Math.floor(((x - OX) / OW) * BW))); const j = Math.min(BH - 1, Math.max(0, Math.floor(((y - OY) / OH) * BH))); const q = (j * BW + i) * 4; return [mapImg.data[q], mapImg.data[q + 1], mapImg.data[q + 2]]; } const shadeOf = (c, k, add = 0) => `rgb(${Math.min(255, Math.round(c[0] * k + add))},${Math.min(255, Math.round(c[1] * k + add))},${Math.min(255, Math.round(c[2] * k + add))})`; /* ---------------------------------------------------------------- the canvases */ const scene = document.createElement('canvas'); const sceneCtx = scene.getContext('2d'); let k = 1; /* window units to canvas pixels */ function fitCanvas() { const w = canvas.clientWidth || CW; const dpr = Math.min(2, window.devicePixelRatio || 1); k = (w / CW) * dpr; canvas.width = scene.width = Math.round(CW * k); canvas.height = scene.height = Math.round(CH * k); painted = ''; } /* ---------------------------------------------------------------- drawing the inside */ function path2d(g, pts) { g.beginPath(); pts.forEach((p, i) => (i ? g.lineTo(p[0], p[1]) : g.moveTo(p[0], p[1]))); } /* steel reflects the light round it but greys it: most of its colour is the light's brightness */ function steel(c, gain) { const y = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; return c.map((v) => (v * 0.35 + y * 0.65) * gain); } /* a heating element: a steel tube, dull grey in the lamp's light, and its glow when hot */ const TUBE = 0.03; function drawElement(g, e) { const glow = glowOf(heat[e.key]); const lit = steel(lightFrom(e.reach), 0.3); const core = [lit[0] + glow[0] * 1.5, lit[1] + glow[1] * 1.5, lit[2] + glow[2] * 1.5]; const hot = Math.min(1, glow[0] * 1.6); const pts = e.path.map((p) => at(p[0], p[1], p[2])); /* the glow round the tube */ if (hot > 0.01) { g.save(); g.globalCompositeOperation = 'lighter'; g.lineCap = 'round'; g.lineJoin = 'round'; path2d(g, pts); g.lineWidth = 5; g.strokeStyle = rgba(glow.map((c) => c * 0.9), 0.32 * hot); g.shadowColor = rgba(glow.map((c) => c * 1.4), Math.min(1, 0.9 * hot)); g.shadowBlur = 11 * k; g.stroke(); g.restore(); } /* the tube, piece by piece: thicker in front */ g.lineCap = 'round'; g.strokeStyle = rgb(core); for (let i = 1; i < pts.length; i++) { g.lineWidth = TUBE * HALF * (pts[i][2] + pts[i - 1][2]) * 0.5; g.beginPath(); g.moveTo(pts[i - 1][0], pts[i - 1][1]); g.lineTo(pts[i][0], pts[i][1]); g.stroke(); } /* the hottest line down the middle of the tube, and a glint of the lamp on its top */ g.save(); path2d(g, pts); if (hot > 0.01) { g.lineWidth = 1.1; g.strokeStyle = rgba(glow.map((c) => c * 3.2), Math.min(1, hot * 1.2)); g.stroke(); } g.translate(0, -0.7); path2d(g, pts); g.lineWidth = 0.6; g.strokeStyle = rgba([0.6, 0.6, 0.6].map((c, i) => c * (lit[i] * 2.4 + glow[i])), 0.6); g.stroke(); g.restore(); } /* the fan: six swept blades, a hex nut, and the blur of the turning */ function blade(g, r) { g.beginPath(); g.moveTo(Math.cos(-0.36) * r * 0.24, Math.sin(-0.36) * r * 0.24); g.quadraticCurveTo(Math.cos(-0.5) * r * 0.7, Math.sin(-0.5) * r * 0.7, Math.cos(-0.12) * r, Math.sin(-0.12) * r); g.arc(0, 0, r, -0.12, 0.38); g.quadraticCurveTo(Math.cos(0.08) * r * 0.66, Math.sin(0.08) * r * 0.66, Math.cos(0.26) * r * 0.24, Math.sin(0.26) * r * 0.24); g.closePath(); } function drawFan(g) { const [cx, cy, s] = at(FAN_AT[0], FAN_AT[1], DEEP - 0.015); const R = 0.2 * s * HALF; /* the hole in the back wall the fan sits in */ g.save(); g.beginPath(); g.arc(cx, cy, R * 1.14, 0, Math.PI * 2); const hole = g.createRadialGradient(cx, cy, R * 0.2, cx, cy, R * 1.14); hole.addColorStop(0, 'rgba(0,0,0,0.55)'); hole.addColorStop(0.85, 'rgba(0,0,0,0.42)'); hole.addColorStop(1, 'rgba(0,0,0,0.2)'); g.fillStyle = hole; g.fill(); g.restore(); const lit = steel(lightFrom(REACH.fan), 1); /* how far it turns in one frame: drawn smeared over that turn, as the eye sees it */ const spin = Math.min(Math.PI * 2, fanW * Math.PI * 2 * (REDUCED ? 1 / 60 : frameDt) * 1.3); const copies = Math.max(1, Math.min(22, Math.ceil(spin / 0.06))); g.save(); g.translate(cx, cy); g.fillStyle = rgb(lit.map((c) => c * 0.62)); g.globalAlpha = copies === 1 ? 1 : Math.min(1, 2.2 / copies); for (let c = 0; c < copies; c++) { g.save(); g.rotate((fanA * Math.PI) / 180 - (spin * c) / copies); for (let b = 0; b < 6; b++) { blade(g, R); g.fill(); g.rotate(Math.PI / 3); } g.restore(); } g.globalAlpha = 1; /* the nut */ g.rotate((fanA * Math.PI) / 180); g.beginPath(); for (let i = 0; i < 6; i++) g.lineTo(Math.cos((i * Math.PI) / 3) * R * 0.2, Math.sin((i * Math.PI) / 3) * R * 0.2); g.closePath(); g.fillStyle = rgb(lit.map((c) => c * 0.9)); g.fill(); g.restore(); } /* the lamp, behind a small glass lens in the back wall */ function drawLamp(g) { const [x0, y0] = at(LAMP_AT[0] - 0.065, LAMP_AT[1] - 0.045, DEEP); const [x1, y1] = at(LAMP_AT[0] + 0.065, LAMP_AT[1] + 0.045, DEEP); g.save(); g.beginPath(); g.roundRect(x0, y0, x1 - x0, y1 - y0, 2); const glass = LAMP_COL.map((c) => 0.04 + c * lamp * 7); if (lamp > 0.01) { g.shadowColor = rgba(LAMP_COL.map((c) => c * 4), Math.min(1, lamp)); g.shadowBlur = 10 * k; } g.fillStyle = rgb(glass); g.fill(); g.shadowColor = 'transparent'; g.lineWidth = 0.8; g.strokeStyle = 'rgba(0,0,0,0.45)'; g.stroke(); g.restore(); } /* the shelf: a chrome wire rack resting on the runners */ function drawRack(g) { const front = steel(lightFrom(REACH.rackFront), 1.1); const back = steel(lightFrom(REACH.rackBack), 1.1); g.save(); g.lineCap = 'round'; for (let i = 0; i <= 14; i++) { const x = -0.84 + i * 0.12; const a = at(x, RACK_Y, 0.08); const b = at(x, RACK_Y, DEEP - 0.07); const grad = g.createLinearGradient(a[0], a[1], b[0], b[1]); grad.addColorStop(0, rgb(front)); grad.addColorStop(1, rgb(back)); g.strokeStyle = grad; g.lineWidth = 0.9; g.beginPath(); g.moveTo(a[0], a[1]); g.lineTo(b[0], b[1]); g.stroke(); } for (const [z, w] of [[DEEP - 0.07, 1], [0.5, 1], [0.08, 1.7]]) { const a = at(-0.96, RACK_Y, z); const b = at(0.96, RACK_Y, z); g.strokeStyle = rgb(z < 0.3 ? front.map((c) => c * 1.3) : back); g.lineWidth = w * a[2]; g.beginPath(); g.moveTo(a[0], a[1]); g.lineTo(b[0], b[1]); g.stroke(); } g.restore(); } /* the creases where the walls meet, and the runners pressed into the side walls */ function drawWalls(g) { const corners = [[-1, -BOX], [1, -BOX], [1, BOX], [-1, BOX]]; g.save(); g.lineWidth = 0.8; g.strokeStyle = 'rgba(0,0,0,0.28)'; g.beginPath(); corners.forEach(([x, y], i) => { const b = at(x, y, DEEP); if (i) g.lineTo(b[0], b[1]); else g.moveTo(b[0], b[1]); }); g.closePath(); corners.forEach(([x, y]) => { const a = at(x, y, 0); const b = at(x, y, DEEP); g.moveTo(a[0], a[1]); g.lineTo(b[0], b[1]); }); g.stroke(); for (const side of [-1, 1]) { for (const y of [-0.21, 0.045, RACK_Y + 0.02]) { const a = at(side, y, 0.05); const b = at(side, y, DEEP - 0.03); const wall = wallAt((a[0] + b[0]) / 2, (a[1] + b[1]) / 2); g.lineCap = 'round'; g.lineWidth = 1.6 * ((a[2] + b[2]) / 2); g.strokeStyle = shadeOf(wall, 0.45); g.beginPath(); g.moveTo(a[0], a[1] + 1); g.lineTo(b[0], b[1] + 0.6); g.stroke(); g.strokeStyle = shadeOf(wall, 1.5, 6); g.beginPath(); g.moveTo(a[0], a[1]); g.lineTo(b[0], b[1]); g.stroke(); } } g.restore(); } function paintScene() { const g = sceneCtx; g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, scene.width, scene.height); g.setTransform(k, 0, 0, k, 0, 0); g.imageSmoothingEnabled = true; g.imageSmoothingQuality = 'high'; g.drawImage(mapCanvas, OX, OY, OW, OH); drawWalls(g); drawFan(g); drawLamp(g); drawElement(g, ELEMENTS[3]); drawElement(g, ELEMENTS[2]); drawRack(g); drawElement(g, ELEMENTS[0]); drawElement(g, ELEMENTS[1]); } /* the window: the inside, bent by the hot air, then the door's glass and its black frame */ function paintWindow(time) { const g = ctx; g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, canvas.width, canvas.height); const x0 = Math.round(OX * k); const w = Math.round(OW * k); g.drawImage(scene, 0, 0); if (haze > 0.02) { /* the hot air: each thin row slides sideways, on waves that rise (over the still picture, so a row that slides never leaves a gap at the side) */ const row = Math.max(1, Math.round(1.5 * k)); for (let y = Math.round(OY * k); y < (OY + OH) * k; y += row) { const v = y / k; const up = 0.65 + 0.35 * (1 - (v - OY) / OH); const off = haze * up * (0.7 * Math.sin(v * 0.17 + time * 4.6) + 0.45 * Math.sin(v * 0.061 - time * 2.3 + 1.7)) * k; g.drawImage(scene, x0, y, w, row, x0 + off, y, w, row); } } g.setTransform(k, 0, 0, k, 0, 0); /* two soft reflections on the glass */ g.save(); g.beginPath(); g.roundRect(OX, OY, OW, OH, 6); g.clip(); const shine = g.createLinearGradient(OX, OY, OX + OW * 0.7, OY + OH * 1.3); shine.addColorStop(0, 'rgba(255,255,255,0)'); shine.addColorStop(0.14, 'rgba(255,255,255,0.075)'); shine.addColorStop(0.27, 'rgba(255,255,255,0.01)'); shine.addColorStop(0.62, 'rgba(255,255,255,0)'); shine.addColorStop(0.7, 'rgba(255,255,255,0.04)'); shine.addColorStop(0.76, 'rgba(255,255,255,0)'); g.fillStyle = shine; g.fillRect(OX, OY, OW, OH); g.restore(); /* the frame of black glass round the opening */ g.save(); g.beginPath(); g.rect(0, 0, CW, CH); g.roundRect(OX, OY, OW, OH, 6); g.fillStyle = GLASS; g.fill('evenodd'); const band = g.createLinearGradient(0, 0, 0, CH); band.addColorStop(0, 'rgba(255,255,255,0.075)'); band.addColorStop(0.12, 'rgba(255,255,255,0.015)'); band.addColorStop(1, 'rgba(0,0,0,0.2)'); g.fillStyle = band; g.fill('evenodd'); g.beginPath(); g.roundRect(OX - 0.5, OY - 0.5, OW + 1, OH + 1, 6.5); g.lineWidth = 1; g.strokeStyle = 'rgba(255,255,255,0.07)'; g.stroke(); g.restore(); } /* ---------------------------------------------------------------- the printing round the knob */ const R_ICON = 63; const TICK = [49, 53.5]; /* where the marks start and end, from the middle */ const LATCH = 46.4; /* how far in the mark of the chosen mode reaches: it touches the brass */ const fanGlyph = (r, cy = 0) => [0, 120, 240].map((a) => ``).join(''); const box = ''; const flake = (() => { let d = ''; for (let i = 0; i < 6; i++) { const a = (i * Math.PI) / 3; const ux = Math.sin(a); const uy = -Math.cos(a); d += `M0 0L${(ux * 7.6).toFixed(2)} ${(uy * 7.6).toFixed(2)}`; for (const side of [-1, 1]) { const b = a + side * 0.7; d += `M${(ux * 4.4).toFixed(2)} ${(uy * 4.4).toFixed(2)}L${(ux * 4.4 + Math.sin(b) * 2.7).toFixed(2)} ${(uy * 4.4 - Math.cos(b) * 2.7).toFixed(2)}`; } } return ``; })(); const ART = [ 'Off', '', flake, `${fanGlyph(5.4)}`, `${box}`, `${box}`, `${box}${fanGlyph(3.6, -1.2)}`, ]; const angleOf = (i) => i * PITCH; let marks = ''; for (let i = 0; i <= LAST; i++) { const a = angleOf(i); const x = Math.sin((a * Math.PI) / 180) * R_ICON; const y = -Math.cos((a * Math.PI) / 180) * R_ICON; marks += ``; marks += `${ART[i]}`; } printSvg.innerHTML = marks; const ticks = [...printSvg.querySelectorAll('[data-tick]')]; const icons = [...printSvg.querySelectorAll('[data-icon]')].map((el) => ({ el, art: el.querySelector('.icon__art'), parts: [...el.querySelectorAll('[data-part]')].map((p) => ({ el: p, key: p.dataset.part, was: '' })), })); gsap.set(icons.map((ic) => ic.art), { svgOrigin: '0 0' }); /* ---------------------------------------------------------------- the knob */ /* a pointer of black bakelite on a round body. The light comes from high on the left, so the pointer's shadow always falls down and to the right, and its lit edge stays on the left, whichever way it is turned */ const FIN = 'M-9.5 17C-9.5 25.5 9.5 25.5 9.5 17L3.9-30C3.6-33.6-3.6-33.6-3.9-30Z'; knobSvg.innerHTML = ` `; const finEl = knobSvg.querySelector('[data-fin]'); const finShade = knobSvg.querySelector('[data-fin-shade]'); const grads = [...knobSvg.querySelectorAll('[data-grad]')]; function drawKnob(a) { const t = a.toFixed(2); finEl.setAttribute('transform', `rotate(${t})`); finShade.setAttribute('transform', `translate(2.4 3.4) rotate(${t})`); grads.forEach((gr) => gr.setAttribute('gradientTransform', `rotate(${(-a).toFixed(2)})`)); } /* ---------------------------------------------------------------- the knob's weight and its notches */ /* the hand turns a pretend angle; the knob aims at the notch nearest to it, giving a little (CREEP) on the way, and a spring pulls it there: past the middle between two notches the aim jumps, and the spring throws the knob over */ const hand = { h: 0 }; const knob = { a: 0, w: 0 }; function aim(h) { if (h < 0) return -5 * (1 - Math.exp(h / 10)); if (h > END) return END + 5 * (1 - Math.exp(-(h - END) / 10)); const n = Math.round(h / PITCH); return n * PITCH + (REDUCED ? 0 : CREEP * (h - n * PITCH)); } let mode = -1; let shownA = null; let pendingSay = false; let grab = null; let tween = null; /* a new mode: the mark latches, the symbol jumps, the name rolls in */ let nameTl = null; function engage(n) { const was = mode; mode = n; const m = MODES[n]; dial.setAttribute('aria-valuenow', String(n)); dial.setAttribute('aria-valuetext', m.name); icons.forEach((ic, i) => ic.el.classList.toggle('is-on', i === n)); ticks.forEach((t, i) => t.classList.toggle('is-on', i === n)); const quick = REDUCED || was < 0; if (was >= 0) gsap.to(ticks[was], { attr: { y1: -TICK[0], 'stroke-width': 1.6 }, duration: quick ? 0 : 0.22, ease: 'power2.out', overwrite: 'auto' }); gsap.to(ticks[n], { attr: { y1: -LATCH, 'stroke-width': 2.2 }, duration: quick ? 0 : 0.6, ease: 'elastic.out(1, 0.5)', overwrite: 'auto' }); if (!quick) { /* the symbol is kicked outwards by the pointer arriving, and springs back */ const a = (angleOf(n) * Math.PI) / 180; gsap.timeline() .to(icons[n].art, { scale: 1.26, x: Math.sin(a) * 2.6, y: -Math.cos(a) * 2.6, duration: 0.07, ease: 'power2.out', overwrite: 'auto' }) .to(icons[n].art, { scale: 1, x: 0, y: 0, duration: 0.62, ease: 'elastic.out(1, 0.42)' }); if (was >= 0) gsap.to(icons[was].art, { scale: 1, x: 0, y: 0, duration: 0.2, overwrite: 'auto' }); } writeName(n, was < 0 ? 0 : Math.sign(n - was)); } function writeName(n, dir) { const s = nameEl.firstElementChild; if (nameTl) nameTl.kill(); nameTl = null; if (!dir) { s.textContent = MODES[n].name; lineEl.textContent = MODES[n].line; gsap.set([s, lineEl], { x: 0, opacity: 1 }); return; } nameTl = gsap.timeline({ onComplete: () => (nameTl = null) }) .to(s, { x: REDUCED ? 0 : -dir * 10, opacity: 0, duration: 0.08, ease: 'power1.in' }) .to(lineEl, { opacity: 0, duration: 0.08, ease: 'power1.in' }, 0) .add(() => { s.textContent = MODES[n].name; lineEl.textContent = MODES[n].line; }) .fromTo(s, { x: REDUCED ? 0 : dir * 14, opacity: 0 }, { x: 0, opacity: 1, duration: 0.34, ease: 'power3.out', immediateRender: false }) .to(lineEl, { opacity: 1, duration: 0.3, ease: 'power1.out' }, '<0.05'); } function say() { pendingSay = false; live.textContent = `${MODES[mode].name}. ${MODES[mode].line}`; } function stepKnob(dt) { const n = notchOf(hand.h); if (n !== mode) engage(n); const to = aim(hand.h); if (REDUCED) { knob.a = to; knob.w = 0; } else if (knob.a !== to || knob.w !== 0) { const [stiff, damp] = CLICK; const c = 2 * damp * Math.sqrt(stiff); const steps = Math.max(1, Math.ceil(dt / 0.002)); const h = dt / steps; for (let s = 0; s < steps; s++) { knob.w += (stiff * (to - knob.a) - c * knob.w) * h; knob.a += knob.w * h; } if (Math.abs(to - knob.a) < 0.01 && Math.abs(knob.w) < 0.3) { knob.a = to; knob.w = 0; } } if (knob.a !== shownA) { shownA = knob.a; drawKnob(knob.a); } if (pendingSay && !grab && !tween && knob.w === 0 && knob.a === to) say(); } /* ---------------------------------------------------------------- every frame: the knob and the oven */ let painted = ''; let partsKey = ''; let shimmered = false; function stepOven(dt, time) { const m = MODES[mode]; for (const e of ELEMENTS) { const want = m.heat.includes(e.key) ? e.hot : ROOM; const t = heat[e.key]; if (t !== want) { const tau = Math.max(0.02, want > t ? HEAT[0] : HEAT[1]); heat[e.key] = t + (want - t) * (1 - Math.exp(-dt / tau)); if (Math.abs(want - heat[e.key]) < 0.5) heat[e.key] = want; } } /* the lamp is a small bulb: on at once, off with a short fade */ const lampWant = m.lamp; if (lamp !== lampWant) { lamp += (lampWant - lamp) * (1 - Math.exp(-dt / (lampWant > lamp ? 0.07 : 0.16))); if (Math.abs(lampWant - lamp) < 0.002) lamp = lampWant; } /* the fan spins up in half a second and runs down more slowly */ const fanWant = m.fan ? FAN : 0; if (fanW !== fanWant) { fanW += (fanWant - fanW) * (1 - Math.exp(-dt / (fanWant > fanW ? 0.5 : 1.4))); if (Math.abs(fanWant - fanW) < 0.01) fanW = fanWant; } if (!REDUCED) fanA = (fanA + fanW * dt * 360) % 360; /* the air warms after the elements and cools after them */ const hot = KEYS.reduce((sum, key) => sum + Math.min(1, Math.max(0, (heat[key] - 650) / 330)), 0); const airWant = Math.min(1.2, hot); if (air !== airWant) { air += (airWant - air) * (1 - Math.exp(-dt / 1.8)); if (Math.abs(airWant - air) < 0.003) air = airWant; } haze = REDUCED ? 0 : HAZE * Math.min(1, air); sourcesNow(); const key = source.map((c) => c.map((v) => v.toFixed(4)).join(',')).join(';'); /* the inside is drawn again when its light changes or the fan turns; the window, also while the air shimmers */ const spinning = fanW > 0.004 && !REDUCED; if (key !== painted || spinning) { if (key !== painted) { painted = key; relight(); } paintScene(); paintWindow(time); } else if (haze > 0.02 || shimmered) { paintWindow(time); } shimmered = haze > 0.02; tintIcon(key); } /* the symbol the knob points at takes the colour of what it stands for: its element glows as the oven's does */ const WARM_BULB = [1, 0.62, 0.22]; /* printed ink is not light: a plain mix, back to the screen's gamma */ const ink = (c) => `rgb(${c.map((v) => Math.round(255 * Math.pow(Math.min(1, Math.max(0, v)), 1 / 2.2))).join(',')})`; function tintIcon(key) { const k2 = `${mode}|${key}`; if (k2 === partsKey) return; partsKey = k2; icons.forEach((ic, i) => { for (const p of ic.parts) { let col = ''; if (i === mode) { if (p.key === 'lamp') { const t = lamp * 0.55; col = ink(PRINT.map((c, ch) => c * (1 - t) + WARM_BULB[ch] * t)); } else { const glow = glowOf(heat[p.key]); const t = Math.min(1, glow[0] * 1.3); if (t > 0.01) col = ink(PRINT.map((c, ch) => c * (1 - t) + glow[ch] * 2.2 * t)); } } if (col !== p.was) { p.was = col; p.el.style.color = col; } } }); } let frameDt = 1 / 60; gsap.ticker.add((time, deltaMs) => { const dt = Math.min(deltaMs / 1000, 1 / 30); if (dt <= 0) return; frameDt = dt; stepKnob(dt); stepOven(dt, time); }); /* ---------------------------------------------------------------- the hand on the knob */ /* round the dial the hand turns the knob: the angle is read round its middle, and only the change between two readings is used, so it never jumps. A tap on a symbol turns the knob there */ const middle = () => { const r = dial.getBoundingClientRect(); return [r.left + r.width / 2, r.top + r.height / 2, r.width / 2]; }; const REACH_OUT = 88 / 76; /* the dial answers a little beyond its symbols (see .dial::before) */ const angleAt = (dx, dy) => (Math.atan2(dx, -dy) * 180) / Math.PI; const locked = () => dial.getAttribute('aria-disabled') === 'true'; /* the symbol under a finger: anywhere in its slice of the ring, from the brass outwards, so it is easy to hit */ function iconAt(dx, dy, r) { if (Math.hypot(dx, dy) / r < 0.6) return -1; const a = (angleAt(dx, dy) + 360) % 360; for (let i = 0; i <= LAST; i++) { const off = Math.abs((((a - angleOf(i)) % 360) + 540) % 360 - 180); if (off <= Math.min(22.5, PITCH / 2)) return i; } return -1; } /* pressed: the knob sinks a little under the hand, a symbol under the finger dips */ function press(on) { dial.classList.toggle('is-pressed', on); if (REDUCED) return; gsap.to(hub, on ? { scale: 0.965, duration: 0.12, ease: 'power2.out', overwrite: 'auto' } : { scale: 1, duration: 0.55, ease: 'elastic.out(1, 0.5)', overwrite: 'auto' }); } function pressIcon(i, on) { if (REDUCED || i < 0) return; gsap.to(icons[i].art, on ? { scale: 0.86, duration: 0.1, ease: 'power2.out', overwrite: 'auto' } : { scale: 1, duration: 0.45, ease: 'elastic.out(1, 0.5)', overwrite: 'auto' }); } dial.addEventListener('pointerdown', (e) => { if (grab || locked() || (e.pointerType === 'mouse' && e.button !== 0)) return; const [cx, cy, r] = middle(); const dx = e.clientX - cx; const dy = e.clientY - cy; if (Math.hypot(dx, dy) > r * REACH_OUT) return; const onKnob = Math.hypot(dx, dy) < r * 0.56; grab = { id: e.pointerId, last: angleAt(dx, dy), x: e.clientX, y: e.clientY, moved: 0, icon: onKnob ? -1 : iconAt(dx, dy, r), turning: onKnob }; try { dial.setPointerCapture(e.pointerId); } catch (err) { /* the pointer has gone already */ } if (tween) tween.kill(); tween = null; hand.h = Math.min(END, Math.max(0, hand.h)); dial.classList.add('is-held'); if (onKnob) press(true); else pressIcon(grab.icon, true); }); dial.addEventListener('pointermove', (e) => { if (!grab || e.pointerId !== grab.id) return; const [cx, cy, r] = middle(); const dx = e.clientX - cx; const dy = e.clientY - cy; grab.moved += Math.hypot(e.clientX - grab.x, e.clientY - grab.y); grab.x = e.clientX; grab.y = e.clientY; const now = angleAt(dx, dy); const da = ((now - grab.last + 540) % 360) - 180; grab.last = now; if (!grab.turning && grab.moved > 6) { grab.turning = true; pressIcon(grab.icon, false); press(true); } /* right over the middle the angle means nothing, and a jump through it is not a turn */ if (grab.turning && Math.hypot(dx, dy) > r * 0.1) hand.h = Math.max(-24, Math.min(END + 24, hand.h + Math.max(-60, Math.min(60, da)))); }); function letGo(e) { if (!grab || e.pointerId !== grab.id) return; const tapped = !grab.turning && e.type === 'pointerup' ? grab.icon : -1; if (grab.turning) press(false); else pressIcon(grab.icon, false); grab = null; dial.classList.remove('is-held'); if (tapped >= 0) pretend(tapped); else hand.h = notchOf(hand.h) * PITCH; pendingSay = true; } dial.addEventListener('pointerup', letGo); dial.addEventListener('pointercancel', letGo); /* a pretend hand: it turns the knob to a mode in one smooth gesture, and the notches still click on the way */ function pretend(n, delay = 0) { if (grab) return; const to = Math.min(LAST, Math.max(0, n)) * PITCH; if (tween) tween.kill(); tween = null; if (REDUCED) { hand.h = to; return; } const span = Math.abs(to - hand.h); if (span < 0.5) { hand.h = to; return; } /* fast at first, so the first click comes at once, then easing into the mode */ tween = gsap.to(hand, { h: to, duration: 0.3 + span / 270, delay, ease: 'power2.out', onComplete: () => (tween = null) }); } /* the keys and the wheel: a notch at a time, and the spring throws the knob there */ function stepTo(n) { if (tween) tween.kill(); tween = null; hand.h = Math.min(LAST, Math.max(0, n)) * PITCH; } dial.addEventListener('keydown', (e) => { const moves = { ArrowUp: 1, ArrowRight: 1, ArrowDown: -1, ArrowLeft: -1, PageUp: 3, PageDown: -3 }; let to; if (e.key in moves) to = notchOf(hand.h) + moves[e.key]; else if (e.key === 'Home') to = 0; else if (e.key === 'End') to = LAST; else return; e.preventDefault(); if (grab || locked()) return; stepTo(to); pendingSay = false; }); let wheeled = 0; dial.addEventListener('wheel', (e) => { e.preventDefault(); if (grab || locked()) return; wheeled += e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY; if (Math.abs(wheeled) < 50) return; stepTo(notchOf(hand.h) + (wheeled < 0 ? 1 : -1)); wheeled = 0; pendingSay = true; }, { passive: false }); dial.addEventListener('blur', () => { if (pendingSay) say(); }); /* how the page is being used: the ring of the focus shows for the keys, not after a finger or the mouse */ addEventListener('keydown', () => (document.documentElement.dataset.using = 'keys'), true); addEventListener('pointerdown', () => (document.documentElement.dataset.using = 'pointer'), true); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) turns the knob to another mode, and round they all go */ const PREVIEW = [5, 6, 1, 4, 2, 3]; let turns = 0; oven.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== oven || grab) return; const n = PREVIEW[turns++ % PREVIEW.length]; pretend(n === mode ? (n + 1) % (LAST + 1) : n); }); /* ---------------------------------------------------------------- the size */ fitCanvas(); new ResizeObserver(() => { const want = Math.round(CW * (canvas.clientWidth / CW) * Math.min(2, window.devicePixelRatio || 1)); if (Math.abs(canvas.width - want) > 1) fitCanvas(); }).observe(canvas); /* ---------------------------------------------------------------- it comes in: the oven is turned on */ const FIRST = Math.min(LAST, Math.max(0, Math.round(START))); engage(0); drawKnob(0); if (REDUCED) { hand.h = FIRST * PITCH; gsap.from(oven, { opacity: 0, duration: 0.5, ease: 'power1.out', clearProps: 'opacity' }); } else { gsap.from(oven, { opacity: 0, y: 12, duration: 0.7, ease: 'power3.out', clearProps: 'opacity,transform' }); if (FIRST > 0) pretend(FIRST, 0.45); }