Distillation and the azeotrope: no pot still passes 95.6 % ethanol by weight

// game.js: a pot still. Wine boils over a flame, the vapor condenses, and the drops fill glass after glass.
// Pour back runs the full glasses again. Units: moles, liters, kilowatts, seconds of still time, °C.
// The notebook writes every number into #data: the x-y and boiling-point tables, the density table, the constants.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {x_grid: XG, y_table: YG, t_table: TG, w_table: WT, rho_table: RT} = DATA;
const {m_e: ME, m_w: MW, dh_e: DHE, dh_w: DHW, cp_e: CPE, cp_w: CPW} = DATA;
const {dt: DT, speed: SPEED, glasses: GLASSES, dry: DRY, min_ml: MIN_ML, t_room: T_ROOM} = DATA;

// ---- tables: linear interpolation, the same as np.interp in the notebook
function interp(x, xs, ys) {
  if (x <= xs[0]) return ys[0];
  if (x >= xs[xs.length - 1]) return ys[ys.length - 1];
  let lo = 0, hi = xs.length - 1;
  while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (xs[mid] <= x) lo = mid; else hi = mid; }
  return ys[lo] + (ys[hi] - ys[lo]) * (x - xs[lo]) / (xs[hi] - xs[lo]);
}
const massFraction = (n, e) => e * ME / (e * ME + (n - e) * MW);
const abv = (w) => 100 * w * interp(w, WT, RT) / RT[RT.length - 1];       // % by volume at 20 °C
const liters = (n, e) => (e * ME + (n - e) * MW) / interp(massFraction(n, e), WT, RT);
const boilingPoint = (n, e) => interp(e / n, XG, TG);

// ---- the state: everything that changes, in one object
const state = {heat: DATA.heat, n: 0, e: 0, n0: 0, glassL: 0, T: T_ROOM, phase: "warming", glass: {n: 0, e: 0},
  full: [], run: 1, t: 0, running: true, drip: 0};

function charge(n, e, run) {                            // a cold pot, its glasses a twentieth of the charge
  Object.assign(state, {n, e, n0: n, glassL: liters(n, e) / GLASSES, T: T_ROOM, phase: "warming",
    glass: {n: 0, e: 0}, full: [], run, t: 0});
}
const reset = () => { charge(DATA.n0, DATA.e0, 1); state.heat = DATA.heat; render(); };

// ---- the two time equations: dN/dt = -Q/Δh, d(Nx)/dt = -y Q/Δh
function slope(n, e) {
  const y = interp(e / n, XG, YG), boil = state.heat / (y * DHE + (1 - y) * DHW);   // mol/s
  return [-boil, -y * boil];
}

// one Runge-Kutta step: four slopes, averaged; the distillate goes into the glass under the outlet
function step(h) {
  const s = state;
  if (s.phase === "dry") return;                       // the flame is out; the clock stops with it
  if (s.phase === "warming") {
    const w = massFraction(s.n, s.e), kg = (s.e * ME + (s.n - s.e) * MW) / 1000;
    s.T += s.heat * h / (kg * (w * CPE + (1 - w) * CPW));
    if (s.T >= boilingPoint(s.n, s.e)) s.phase = "boiling";
  } else {
    h = Math.min(h, (s.n - DRY * s.n0) / -slope(s.n, s.e)[0]);   // the last step ends at the dry mark
    const k1 = slope(s.n, s.e);
    const k2 = slope(s.n + h / 2 * k1[0], s.e + h / 2 * k1[1]);
    const k3 = slope(s.n + h / 2 * k2[0], s.e + h / 2 * k2[1]);
    const k4 = slope(s.n + h * k3[0], s.e + h * k3[1]);
    const dn = h / 6 * (k1[0] + 2 * k2[0] + 2 * k3[0] + k4[0]), de = h / 6 * (k1[1] + 2 * k2[1] + 2 * k3[1] + k4[1]);
    s.n += dn; s.e += de;
    collect(-dn, -de);
    s.T = boilingPoint(s.n, s.e);
    if (s.n <= 1.001 * DRY * s.n0) s.phase = "dry";     // the flame goes out, as the notebook's event stops solve_ivp
  }
  s.t += h;
}

// A step that overfills the glass is split in proportion to volume: the rest goes on into the next glass.
function collect(dn, de) {
  const g = state.glass, before = g.n > 0 ? liters(g.n, g.e) : 0, after = liters(g.n + dn, g.e + de);
  if (after < state.glassL) { g.n += dn; g.e += de; return; }
  const f = (state.glassL - before) / (after - before);
  state.full.push({n: g.n + f * dn, e: g.e + f * de});
  state.glass = {n: 0, e: 0};
  collect((1 - f) * dn, (1 - f) * de);
}

// Pour back: every full glass into the pot, residue and the half-filled glass away, a cold start
const fullVolume = () => state.full.reduce((v, g) => v + liters(g.n, g.e), 0);
const canPour = () => state.full.length > 0 && 1000 * fullVolume() >= MIN_ML;
function pourBack() {
  if (!canPour()) return;
  const n = state.full.reduce((a, g) => a + g.n, 0), e = state.full.reduce((a, g) => a + g.e, 0);
  charge(n, e, state.run + 1);
  render();
}

// ---- colors: the page's palette, and cividis for strength (0 to 100 % ABV)
function colors() {
  const css = getComputedStyle(document.documentElement);
  return Object.fromEntries(["bg", "fg", "ink", "accent", "second", "muted"].map((k) => [k, css.getPropertyValue(`--${k}`).trim()]));
}
function strengthColor(a) {
  const stops = DATA.cividis, u = Math.min(Math.max(a / 100, 0), 1) * (stops.length - 1), i = Math.min(Math.floor(u), stops.length - 2);
  const mix = stops[i].map((c, j) => Math.round(c + (stops[i + 1][j] - c) * (u - i)));
  return `rgb(${mix.join(",")})`;
}

// ---- drawing: the notebook's draw_still in the same units; the still is 6.2 wide and 6.2 tall, the shelf of
// full glasses and the color bar stand to its right in a wide frame and below it in an upright one
const $ = (id) => document.getElementById(id);
const canvas = $("scene");
let dpr = 1;
const WIDE = {box: [0, 10, 0, 6.2], shelf: [6.2, 0.15], bar: [9.5, 2.2, 2.3]};      // shelf: left, bottom
const TALL = {box: [0, 6.2, -2.5, 6.2], shelf: [0.5, -1.2], bar: [5.75, -2.3, 2.0]}; // bar: left, bottom, height

function layout() {
  dpr = window.devicePixelRatio || 1;
  const box = canvas.getBoundingClientRect();
  canvas.width = Math.round(box.width * dpr);
  canvas.height = Math.round(box.height * dpr);
  render();
}

function drawScene(c) {
  const s = state, ctx = canvas.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  const W = canvas.width / dpr, H = canvas.height / dpr;
  const L = H > 1.1 * W ? TALL : WIDE, [x0, x1, y0, y1] = L.box;
  const k = Math.min(W / (x1 - x0), H / (y1 - y0));
  ctx.fillStyle = c.bg;
  ctx.fillRect(0, 0, W, H);
  const X = (x) => (W - (x1 - x0) * k) / 2 + (x - x0) * k, Y = (y) => (H + (y1 - y0) * k) / 2 - (y - y0) * k;
  const path = (pts) => { ctx.beginPath(); pts.forEach(([x, y], i) => i ? ctx.lineTo(X(x), Y(y)) : ctx.moveTo(X(x), Y(y))); };
  const box = (xa, ya, xb, yb) => { ctx.beginPath(); ctx.rect(X(xa), Y(yb), (xb - xa) * k, (yb - ya) * k); };
  ctx.lineJoin = "round";

  if (s.phase !== "dry") {                              // the flame grows with the heat
    const h = 0.25 + 0.3 * s.heat;
    ctx.fillStyle = c.accent;
    for (const fx of [1.4, 2.0, 2.6]) { path([[fx - 0.2, 0.15], [fx, 0.15 + h], [fx + 0.2, 0.15]]); ctx.fill(); }
  }
  ctx.globalAlpha = 0.35;                               // the pot's liquid, its height relative to the run's charge
  ctx.fillStyle = c.second;
  box(0.8, 0.9, 3.2, 0.9 + 2.2 * s.n / s.n0); ctx.fill();
  ctx.globalAlpha = 0.12;                               // cooling water in the tub
  box(4.6, 2.2, 6.0, 4.5); ctx.fill();
  ctx.globalAlpha = 1;
  ctx.strokeStyle = c.muted; ctx.lineWidth = 1.5;
  box(4.6, 2.2, 6.0, 4.5); ctx.stroke();
  path([[1.25, 4.3], [1.25, 1.2]]); ctx.stroke();       // the thermometer, its bulb in the liquid
  ctx.fillStyle = c.second;
  ctx.beginPath(); ctx.arc(X(1.25), Y(1.2), 0.1 * k, 0, 2 * Math.PI); ctx.fill();

  ctx.strokeStyle = c.ink; ctx.lineWidth = 2;           // pot, dome, swan neck, coil, outlet
  path([[0.8, 3.3], [0.8, 0.9], [3.2, 0.9], [3.2, 3.3]]); ctx.stroke();
  path(Array.from({length: 21}, (_, i) => { const u = i / 20; return [0.8 + 2.4 * u, 3.3 + 0.8 * (1 - (2 * u - 1) ** 2)]; })); ctx.stroke();
  ctx.lineWidth = 3;
  path([[2.0, 4.1], [2.0, 4.9], [2.4, 5.3], [4.9, 5.3], [5.3, 4.9], [5.3, 4.5]]); ctx.stroke();
  ctx.lineWidth = 1.8;
  path(Array.from({length: 49}, (_, i) => [5.3 + 0.45 * Math.sin(i / 48 * 12 * Math.PI), 4.5 - 2.3 * i / 48])); ctx.stroke();
  path([[5.3, 2.2], [5.3, 1.85]]); ctx.stroke();

  if (s.phase === "boiling") {                          // three drops, colored by the vapor's strength
    const y = interp(s.e / s.n, XG, YG);
    ctx.fillStyle = strengthColor(abv(massFraction(1, y)));
    ctx.strokeStyle = c.muted; ctx.lineWidth = 1;       // a rim, so that a weak, dark drop shows on the dark page
    for (let j = 0; j < 3; j++) {
      const u = (s.drip + j / 3) % 1;
      ctx.beginPath(); ctx.arc(X(5.3), Y(1.75 - 0.5 * u), 0.07 * k, 0, 2 * Math.PI); ctx.fill(); ctx.stroke();
    }
  }
  const glass = (xa, xb, bottom, top, fill, a) => {     // a glass, filled from the bottom
    if (fill > 0) { ctx.fillStyle = strengthColor(a); box(xa, bottom, xb, bottom + (top - bottom) * Math.min(fill, 1)); ctx.fill(); }
    ctx.strokeStyle = c.ink; ctx.lineWidth = 1.2;
    path([[xa, top], [xa, bottom], [xb, bottom], [xb, top]]); ctx.stroke();
  };
  const g = s.glass;
  glass(4.95, 5.65, 0.15, 1.15, g.n > 0 ? liters(g.n, g.e) / s.glassL : 0, g.n > 0 ? abv(massFraction(g.n, g.e)) : 0);
  const font = Math.max(14, Math.round(0.3 * k)), u = font / k;   // u: one line of text in scene units
  ctx.font = `${font}px system-ui, sans-serif`;
  ctx.textAlign = "center"; ctx.textBaseline = "bottom";
  const [sx, sy] = L.shelf, shown = s.full.slice(-6), first = s.full.length - shown.length;
  shown.forEach((fg, i) => {                            // the last six full glasses, each with its ABV
    const xa = sx + 0.62 * i, a = abv(massFraction(fg.n, fg.e));
    glass(xa, xa + 0.5, sy, sy + 0.8, 1, a);
    ctx.fillStyle = c.fg;
    ctx.fillText(a.toFixed(0), X(xa + 0.25), Y(sy + 0.85));
  });
  ctx.textAlign = "left"; ctx.fillStyle = c.muted;
  if (s.full.length) {                                  // which glasses the shelf shows: above it, or under it
    const label = first ? `glasses ${first + 1} to ${s.full.length}` : `${s.full.length} full`;
    if (L === WIDE) ctx.fillText(label, X(sx), Y(sy + 0.9 + u));
    else { ctx.textBaseline = "top"; ctx.fillText(label, X(sx), Y(sy - 0.1)); }
  }

  const [bx, by, bh] = L.bar;                           // the color bar, 0 to 100 % ABV, and the azeotrope on it
  for (let i = 0; i < 40; i++) {
    ctx.fillStyle = strengthColor(100 * (i + 0.5) / 40);
    box(bx, by + bh * i / 40, bx + 0.25, by + bh * (i + 1) / 40 + 0.01); ctx.fill();
  }
  const yl = by + bh * DATA.limit_abv / 100;
  ctx.strokeStyle = c.fg; ctx.lineWidth = 2;
  path([[bx - 0.12, yl], [bx + 0.37, yl]]); ctx.stroke();
  ctx.fillStyle = c.muted; ctx.textAlign = "right"; ctx.textBaseline = "middle";
  ctx.fillText("0 % ABV", X(bx - 0.15), Y(by));
  ctx.fillText("50", X(bx - 0.15), Y(by + bh / 2));
  ctx.fillStyle = c.fg;
  ctx.fillText(`limit ${DATA.limit_abv.toFixed(1)}`, X(bx - 0.15), Y(yl));
  ctx.fillStyle = c.second; ctx.textAlign = "left";
  ctx.font = `${Math.round(font * 1.25)}px system-ui, sans-serif`;
  ctx.fillText(`${s.T.toFixed(1)} °C`, X(0.1), Y(5.5));
}

const clock = (t) => `${Math.floor(t / 3600)}:${String(Math.floor(t / 60) % 60).padStart(2, "0")} h`;

function render() {
  const s = state, c = colors();
  drawScene(c);
  const g = s.glass, w = g.n > 0 ? massFraction(g.n, g.e) : null;
  $("pot").textContent = `pot ${s.T.toFixed(1)} °C, ${liters(s.n, s.e).toFixed(2)} L`;
  $("cup").textContent = `glass ${s.full.length + 1}: ` + (w === null ? "empty" : `${abv(w).toFixed(1)} % ABV (${(100 * w).toFixed(1)} % by weight)`);
  $("run").textContent = `run ${s.run}, ${clock(s.t)} at ×${SPEED}`;
  $("status").textContent = s.phase === "dry" ? "pot nearly dry: Pour back or Reset"
    : s.full.length && !canPour() ? "too little to distill" : s.phase === "warming" ? "warming up" : "boiling";
  $("heat-val").textContent = `${s.heat.toFixed(2)} kW`;
  $("pour").disabled = !canPour();
  $("play").textContent = s.running ? "Pause" : "Play";
}

// ---- controls, keys, and the loop
function set(partial) { Object.assign(state, partial); render(); }
function advance(seconds) {                             // fast-forward in still time, for stills and tests
  for (let t = 0; t < seconds; t += DT) step(DT);
  render();
}
const nudge = (d) => set({heat: Math.min(2, Math.max(0.5, state.heat + 0.25 * d))});

$("limit").textContent = `azeotrope: ${DATA.limit_abv.toFixed(1)} % ABV (${DATA.limit_w.toFixed(1)} % by weight)`;
$("cooler").addEventListener("click", () => nudge(-1));
$("hotter").addEventListener("click", () => nudge(1));
$("pour").addEventListener("click", pourBack);
$("reset").addEventListener("click", reset);
$("play").addEventListener("click", () => set({running: !state.running}));
document.addEventListener("keydown", (e) => {
  const actions = {h: () => nudge(-1), j: () => nudge(1), p: pourBack, r: reset, " ": () => set({running: !state.running})};
  const act = actions[e.key.toLowerCase()];
  if (act && !(e.target instanceof HTMLButtonElement && e.key === " ")) { e.preventDefault(); act(); }
});

let last = null, owed = 0;
function frame(now) {                                   // called by the browser once per screen refresh
  const elapsed = last === null ? 0 : Math.min((now - last) / 1000, 0.05);   // capped: a background tab does not jump
  last = now;
  if (state.running && state.phase !== "dry") {
    for (owed += elapsed * SPEED; owed >= DT; owed -= DT) step(DT);   // fixed steps of DT still seconds
    state.drip = (state.drip + elapsed * 1.5 * state.heat) % 1;       // drops fall faster on a bigger flame
  }
  render();
  requestAnimationFrame(frame);
}

charge(DATA.n0, DATA.e0, 1);
window.addEventListener("resize", layout);
layout();
requestAnimationFrame(frame);
window.game = {state, set, render, advance};