/* The room chart The energy card of a home with solar panels: where a month's energy went, drawn as the house cut open. Every use is a room (the car in the garage, the heat pump, the hot water in the bathroom, the kitchen, the devices in the study) and every room is as wide as its share of the month, so the house is a stacked bar with a roof. Changing the month the four walls slide on springs to their new places, and the lamps hanging from the ceilings swing with the jolt, each one a pendulum pushed by its own ceiling. The use picked with the pointer, a finger or the keys switches its light on: the lamp throws a cone of warm light that swings with it, the room's object starts working and the other rooms go dark, while the figure at the top counts to that use. In January the panels are under snow, which is why so little came from them; in spring it melts. The data is in the script; in a real app it comes from the meter, in the same shape. */ /* ---- valori da cambiare ---- */ const SLIDE = 0.6; /* the seconds the walls take to slide to a new month */ const WALLS = [260, 0.5]; /* the springs that pull the walls along: how stiff, and how much they are held back (1 = no overshoot) */ const SWING = 1; /* how much the lamps swing when the walls move (0 = they hang still) */ const GLOW = 0.75; /* how bright the light is in the room that is lit */ const NIGHT = 0.2; /* how much colour the other rooms keep while one is lit */ const COUNT = 0.7; /* the seconds the numbers take to count to new ones */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const NS = 'http://www.w3.org/2000/svg'; /* the data: five uses in the order of the rooms, left to right, and three months of 2026 in kWh */ const USES = [ { name: 'Car', long: 'Car charging', colour: '--car', icon: 'car' }, { name: 'Heat pump', long: 'Heat pump', colour: '--heat', icon: 'heat' }, { name: 'Hot water', long: 'Hot water', colour: '--water', icon: 'water' }, { name: 'Kitchen', long: 'Kitchen', colour: '--kitchen', icon: 'kitchen' }, { name: 'Devices', long: 'Lights and devices', colour: '--devices', icon: 'devices' }, ]; const MONTHS = [ { name: 'January', solar: 19, snow: 1, kwh: [214, 618, 186, 151, 131] }, { name: 'April', solar: 63, snow: 0, kwh: [252, 218, 134, 124, 112] }, { name: 'July', solar: 88, snow: 0, kwh: [352, 112, 96, 102, 98] }, ]; const UNIT = 'kWh'; const root = document.querySelector('[data-home]'); const monthsEl = root.querySelector('[data-months]'); const thumbEl = root.querySelector('[data-thumb]'); const tabs = [...root.querySelectorAll('[data-month]')]; const valueEl = root.querySelector('[data-value]'); const noteEl = root.querySelector('[data-note]'); const panel = root.querySelector('[data-panel]'); const house = root.querySelector('[data-house]'); const svg = root.querySelector('[data-svg]'); const keyEl = root.querySelector('[data-key]'); const table = root.querySelector('[data-table]'); const said = root.querySelector('[data-said]'); const fmt = (n) => Math.round(n).toLocaleString('en-US'); /* every month: its total, the exact shares that size the rooms, and whole percentages that add up to 100 */ MONTHS.forEach((m) => { m.total = m.kwh.reduce((s, v) => s + v, 0); m.share = m.kwh.map((v) => v / m.total); const raw = m.share.map((s) => s * 100); const pct = raw.map(Math.floor); const order = raw.map((r, i) => [r - pct[i], i]).sort((a, b) => b[0] - a[0]); const short = 100 - pct.reduce((s, v) => s + v, 0); for (let k = 0; k < short; k++) pct[order[k][1]] += 1; m.pct = pct; }); /* ---------------------------------------------------------------- the colours, read from the stylesheet */ const probe = document.createElement('canvas').getContext('2d'); function colour(name) { probe.fillStyle = '#000'; probe.fillStyle = getComputedStyle(document.documentElement).getPropertyValue(name).trim() || '#000'; const s = probe.fillStyle; if (s[0] === '#') return [1, 3, 5].map((k) => parseInt(s.slice(k, k + 2), 16)); return s.match(/[\d.]+/g).slice(0, 3).map(Number); } const CARD = colour('--card'); const mix = (a, b, t) => `rgb(${Math.round(a[0] + (b[0] - a[0]) * t)},${Math.round(a[1] + (b[1] - a[1]) * t)},${Math.round(a[2] + (b[2] - a[2]) * t)})`; /* ---------------------------------------------------------------- the objects in the rooms, drawn on 24 pixels */ /* the parts marked data-run move while the room is lit */ const ICONS = { car: '', heat: '', water: '', kitchen: '', devices: '', }; /* ---------------------------------------------------------------- the house, in pixels */ const H = 164; /* the drawing's height */ const RIDGE = 8; /* the roof's ridge */ const EAVE = 46; /* where the roof meets the walls */ const HIP = 40; /* how far in the ridge starts, at each end */ const SIDE = 8; /* the eaves stick out this much past the walls */ const OUTER = 5; /* the outside walls */ const INNER = 4; /* the walls between the rooms */ const RT = EAVE + 5; /* the rooms' ceiling */ const RB = 154; /* the rooms' floor */ const GROUND = 160; /* the ground */ const CORD = 13; /* the lamps' cords */ const DEEP_C = 7; /* how deep the ceiling looks */ const DEEP_F = 14; /* how deep the floor looks */ let W = 0; /* the drawing is as wide as the card, so nothing in it is scaled */ let avail = 0; /* the width the rooms share */ const el = (tag, attrs = {}, parentEl = null) => { const n = document.createElementNS(NS, tag); for (const k in attrs) n.setAttribute(k, attrs[k]); if (parentEl) parentEl.append(n); return n; }; const defs = el('defs', {}, svg); defs.innerHTML = ` `; const roofG = el('g', { class: 'roof' }, svg); const roofPlane = el('path', { fill: 'var(--roof)' }, roofG); const panelsG = el('g', { fill: 'url(#gs-panel)', stroke: 'rgba(150, 180, 230, 0.16)', 'stroke-width': 0.8 }, roofG); const ridgeEl = el('path', { fill: 'none', stroke: 'var(--wall)', 'stroke-width': 3, 'stroke-linecap': 'round' }, roofG); const snowEl = el('path', { fill: 'var(--snow)', 'clip-path': 'url(#gs-roof)' }, roofG); const eaveEl = el('rect', { fill: 'var(--wall)', height: 4, rx: 2 }, roofG); const shell = el('rect', { fill: 'var(--wall)', rx: 4 }, svg); const groundEl = el('rect', { fill: 'var(--wall)', height: 1 }, svg); const roofClip = defs.querySelector('[data-roof-clip]'); /* a room: its fill, the light clipped to it, its object and its lamp */ const rooms = USES.map((u, i) => { const g = el('g', { class: 'room' }, svg); const clip = el('clipPath', { id: `gs-room-${i}` }, defs); const clipRect = el('rect', { y: RT, height: RB - RT }, clip); const fill = el('rect', { y: RT, height: RB - RT, rx: 2, fill: `var(${u.colour})` }, g); /* the room is a box seen from the front: its ceiling, its floor and its two sides are the back wall, in shadow */ const box = el('g', { fill: '#000' }, g); const ceil = el('path', { 'fill-opacity': 0.34 }, box); const floor = el('path', { 'fill-opacity': 0.22 }, box); const sides = el('path', { 'fill-opacity': 0.12 }, box); const lit = el('g', { 'clip-path': `url(#gs-room-${i})`, opacity: 0 }, g); const halo = el('ellipse', { cy: RT + CORD + 6, rx: 44, ry: 30, fill: 'url(#gs-pool)', opacity: 0.4 }, lit); const pool = el('ellipse', { cy: RB - 1, rx: 30, ry: 6, fill: 'url(#gs-pool)' }, lit); const cone = el('path', { d: `M-5.5 ${CORD + 7}H5.5L46 ${CORD + 118}H-46Z`, fill: 'url(#gs-cone)' }, lit); const icon = el('g', { fill: 'none', 'stroke-width': 1.8, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, g); icon.innerHTML = ICONS[u.icon]; const lamp = el('g', {}, g); const cord = el('path', { d: `M0 0V${CORD}`, 'stroke-width': 1.2 }, lamp); const shade = el('path', { d: `M-7 ${CORD + 7}C-7 ${CORD + 1.5}-3.5 ${CORD} 0 ${CORD}S7 ${CORD + 1.5} 7 ${CORD + 7}Z` }, lamp); const rim = el('path', { d: `M-5.8 ${CORD + 7.2}H5.8`, stroke: 'var(--light)', 'stroke-width': 1.6, 'stroke-linecap': 'round', opacity: 0 }, lamp); const run = {}; icon.querySelectorAll('[data-run]').forEach((n) => (run[n.dataset.run] = n)); return { u, i, g, clipRect, fill, ceil, floor, sides, lit, halo, pool, cone, icon, lamp, cord, shade, rim, run, rgb: colour(u.colour), s: { on: 0 }, /* how much its light is on */ th: 0, om: 0, /* the lamp's angle and how fast it turns */ x: 0, w: 0, t: 0, /* where the room is, and the clock of its object */ }; }); /* the lights' colour, from the stylesheet (stop-color in the markup does not read variables) */ defs.querySelectorAll('#gs-cone stop, #gs-pool stop').forEach((s) => s.setAttribute('stop-color', getComputedStyle(document.documentElement).getPropertyValue('--light').trim())); rooms.forEach((r) => { if (r.run.type) { r.run.type.setAttribute('stroke-dasharray', '9 9'); r.run.type.setAttribute('stroke-dashoffset', '0'); } }); /* ---------------------------------------------------------------- the walls: four springs */ /* c[j] is where wall j stands, as the share of the month to its left: 0 and 1 are the outside walls */ const wall = { c: new Float64Array(6), v: new Float64Array(6), t: new Float64Array(6), a: new Float64Array(6) }; wall.c[5] = wall.t[5] = 1; const K = WALLS[0]; const C = 2 * Math.sqrt(WALLS[0]) * WALLS[1]; /* where each wall is being taken: it slides there with an ease, and the wall follows it on its spring, so it lags a little, overshoots and settles */ const goal = [0, 1, 2, 3, 4, 5].map((j) => ({ v: j / 5 })); function aimWalls(m, instant) { let sum = 0; for (let j = 1; j < 5; j++) { sum += MONTHS[m].share[j - 1]; if (instant) { gsap.killTweensOf(goal[j]); goal[j].v = wall.t[j] = wall.c[j] = sum; wall.v[j] = 0; } else gsap.to(goal[j], { v: sum, duration: SLIDE, delay: (j - 1) * 0.03, ease: 'power2.inOut', overwrite: true }); } wall.still = false; dirty(); } /* where the rooms are, from the walls */ function place() { for (const r of rooms) { r.x = SIDE + OUTER + wall.c[r.i] * avail + r.i * INNER; r.w = Math.max(0, (wall.c[r.i + 1] - wall.c[r.i]) * avail); } } /* ---------------------------------------------------------------- the roof, the panels and the snow */ const hipX = (y) => (HIP * (EAVE - y)) / (EAVE - RIDGE); function buildRoof() { const d = `M0 ${EAVE}L${HIP} ${RIDGE}H${W - HIP}L${W} ${EAVE}Z`; roofPlane.setAttribute('d', d); roofClip.setAttribute('d', `M0 ${EAVE}L${HIP} ${RIDGE - 6}H${W - HIP}L${W} ${EAVE}Z`); ridgeEl.setAttribute('d', `M${HIP} ${RIDGE}H${W - HIP}`); eaveEl.setAttribute('x', 0); eaveEl.setAttribute('y', EAVE - 3); eaveEl.setAttribute('width', W); /* two rows of panels, as many as fit inside the hips of the upper row */ panelsG.textContent = ''; const pw = 22; const ph = 11; const gap = 3; const y0 = RIDGE + 8; const from = hipX(y0) + 6; const n = Math.max(1, Math.floor((W - 2 * from + gap) / (pw + gap))); const x0 = (W - (n * (pw + gap) - gap)) / 2; for (let row = 0; row < 2; row++) { for (let k = 0; k < n; k++) el('rect', { x: x0 + k * (pw + gap), y: y0 + row * (ph + gap), width: pw, height: ph, rx: 1.5 }, panelsG); } } const snow = { d: 0 }; function drawSnow() { const d = snow.d; if (d < 0.005) { snowEl.setAttribute('d', ''); return; } /* a blanket from the ridge down, with a soft wavy edge and a few rounded drips; melting, the edge climbs back to the ridge */ const ys = RIDGE + d * 18; const pts = []; for (let x = W + 4; x >= -4; x -= 8) { let y = ys + d * (2 * Math.sin(x * 0.09) + 1.3 * Math.sin(x * 0.031 + 1.3)); for (let k = 1; k < 9; k++) { const xc = (W * k) / 9 + 9 * Math.sin(k * 2.7); y += d * 3.4 * Math.exp(-(((x - xc) / 5) ** 2)); } pts.push([x, y]); } let p = `M${HIP - 3} ${RIDGE - 1.5 - 2.5 * d}Q${W / 2} ${RIDGE - 4.5 * d} ${W - HIP + 3} ${RIDGE - 1.5 - 2.5 * d}L${pts[0][0]} ${pts[0][1].toFixed(1)}`; for (let k = 1; k < pts.length - 1; k++) { const mx = (pts[k][0] + pts[k + 1][0]) / 2; const my = (pts[k][1] + pts[k + 1][1]) / 2; p += `Q${pts[k][0]} ${pts[k][1].toFixed(1)} ${mx} ${my.toFixed(1)}`; } snowEl.setAttribute('d', `${p}L${pts[pts.length - 1][0]} ${pts[pts.length - 1][1].toFixed(1)}Z`); } /* ---------------------------------------------------------------- the size */ function fit() { const w = Math.round(house.clientWidth); if (!w || w === W) return false; W = w; avail = W - 2 * SIDE - 2 * OUTER - 4 * INNER; svg.setAttribute('viewBox', `0 0 ${W} ${H}`); buildRoof(); shell.setAttribute('x', SIDE); shell.setAttribute('y', EAVE - 1); shell.setAttribute('width', W - 2 * SIDE); shell.setAttribute('height', GROUND - EAVE + 1); groundEl.setAttribute('x', 0); groundEl.setAttribute('y', GROUND); groundEl.setAttribute('width', W); drawSnow(); dirty(); return true; } /* ---------------------------------------------------------------- which use is lit */ const glow = { night: 0 }; /* how dark the other rooms are */ let monthI = 0; let hoverI = -1; /* the room under the mouse */ let pinI = -1; /* the room picked with a click, a finger or the keys */ let litI = -1; const keyItems = USES.map((u, i) => { const b = document.createElement('button'); b.type = 'button'; b.className = 'key__item'; b.style.setProperty('--c', `var(${u.colour})`); b.tabIndex = i === 0 ? 0 : -1; b.setAttribute('aria-pressed', 'false'); b.innerHTML = `0%`; b.querySelector('.key__name').textContent = u.name; keyEl.append(b); return { b, valueEl: b.querySelector('.key__value'), shown: { v: 0 } }; }); const shown = { v: 0 }; function count(to, duration) { if (REDUCED || !duration) { gsap.killTweensOf(shown); shown.v = to; valueEl.textContent = fmt(to); return; } gsap.to(shown, { v: to, duration, ease: 'power3.out', overwrite: true, onUpdate: () => (valueEl.textContent = fmt(shown.v)) }); } function note(text, slide) { if (noteEl.textContent === text) return; noteEl.textContent = text; if (!slide) return; gsap.fromTo(noteEl, { opacity: 0, y: REDUCED ? 0 : 4 }, { opacity: 1, y: 0, duration: 0.3, ease: 'power3.out', overwrite: true }); } const restNote = () => `In ${MONTHS[monthI].name}, ${MONTHS[monthI].solar}% came from your panels`; const useNote = (i) => `${USES[i].long}, ${MONTHS[monthI].pct[i]}% of ${MONTHS[monthI].name}`; function lightUp() { const i = hoverI >= 0 ? hoverI : pinI; if (i === litI) return; litI = i; rooms.forEach((r, j) => { const on = j === i ? 1 : 0; gsap.to(r.s, { on, duration: REDUCED ? 0.2 : on ? 0.22 : 0.3, ease: on ? 'power2.out' : 'power2.inOut', overwrite: true, onUpdate: dirty }); }); gsap.to(glow, { night: i >= 0 ? 1 : 0, duration: 0.3, ease: 'power2.out', overwrite: true, onUpdate: dirty }); keyEl.classList.toggle('is-lit', i >= 0); keyItems.forEach((k, j) => k.b.classList.toggle('is-on', j === i)); if (i >= 0) { count(MONTHS[monthI].kwh[i], 0.35); note(useNote(i), false); } else { count(MONTHS[monthI].total, 0.45); note(restNote(), false); } } function pin(i, aloud) { pinI = i; keyItems.forEach((k, j) => k.b.setAttribute('aria-pressed', String(j === i))); lightUp(); if (aloud && i >= 0) { const m = MONTHS[monthI]; said.textContent = `${USES[i].long}: ${fmt(m.kwh[i])} ${UNIT}, ${m.pct[i]}% of ${m.name}.`; } } /* ---------------------------------------------------------------- the months */ function thumbTo(instant) { const b = tabs[monthI]; gsap.to(thumbEl, { x: b.offsetLeft, width: b.offsetWidth, duration: instant || REDUCED ? 0 : 0.5, ease: 'back.out(1.5)', overwrite: true }); } tabs.forEach((t, i) => { t.id = `home-tab-${i}`; t.addEventListener('click', () => { if (preview) preview.kill(); choose(i); }); t.addEventListener('keydown', (e) => { const k = { ArrowRight: 1, ArrowLeft: -1 }[e.key]; if (!k) return; e.preventDefault(); const j = (i + k + tabs.length) % tabs.length; tabs[j].focus(); choose(j); }); }); function fillTable() { const m = MONTHS[monthI]; table.textContent = ''; table.createCaption().textContent = `Home energy use in ${m.name} 2026`; const head = table.createTHead().insertRow(); ['Use', `Energy (${UNIT})`, 'Share'].forEach((text) => { const th = document.createElement('th'); th.scope = 'col'; th.textContent = text; head.append(th); }); const body = table.createTBody(); USES.map((u, i) => [u.long, fmt(m.kwh[i]), `${m.pct[i]}%`]).concat([['Total', fmt(m.total), '100%']]).forEach((cells) => { const row = body.insertRow(); const th = document.createElement('th'); th.scope = 'row'; th.textContent = cells[0]; row.append(th); row.insertCell().textContent = cells[1]; row.insertCell().textContent = cells[2]; }); } let preview = null; function choose(i, first = false) { if (i === monthI && !first) return; monthI = i; const m = MONTHS[i]; tabs.forEach((t, j) => { t.setAttribute('aria-selected', String(j === i)); t.tabIndex = j === i ? 0 : -1; }); panel.setAttribute('aria-labelledby', tabs[i].id); thumbTo(first); fillTable(); /* the numbers in the key count to the new shares */ keyItems.forEach((k, j) => { k.b.setAttribute('aria-label', `${USES[j].name} ${m.pct[j]}%, ${fmt(m.kwh[j])} ${UNIT}`); const set = () => (k.valueEl.textContent = `${Math.round(k.shown.v)}%`); if (REDUCED) { k.shown.v = m.pct[j]; set(); } else gsap.to(k.shown, { v: m.pct[j], duration: first ? 1.1 : COUNT, delay: first ? 0.35 : 0, ease: 'power3.out', overwrite: true, onUpdate: set }); }); const lit = litI; if (lit >= 0) { count(m.kwh[lit], first ? 1.1 : COUNT); note(useNote(lit), !first); } else { count(m.total, first ? 1.2 : COUNT); note(restNote(), !first); } if (!first) said.textContent = `${m.name}: ${fmt(m.total)} ${UNIT} in all, ${m.solar}% from your panels.`; /* the snow falls in January and melts in spring; with less movement it changes while the house is faded out */ const settle = () => { snow.d = m.snow; drawSnow(); }; if (!REDUCED) gsap.to(snow, { d: m.snow, duration: m.snow ? 1.1 : 1.3, delay: first ? 0.6 : 0, ease: m.snow ? 'power2.out' : 'sine.inOut', overwrite: true, onUpdate: drawSnow }); else if (first) settle(); if (first) return; if (REDUCED) { /* no movement: the house fades out, changes, and fades back in */ gsap.timeline() .to(svg, { opacity: 0, duration: 0.16, ease: 'power1.in', overwrite: true }) .call(() => { aimWalls(i, true); settle(); }) .to(svg, { opacity: 1, duration: 0.3, ease: 'power1.out' }); } else aimWalls(i, false); } /* ---------------------------------------------------------------- every frame: walls, lamps, lights */ let needs = true; function dirty() { needs = true; } const G = 981; /* gravity, if a pixel were a centimetre */ const OMEGA = Math.sqrt(G / 18); /* a lamp 18 centimetres long */ const LAMP_DAMP = 2 * 0.24 * OMEGA; const PUSH = 0.4 * SWING; /* how hard a moving ceiling pushes its lamp */ gsap.ticker.add((time, ms) => { const dt = Math.min(ms / 1000, 1 / 30); const n = Math.max(1, Math.ceil(dt / (1 / 240))); const h = dt / n; let moving = false; for (let j = 1; j < 5; j++) { if (wall.t[j] !== goal[j].v) { wall.t[j] = goal[j].v; wall.still = false; } } if (!wall.still || rooms.some((r) => r.th !== 0 || r.om !== 0)) { let calm = true; for (let s = 0; s < n; s++) { for (let j = 1; j < 5; j++) { if (REDUCED) { wall.c[j] = wall.t[j]; wall.v[j] = 0; wall.a[j] = 0; continue; } const a = K * (wall.t[j] - wall.c[j]) - C * wall.v[j]; wall.a[j] = a; wall.v[j] += a * h; wall.c[j] += wall.v[j] * h; } /* every lamp is a pendulum, and its ceiling moves with the middle of its room */ for (const r of rooms) { const ax = ((wall.a[r.i] + wall.a[r.i + 1]) / 2) * avail; const al = -OMEGA * OMEGA * (Math.sin(r.th) + PUSH * (ax / G) * Math.cos(r.th)) - LAMP_DAMP * r.om; r.om += al * h; r.th = Math.max(-0.75, Math.min(0.75, r.th + r.om * h)); } } for (let j = 1; j < 5; j++) { if (Math.abs(wall.t[j] - wall.c[j]) < 1e-5 && Math.abs(wall.v[j]) < 1e-4) { wall.c[j] = wall.t[j]; wall.v[j] = 0; wall.a[j] = 0; } else calm = false; } wall.still = calm; for (const r of rooms) { if (calm && Math.abs(r.th) < 0.002 && Math.abs(r.om) < 0.01) { r.th = 0; r.om = 0; } } moving = true; } /* the object in the lit room works while its light is on */ for (const r of rooms) { if (r.s.on > 0.01 && !REDUCED) { r.t += dt * r.s.on; moving = true; } } if (moving || needs) { needs = false; draw(); } }); function draw() { if (!W) return; place(); for (const r of rooms) { const on = r.s.on; const dim = glow.night * (1 - on); const cx = r.x + r.w / 2; r.fill.setAttribute('x', r.x.toFixed(2)); r.fill.setAttribute('width', r.w.toFixed(2)); r.fill.setAttribute('fill-opacity', (1 - dim * (1 - NIGHT)).toFixed(3)); const x0 = r.x.toFixed(2); const x1 = (r.x + r.w).toFixed(2); const dx = Math.min(7, r.w * 0.14); const a0 = (r.x + dx).toFixed(2); const a1 = (r.x + r.w - dx).toFixed(2); r.ceil.setAttribute('d', `M${x0} ${RT}H${x1}L${a1} ${RT + DEEP_C}H${a0}Z`); r.floor.setAttribute('d', `M${x0} ${RB}H${x1}L${a1} ${RB - DEEP_F}H${a0}Z`); r.sides.setAttribute('d', `M${x0} ${RT}L${a0} ${RT + DEEP_C}V${RB - DEEP_F}L${x0} ${RB}ZM${x1} ${RT}L${a1} ${RT + DEEP_C}V${RB - DEEP_F}L${x1} ${RB}Z`); r.clipRect.setAttribute('x', r.x.toFixed(2)); r.clipRect.setAttribute('width', r.w.toFixed(2)); /* the ink of the object and the lamp: dark on a bright room, the room's colour on a dark one */ const ink = mix(CARD, r.rgb, dim); r.icon.setAttribute('stroke', ink); r.cord.setAttribute('stroke', ink); r.shade.setAttribute('fill', ink); const deg = (-r.th * 180) / Math.PI; r.lamp.setAttribute('transform', `translate(${cx.toFixed(2)} ${RT}) rotate(${deg.toFixed(2)})`); /* the object stands on the floor, smaller in a narrow room */ const sc = Math.min(1, (r.w - 6) / 24); r.icon.setAttribute('transform', `translate(${(cx - 12 * sc).toFixed(2)} ${(RB - 6 - 24 * sc).toFixed(2)}) scale(${Math.max(0.01, sc).toFixed(3)})`); r.rim.setAttribute('opacity', on.toFixed(3)); r.lit.setAttribute('opacity', (on * GLOW).toFixed(3)); if (on > 0.005) { r.cone.setAttribute('transform', `translate(${cx.toFixed(2)} ${RT}) rotate(${deg.toFixed(2)})`); const reach = RB - RT - CORD - 7; r.pool.setAttribute('cx', (cx + Math.tan(r.th) * reach).toFixed(2)); r.halo.setAttribute('cx', (cx - Math.sin(r.th) * (CORD + 6)).toFixed(2)); r.pool.setAttribute('rx', Math.min(34, r.w / 2 + 6).toFixed(1)); } /* the object works while the light is on, and goes back to rest once it is off */ if (on > 0.005 || r.working) { r.working = on > 0.005; work(r); } } } /* the objects at work: the fan turns, the shower runs, the pot steams, the laptop types, the cable charges; at rest each one is the same drawing as in the key */ function work(r) { /* the clock runs as fast as the light is on, so everything slows down and settles as it goes off */ const t = r.t; const k = r.s.on; const run = r.run; if (run.fan) run.fan.setAttribute('transform', `rotate(${((t * 540) % 360).toFixed(1)} 9 11.5)`); /* the water and the charge run as dashes whose gaps open with the light: with no light they close into a line */ for (const [part, dash, gap, speed] of [[run.stream, 2.2, 2.6, -14], [run.cable, 1.6, 2.2, 9]]) { if (!part) continue; part.setAttribute('stroke-dasharray', `${dash} ${(gap * k).toFixed(3)}`); part.setAttribute('stroke-dashoffset', (t * speed).toFixed(2)); } if (run.steam) { const c = (t * 0.9) % 1; run.steam.setAttribute('transform', `translate(0 ${((1.5 - c * 2.5) * k).toFixed(2)})`); run.steam.setAttribute('opacity', (1 - k + k * Math.sin(c * Math.PI)).toFixed(3)); } if (run.type) { const c = (t * 0.55) % 1; run.type.setAttribute('stroke-dashoffset', ((9 - Math.min(1, c * 1.6) * 9) * k).toFixed(2)); } } /* ---------------------------------------------------------------- pointer, finger and keys */ function roomAt(clientX) { const box = svg.getBoundingClientRect(); const x = ((clientX - box.left) / box.width) * W; place(); for (const r of rooms) if (x < r.x + r.w + INNER / 2) return r.i; return rooms.length - 1; } let pressed = false; let letGo = false; house.addEventListener('pointermove', (e) => { if (e.pointerType === 'mouse') { hoverI = roomAt(e.clientX); lightUp(); } else if (pressed) { const i = roomAt(e.clientX); if (i !== pinI) { letGo = false; pin(i, false); } } }); house.addEventListener('pointerleave', (e) => { if (e.pointerType !== 'mouse') return; hoverI = -1; lightUp(); }); house.addEventListener('pointerdown', (e) => { if (e.pointerType === 'mouse') return; pressed = true; const i = roomAt(e.clientX); letGo = i === pinI; if (!letGo) pin(i, false); }); house.addEventListener('pointerup', (e) => { if (e.pointerType === 'mouse') return; pressed = false; pin(letGo ? -1 : pinI, true); }); house.addEventListener('pointercancel', () => (pressed = false)); house.addEventListener('click', (e) => { if (e.pointerType && e.pointerType !== 'mouse') return; if (!e.detail) return; const i = roomAt(e.clientX); pin(i === pinI ? -1 : i, true); }); /* the key: hover lights a room, a click or a tap keeps it lit, the arrows walk through the rooms */ keyItems.forEach((k, i) => { k.b.addEventListener('pointerenter', (e) => { if (e.pointerType !== 'mouse') return; hoverI = i; lightUp(); }); k.b.addEventListener('click', () => pin(i === pinI ? -1 : i, true)); k.b.addEventListener('focus', () => { keyItems.forEach((o, j) => (o.b.tabIndex = j === i ? 0 : -1)); if (k.b.matches(':focus-visible') && pinI !== i) pin(i, true); }); k.b.addEventListener('keydown', (e) => { const n = USES.length; let j = null; if (e.key === 'ArrowRight' || e.key === 'ArrowDown') j = (i + 1) % n; else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') j = (i - 1 + n) % n; else if (e.key === 'Home') j = 0; else if (e.key === 'End') j = n - 1; else if (e.key === 'Escape') pin(-1, false); if (j === null) return; e.preventDefault(); keyItems[j].b.focus(); pin(j, true); }); }); keyEl.addEventListener('pointerleave', (e) => { if (e.pointerType !== 'mouse') return; hoverI = -1; lightUp(); }); /* tabbing out of the card switches the light off; going back to the months keeps it, to see the same use in another month */ let pressedAt = -1e9; keyEl.addEventListener('focusout', (e) => { const to = e.relatedTarget; /* no new focus and no press: the keys took the focus out of the page */ const away = to ? !keyEl.contains(to) && !monthsEl.contains(to) : performance.now() - pressedAt > 300; if (away) pin(-1, false); }); /* a tap or a click anywhere else switches the light off */ document.addEventListener('pointerdown', (e) => { pressedAt = performance.now(); if (pinI >= 0 && !house.contains(e.target) && !keyEl.contains(e.target) && !monthsEl.contains(e.target)) pin(-1, false); }, true); /* the library's preview: a click from a script (detail 0) on the months picks the next one, and once the walls have moved the light goes on in the room that grew the most */ monthsEl.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== monthsEl) return; const from = MONTHS[monthI]; const next = (monthI + 1) % MONTHS.length; choose(next); const to = MONTHS[next]; let best = 0; to.share.forEach((s, j) => s - from.share[j] > to.share[best] - from.share[best] && (best = j)); if (preview) preview.kill(); preview = gsap.delayedCall(REDUCED ? 0.5 : 0.95, () => pin(best, false)); }); /* ---------------------------------------------------------------- the size, and the typeface arriving */ new ResizeObserver(() => { if (fit()) draw(); }).observe(house); new ResizeObserver(() => thumbTo(true)).observe(monthsEl); if (document.fonts) document.fonts.ready.then(() => thumbTo(true)); /* ---------------------------------------------------------------- it comes in: the walls find their places */ fit(); for (let j = 1; j < 5; j++) wall.c[j] = wall.t[j] = goal[j].v; choose(0, true); if (REDUCED) { aimWalls(0, true); gsap.from(root, { opacity: 0, duration: 0.5, clearProps: 'opacity' }); } else { gsap.from(root, { y: 14, opacity: 0, duration: 0.7, ease: 'power3.out', clearProps: 'transform,opacity' }); gsap.delayedCall(0.35, () => aimWalls(0, false)); } draw();