Titration curve drop by drop: two drops move the pH from 4 to 10

// game.js: a titration. Drops of 0.1 M NaOH fall from a burette into 25 mL of 0.1 M acid with an indicator;
// after every drop the pH meter reads the pH from the charge balance, and the beaker takes the indicator's color.
// Units: mL, mol/L, seconds. The notebook writes every constant into #data.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {va: VA, ca: CA, cb: CB, drop: DROP, max_drops: MAX_DROPS, stream: STREAM, hold: HOLD, fall: FALL} = DATA;
const KW = 10 ** -DATA.pkw;
const ACIDS = DATA.acids, INDICATORS = DATA.indicators;     // pka null: a strong acid

// ---- the charge balance, positive minus negative charge / M at p = -log10[H+]; it falls as p rises
function excess(p, vb, acid) {
  const h = 10 ** -p, c = CA * VA / (VA + vb), na = CB * vb / (VA + vb);
  const pka = ACIDS[acid].pka;
  const anion = pka === null ? c : c / (1 + h * 10 ** pka);   // c α₁ for a weak acid
  return h + na - KW / h - anion;
}

// bisection on p: 50 halvings of [-1, 15] leave an interval 1.4e-14 wide
function solvePH(vb, acid) {
  let lo = -1, hi = 15;
  for (let i = 0; i < 50; i++) {
    const mid = (lo + hi) / 2;
    if (excess(mid, vb, acid) > 0) lo = mid; else hi = mid;
  }
  return (lo + hi) / 2;
}

// the indicator's color: its acid and base colors blended by its base fraction
function beakerColor(ph, indicator) {
  const ind = INDICATORS[indicator], f = 1 / (1 + 10 ** (ind.pk - ph));
  const [r, g, b, a] = ind.acid.map((v, j) => v + f * (ind.base[j] - v));
  return `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a.toFixed(3)})`;
}

// ---- the state: everything that changes, in one object
const state = {acid: "HCl", indicator: "phenolphthalein", n: 0, released: 0, vb: 0, ph: 0, trace: [],
  drops: [], holding: false, hold: 0, owed: 0};

function land() {                                       // a drop reaches the beaker: 0.05 mL more base
  state.n += 1;
  state.vb = state.n * DROP;
  state.ph = solvePH(state.vb, state.acid);
  state.trace.push(state.ph);
}

function fill(vb) {                                     // a fresh beaker, then vb mL at once
  Object.assign(state, {n: 0, released: 0, vb: 0, drops: [], holding: false, hold: 0, owed: 0});
  state.ph = solvePH(0, state.acid);
  state.trace = [state.ph];
  const n = Math.min(Math.round(vb / DROP), MAX_DROPS);
  while (state.n < n) land();
  state.released = n;
}

function release() {                                    // one drop leaves the tip; the burette holds 50 mL
  if (state.released >= MAX_DROPS) return;
  state.released += 1;
  state.drops.push(0);                                  // seconds in the air
}

// ---- drawing: the notebook's draw_scene in the same units, a box 10 wide and 10 tall
const $ = (id) => document.getElementById(id);
const canvas = $("scene");
let dpr = 1;

function colors() {
  const css = getComputedStyle(document.documentElement);
  return Object.fromEntries(["bg", "fg", "ink", "accent", "second", "muted", "water"].map((k) => [k, css.getPropertyValue(`--${k}`).trim()]));
}

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();
}

const level = (vb) => 1.5 + 2.3 * (VA + vb) / 75;        // the liquid's surface in the beaker

function drawScene(ctx, c, x0, y0, w, h) {
  const s = state, k = Math.min(w / 10, h / 10);
  const X = (x) => x0 + (w - 10 * k) / 2 + x * k, Y = (y) => y0 + (h + 10 * k) / 2 - y * k;
  const rect = (xa, ya, xb, yb) => { ctx.beginPath(); ctx.rect(X(xa), Y(yb), (xb - xa) * k, (yb - ya) * k); };
  const line = (pts) => { ctx.beginPath(); pts.forEach(([x, y], i) => i ? ctx.lineTo(X(x), Y(y)) : ctx.moveTo(X(x), Y(y))); ctx.stroke(); };
  const font = Math.max(14, Math.round(0.42 * k));
  ctx.lineJoin = "round";

  const top = level(s.vb);                              // the beaker's water, tinted by the indicator
  ctx.fillStyle = c.water;
  rect(1.2, 0.5, 5.8, top); ctx.fill();
  ctx.fillStyle = beakerColor(s.ph, s.indicator);
  ctx.fill();
  ctx.fillStyle = c.muted;                              // the stirring bar
  rect(3.0, 0.62, 4.0, 0.8); ctx.fill();
  ctx.fillStyle = c.water;                              // the burette's NaOH, its surface sinking with every drop
  const bl = 9.5 - 3.6 * s.released * DROP / 50;
  rect(3.25, 5.8, 3.75, bl); ctx.fill();
  ctx.strokeStyle = c.muted; ctx.lineWidth = 1;         // graduations every 5 mL, labeled at 0, 25, 50
  ctx.fillStyle = c.muted; ctx.font = `${font}px system-ui, sans-serif`;
  ctx.textAlign = "right"; ctx.textBaseline = "middle";
  for (let v = 0; v <= 50; v += 5) {
    const y = 9.5 - 3.6 * v / 50;
    line([[3.25, y], [3.45, y]]);
    if (v % 25 === 0) ctx.fillText(v === 50 ? "50 mL" : `${v}`, X(3.1), Y(y));
  }

  ctx.strokeStyle = c.ink; ctx.lineWidth = 2;           // beaker, burette, stopcock, tip
  line([[1.0, 4.4], [1.2, 4.2], [1.2, 0.5], [5.8, 0.5], [5.8, 4.4]]);
  rect(3.25, 5.8, 3.75, 9.8); ctx.stroke();
  line([[3.45, 5.8], [3.45, 5.0], [3.5, 4.8], [3.55, 5.0], [3.55, 5.8]]);
  ctx.fillStyle = c.ink;
  rect(2.95, 5.35, 4.05, 5.55); ctx.fill();

  ctx.fillStyle = c.water;                              // the drops in the air, falling under gravity
  ctx.strokeStyle = c.muted; ctx.lineWidth = 1;
  for (const t of s.drops) {
    const y = 4.75 - (4.75 - top) * (t / FALL) ** 2;
    ctx.beginPath(); ctx.arc(X(3.5), Y(y), 0.1 * k, 0, 2 * Math.PI); ctx.fill(); ctx.stroke();
  }

  ctx.strokeStyle = c.ink; ctx.lineWidth = 2;           // the electrode and its cable to the meter
  line([[5.0, 0.9], [5.0, 5.2], [5.6, 6.0], [6.4, 6.0]]);
  ctx.fillStyle = c.ink;
  ctx.beginPath(); ctx.arc(X(5.0), Y(0.9), 0.17 * k, 0, 2 * Math.PI); ctx.fill();
  rect(6.4, 5.0, 9.9, 7.4); ctx.stroke();               // the meter
  const labeled = k >= 22;                              // a small meter shows only the number; the readout names it
  if (labeled) {
    ctx.fillStyle = c.muted; ctx.textAlign = "left"; ctx.textBaseline = "top";
    ctx.fillText("pH", X(6.6), Y(7.25));
  }
  ctx.fillStyle = c.second; ctx.textAlign = "center"; ctx.textBaseline = "middle";
  ctx.font = `600 ${Math.max(14, Math.round(0.85 * k))}px system-ui, sans-serif`;
  ctx.fillText(s.ph.toFixed(2), X(8.15), Y(labeled ? 5.95 : 6.2));
}

function drawRecorder(ctx, c, x0, y0, w, h) {          // pH after every drop, 0 to 14 over 0 to 50 mL
  const pad = 30, font = 14;
  const X = (v) => x0 + pad + (w - pad - 8) * v / 50, Y = (p) => y0 + h - 20 - (h - 28) * p / 14;
  ctx.font = `${font}px system-ui, sans-serif`;
  ctx.strokeStyle = c.muted; ctx.fillStyle = c.muted; ctx.lineWidth = 1;
  ctx.strokeRect(X(0), Y(14), X(50) - X(0), Y(0) - Y(14));
  ctx.textAlign = "right"; ctx.textBaseline = "middle";
  for (const p of [0, 7, 14]) ctx.fillText(`${p}`, X(0) - 4, Y(p));
  ctx.textAlign = "center"; ctx.textBaseline = "top";
  for (const v of [25, 50]) ctx.fillText(v === 50 ? "50 mL" : `${v}`, Math.min(X(v), x0 + w - 24), Y(0) + 3);
  ctx.textAlign = "left"; ctx.textBaseline = "top";
  ctx.fillText("pH", X(0) + 4, Y(14) + 3);
  ctx.fillStyle = ACIDS[state.acid].pka === null ? c.ink : c.accent;   // HCl in ink, acetic acid in accent, as on the page
  state.trace.forEach((p, i) => { ctx.beginPath(); ctx.arc(X(i * DROP), Y(p), 1.6, 0, 2 * Math.PI); ctx.fill(); });
}

function render() {
  const s = state, c = colors(), ctx = canvas.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  const W = canvas.width / dpr, H = canvas.height / dpr;
  ctx.fillStyle = c.bg;
  ctx.fillRect(0, 0, W, H);
  if (H > 1.1 * W) {                                    // upright: the scene on top, the recorder under it
    const hr = Math.max(90, 0.26 * H);
    drawScene(ctx, c, 0, 0, W, H - hr);
    drawRecorder(ctx, c, 0, H - hr, W, hr);
  } else {                                              // wide or short: the scene left, the recorder right
    const ws = Math.min(W * 0.6, H);
    drawScene(ctx, c, 0, 0, ws, H);
    drawRecorder(ctx, c, ws, H * 0.2, W - ws, H * 0.6);
  }
  $("vb").textContent = s.vb.toFixed(2);
  $("ph").textContent = s.ph.toFixed(2);
  $("acid").textContent = `Acid: ${s.acid}`;
  $("indicator").textContent = `Indicator: ${s.indicator}`;
}

// ---- controls, keys, and the loop
function set(partial) {                                 // a fresh beaker at vb mL, e.g. game.set({acid: "acetic acid", vb: 12.5})
  const {vb = 0, ...rest} = partial;
  Object.assign(state, rest);
  fill(vb);
  render();
}
const cycle = (obj, key) => { const names = Object.keys(obj); return names[(names.indexOf(key) + 1) % names.length]; };
const nextAcid = () => set({acid: cycle(ACIDS, state.acid)});
const nextIndicator = () => set({indicator: cycle(INDICATORS, state.indicator)});
const reset = () => set({});
function press() { if (!state.holding) { release(); Object.assign(state, {holding: true, hold: 0, owed: 0}); } }
const letGo = () => { state.holding = false; };

const dropButton = $("drop");
dropButton.addEventListener("pointerdown", (e) => { e.preventDefault(); press(); });
for (const type of ["pointerup", "pointercancel", "pointerleave"]) dropButton.addEventListener(type, letGo);
dropButton.addEventListener("contextmenu", (e) => e.preventDefault());   // a long press is not a menu
$("acid").addEventListener("click", nextAcid);
$("indicator").addEventListener("click", nextIndicator);
$("reset").addEventListener("click", reset);
document.addEventListener("keydown", (e) => {
  const actions = {" ": press, a: nextAcid, i: nextIndicator, r: reset};
  const act = actions[e.key.toLowerCase()];
  if (act) { e.preventDefault(); if (!e.repeat) act(); }
});
document.addEventListener("keyup", (e) => { if (e.key === " ") letGo(); });

let last = null;
function frame(now) {                                   // called by the browser before each screen redraw
  const elapsed = last === null ? 0 : Math.min((now - last) / 1000, 0.05);   // capped: a background tab does not jump
  last = now;
  const s = state;
  if (s.holding) {                                      // held past HOLD seconds: a stream of drops
    s.hold += elapsed;
    if (s.hold > HOLD) for (s.owed += elapsed; s.owed >= 1 / STREAM; s.owed -= 1 / STREAM) release();
  }
  s.drops = s.drops.map((t) => t + elapsed);
  while (s.drops.length && s.drops[0] >= FALL) { s.drops.shift(); land(); }
  render();
  requestAnimationFrame(frame);
}

fill(0);
window.addEventListener("resize", layout);
layout();
requestAnimationFrame(frame);
window.game = {state, set, render};