Rosenblatt Perceptron

let pts, w, epoch, misCount, passIdx, W, H, lastUpdate, nextClass;
const LR = 0.04;
const TOGGLE_R = 18; // tap radius for class-toggle widget
const RESET_W = 56, RESET_H = 24; // reset button size

function toFeat(px, py) {
  return [(px - W / 2) / (W / 4), -(py - H / 2) / (H / 4)];
}
function toPix(fx, fy) {
  return [W / 2 + fx * (W / 4), H / 2 - fy * (H / 4)];
}

function seed() {
  pts = [];
  // Two separable Gaussian blobs to start — the boundary will converge.
  for (let i = 0; i < 18; i++) {
    pts.push({ fx: -1.1 + (Math.random() - 0.5) * 0.7, fy: 0.6 + (Math.random() - 0.5) * 0.7, y: +1 });
    pts.push({ fx: 1.1 + (Math.random() - 0.5) * 0.7, fy: -0.6 + (Math.random() - 0.5) * 0.7, y: -1 });
  }
  w = [Math.random() * 0.2 - 0.1, Math.random() * 0.2 - 0.1, Math.random() * 0.2 - 0.1];
  epoch = 0; misCount = pts.length; passIdx = 0; lastUpdate = 0;
  if (nextClass === undefined) nextClass = +1;
}

function toggleWidgetCenter() {
  return [W - 12 - TOGGLE_R, 12 + TOGGLE_R];
}
function resetButtonRect() {
  // Sits below the HUD panel (which is 10..88 vertically at left edge).
  return { x: 10, y: 96, w: RESET_W, h: RESET_H };
}
function inToggle(x, y) {
  const [cx, cy] = toggleWidgetCenter();
  return (x - cx) * (x - cx) + (y - cy) * (y - cy) <= TOGGLE_R * TOGGLE_R;
}
function inReset(x, y) {
  const r = resetButtonRect();
  return x >= r.x && x <= r.x + r.w && y >= r.y && y <= r.y + r.h;
}

function init({ width, height }) {
  W = width; H = height;
  seed();
}

function classify(p) {
  return w[0] + w[1] * p.fx + w[2] * p.fy >= 0 ? +1 : -1;
}

function step() {
  if (pts.length === 0) { misCount = 0; return; }
  // One epoch = one full sequential pass that performed at least one update.
  // We do a small batch of attempts per tick so animation is smooth.
  for (let t = 0; t < 3; t++) {
    if (passIdx === 0) { /* mark pass start */ }
    const p = pts[passIdx];
    const pred = classify(p);
    if (pred !== p.y) {
      // Rosenblatt update: w ← w + η · y · [1, x1, x2]
      w[0] += LR * p.y * 1;
      w[1] += LR * p.y * p.fx;
      w[2] += LR * p.y * p.fy;
      lastUpdate = passIdx;
    }
    passIdx++;
    if (passIdx >= pts.length) {
      passIdx = 0;
      epoch++;
      let m = 0;
      for (let i = 0; i < pts.length; i++) if (classify(pts[i]) !== pts[i].y) m++;
      misCount = m;
    }
  }
}

function drawBoundary(ctx) {
  // w0 + w1·x + w2·y = 0  →  y = -(w0 + w1·x) / w2
  const w0 = w[0], w1 = w[1], w2 = w[2];
  if (Math.abs(w2) < 1e-6 && Math.abs(w1) < 1e-6) return;
  let p1, p2;
  if (Math.abs(w2) > Math.abs(w1)) {
    const xL = -W / 2 / (W / 4), xR = W / 2 / (W / 4);
    const yL = -(w0 + w1 * xL) / w2;
    const yR = -(w0 + w1 * xR) / w2;
    p1 = toPix(xL, yL); p2 = toPix(xR, yR);
  } else {
    const yT = H / 2 / (H / 4), yB = -H / 2 / (H / 4);
    const xT = -(w0 + w2 * yT) / w1;
    const xB = -(w0 + w2 * yB) / w1;
    p1 = toPix(xT, yT); p2 = toPix(xB, yB);
  }
  // Normal vector direction shading
  ctx.strokeStyle = "rgba(255,255,255,0.85)";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(p1[0], p1[1]);
  ctx.lineTo(p2[0], p2[1]);
  ctx.stroke();

  // Faint half-plane shading
  const nx = w1, ny = -w2; // pixel-space normal (y flipped)
  const nlen = Math.hypot(nx, ny) || 1;
  const ox = nx / nlen, oy = ny / nlen;
  ctx.fillStyle = "rgba(220,80,80,0.06)";
  ctx.beginPath();
  ctx.moveTo(p1[0] + ox * 1200, p1[1] + oy * 1200);
  ctx.lineTo(p1[0], p1[1]);
  ctx.lineTo(p2[0], p2[1]);
  ctx.lineTo(p2[0] + ox * 1200, p2[1] + oy * 1200);
  ctx.closePath();
  ctx.fill();
  ctx.fillStyle = "rgba(80,140,220,0.06)";
  ctx.beginPath();
  ctx.moveTo(p1[0] - ox * 1200, p1[1] - oy * 1200);
  ctx.lineTo(p1[0], p1[1]);
  ctx.lineTo(p2[0], p2[1]);
  ctx.lineTo(p2[0] - ox * 1200, p2[1] - oy * 1200);
  ctx.closePath();
  ctx.fill();
}

function drawPoints(ctx) {
  for (let i = 0; i < pts.length; i++) {
    const p = pts[i];
    const [px, py] = toPix(p.fx, p.fy);
    const correct = classify(p) === p.y;
    ctx.fillStyle = p.y > 0 ? "#ff5a6a" : "#5aa8ff";
    ctx.beginPath();
    ctx.arc(px, py, 5, 0, Math.PI * 2);
    ctx.fill();
    if (!correct) {
      ctx.strokeStyle = "#fff";
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.arc(px, py, 7.5, 0, Math.PI * 2);
      ctx.stroke();
    }
  }
}

function drawHUD(ctx) {
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(10, 10, 220, 78);
  ctx.fillStyle = "#fff";
  ctx.font = "13px monospace";
  ctx.textAlign = "left";
  ctx.textBaseline = "alphabetic";
  ctx.fillText(`epoch        ${epoch}`, 20, 30);
  ctx.fillText(`misclassified ${misCount} / ${pts.length}`, 20, 48);
  ctx.fillText(`w = [${w[0].toFixed(2)}, ${w[1].toFixed(2)}, ${w[2].toFixed(2)}]`, 20, 66);
  const status = misCount === 0 ? "converged" : "updating";
  ctx.fillStyle = misCount === 0 ? "#7be57b" : "#ffd17a";
  ctx.fillText(status, 20, 84);

  ctx.fillStyle = "rgba(200,220,255,0.75)";
  ctx.font = "11px system-ui, sans-serif";
  ctx.textAlign = "right";
  ctx.fillText("tap circle to toggle class · tap canvas to add point · reset bottom-left", W - 12, H - 12);

  // Class-toggle widget (top-right): circle filled with the colour of the
  // class that the next tap will add.
  const [cx, cy] = toggleWidgetCenter();
  ctx.fillStyle = nextClass > 0 ? "#ff5a6a" : "#5aa8ff";
  ctx.beginPath();
  ctx.arc(cx, cy, TOGGLE_R - 2, 0, Math.PI * 2);
  ctx.fill();
  ctx.strokeStyle = "rgba(255,255,255,0.85)";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(cx, cy, TOGGLE_R - 2, 0, Math.PI * 2);
  ctx.stroke();
  ctx.fillStyle = "#fff";
  ctx.font = "bold 14px system-ui, sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(nextClass > 0 ? "+1" : "−1", cx, cy + 1);

  // Reset button (just under the HUD panel on the left).
  const r = resetButtonRect();
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(r.x, r.y, r.w, r.h);
  ctx.strokeStyle = "rgba(255,255,255,0.5)";
  ctx.lineWidth = 1;
  ctx.strokeRect(r.x + 0.5, r.y + 0.5, r.w - 1, r.h - 1);
  ctx.fillStyle = "#fff";
  ctx.font = "12px system-ui, sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("reset", r.x + r.w / 2, r.y + r.h / 2 + 1);
  // Restore defaults the rest of the sim assumes.
  ctx.textAlign = "left";
  ctx.textBaseline = "alphabetic";
}

function tick({ ctx, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }

  for (const c of input.consumeClicks()) {
    if (inToggle(c.x, c.y)) {
      // Tap on the class-toggle widget — flip which class the next tap adds.
      nextClass = nextClass > 0 ? -1 : +1;
      continue;
    }
    if (inReset(c.x, c.y)) {
      seed();
      continue;
    }
    const [fx, fy] = toFeat(c.x, c.y);
    // Right-click still forces blue (legacy desktop behaviour). Otherwise use the
    // currently-selected class so a single tap is enough on touch.
    const y = c.button === 2 ? -1 : nextClass;
    pts.push({ fx, fy, y });
  }
  if (input.justPressed && (input.justPressed("r") || input.justPressed("R"))) seed();

  if (misCount > 0) step();
  else {
    // Recount in case clicks added new misclassified points.
    let m = 0;
    for (let i = 0; i < pts.length; i++) if (classify(pts[i]) !== pts[i].y) m++;
    misCount = m;
  }

  // Background fade trail — keeps boundary motion visible.
  ctx.fillStyle = "rgba(8,10,18,0.35)";
  ctx.fillRect(0, 0, W, H);

  // Axes
  ctx.strokeStyle = "rgba(120,140,180,0.18)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, H / 2); ctx.lineTo(W, H / 2);
  ctx.moveTo(W / 2, 0); ctx.lineTo(W / 2, H);
  ctx.stroke();

  drawBoundary(ctx);
  drawPoints(ctx);
  drawHUD(ctx);
}