Fishery collapse: why a quota above the maximum sustainable yield is fatal

// game.js: run a fishery for fifty years. Set a quota in tonnes a year or a number of boats,
// press Play, and watch the fish, the boats, and the stock. Units: tonnes and years.
// The notebook writes the parameters, the weather factors, and the growth curve into #data.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {r: R, K, q: Q, years: YEARS, year_s: YEAR_S, fish_t: FISH_T} = DATA;
const MAX_FISH = 120, MAX_BOATS = 30;             // drawn at most; the readouts carry the real counts
const QUOTA_MAX = 200000, QUOTA_STEP = 5000, BOATS_MAX = 24;

// ---- the state: everything that changes, in one object
const state = {year: 0, stock: DATA.stock0, mode: "quota", quota: 120000, boats: 8, weather: false, set: 1,
  total: 0, running: false, history: [], previous: [], clock: 0, swim: 0};

// ---- Mulberry32, a public-domain seeded generator by Tommy Ettinger: the fish and boats start in the same places every time
function mulberry32(seed) {
  return () => {
    seed = (seed + 0x6d2b79f5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), seed | 1);
    t = (t + Math.imul(t ^ (t >>> 7), t | 61)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}
const rand = mulberry32(368);
const FISH = Array.from({length: MAX_FISH}, () => ({x: 2 * rand(), y: rand(), v: 0.02 + 0.04 * rand(), phase: 2 * Math.PI * rand()}));
const BOAT_X = Array.from({length: MAX_BOATS}, () => rand());

const clamp = (x, lo, hi) => Math.min(hi, Math.max(lo, x));
const tonnes = (x) => (Math.round(x / 100) * 100).toLocaleString("en-US");

// ---- one year: growth first, then the catch
function year() {
  const N = state.stock;
  const f = state.weather ? DATA.factors[state.set - 1][state.year] : 1;
  const grown = N + R * f * N * (1 - N / K);
  const C = state.mode === "quota" ? Math.min(state.quota, grown) : Q * state.boats * N;
  let next = Math.max(grown - C, 0);
  if (next < 1) next = 0;                               // less than a tonne left: collapsed
  state.history.push({stock: N, catch: C, mode: state.mode, f});
  state.total += C;
  state.stock = next;
  state.year += 1;
  if (state.year >= YEARS || next === 0) Object.assign(state, {running: false, clock: 0});
}

// In quota mode the boats are only a display: as many as it takes to land the quota.
const boatsOut = (s) => s.mode === "boats" ? s.boats : s.stock > 0 ? Math.ceil(s.quota / (Q * s.stock)) : 0;

// ---- drawing
const $ = (id) => document.getElementById(id);
const views = {sea: $("sea"), chart: $("chart")};
let dpr = 1;

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

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

function begin(canvas) {                                // a 2D context in CSS pixels
  const ctx = canvas.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  return [ctx, canvas.width / dpr, canvas.height / dpr];
}

function drawSea(c) {
  const [ctx, W, H] = begin(views.sea);
  const surface = Math.min(0.2 * H, Math.max(44, 0.12 * H)), quay = 0.08 * W;   // a strip of sky for the boats and the status
  ctx.fillStyle = c.bg;
  ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = c.second;
  ctx.globalAlpha = 0.14;
  ctx.fillRect(0, surface, W, H - surface);
  ctx.globalAlpha = 0.18;
  ctx.fillRect(0, surface, W, 0.06 * H);                // the darker band under the surface
  ctx.globalAlpha = 1;
  ctx.fillStyle = c.muted;
  ctx.fillRect(0, surface - 0.05 * H, quay, H - surface + 0.05 * H);

  // fish: one per FISH_T tonnes; when the stock falls the last ones in the list go, so nothing jumps
  const n = Math.min(MAX_FISH, Math.round(state.stock / FISH_T));
  const x0 = quay + 0.04 * W, w = W - x0 - 0.04 * W, y0 = surface + 0.12 * H, h = H - y0 - 0.08 * H;
  const L = clamp(W / 18, 12, 30);                     // fish length in CSS pixels
  ctx.fillStyle = c.ink;
  for (const fish of FISH.slice(0, n)) {
    const u = (fish.x + fish.v * state.swim) % 2;       // 0 to 1 swimming right, 1 to 2 swimming back
    const dir = u < 1 ? 1 : -1;
    const x = x0 + (u < 1 ? u : 2 - u) * w, y = y0 + (fish.y + 0.03 * Math.sin(fish.phase + 0.8 * state.swim)) * h;
    const s = L / 2.5;
    ctx.beginPath();                                    // one path per fish: overlapping fish stay filled
    ctx.moveTo(x + s, y);
    ctx.ellipse(x, y, s, 0.4 * s, 0, 0, 2 * Math.PI);
    ctx.moveTo(x - dir * 0.8 * s, y);
    ctx.lineTo(x - dir * 1.5 * s, y - 0.45 * s);
    ctx.lineTo(x - dir * 1.5 * s, y + 0.45 * s);
    ctx.closePath();
    ctx.fill();
  }

  // boats: out in the first fifth of the year, fishing, back in the last fifth
  const p = state.clock / YEAR_S, out = state.running ? clamp(Math.min(p, 1 - p) / 0.2, 0, 1) : 0;
  const all = boatsOut(state), shown = Math.min(all, MAX_BOATS), B = clamp(W / 24, 14, 26);
  ctx.fillStyle = c.ink;
  for (let i = 0; i < shown; i++) {
    const home = quay + 0.6 * B + (i % 10) * 0.25 * B;
    const x = home + out * (x0 + BOAT_X[i] * w - home), y = surface + 1.5 * Math.sin(2 * state.swim + i);
    ctx.beginPath();
    ctx.moveTo(x - B / 2, y);
    ctx.lineTo(x - 0.15 * B, y);
    ctx.lineTo(x - 0.15 * B, y - 0.3 * B);
    ctx.lineTo(x + 0.1 * B, y - 0.3 * B);
    ctx.lineTo(x + 0.1 * B, y);
    ctx.lineTo(x + B / 2, y);
    ctx.lineTo(x + 0.35 * B, y + 0.25 * B);
    ctx.lineTo(x - 0.35 * B, y + 0.25 * B);
    ctx.fill();
  }
  ctx.font = "15px system-ui, sans-serif";
  ctx.textBaseline = "middle";
  if (all > MAX_BOATS) ctx.fillText(`+${all - MAX_BOATS} boats`, quay + 6, surface / 2);   // beside the quay, above the boats
  ctx.textAlign = "right";
  ctx.fillText(statusText(), W - 6, surface / 2);
  ctx.textAlign = "left";
}

function statusText() {
  if (state.stock === 0) return "The stock has collapsed";
  if (state.year >= YEARS) return `Fifty years: ${(state.total / 1e6).toFixed(2)} million t caught`;
  const last = state.history[state.history.length - 1];
  if (last && last.f < 0.62) return `A bad year: growth ×${last.f.toFixed(2)}`;
  if (last && last.f > 1.38) return `A good year: growth ×${last.f.toFixed(2)}`;
  return "";
}

function drawChart(c) {
  const [ctx, W, H] = begin(views.chart);
  ctx.fillStyle = c.bg;
  ctx.fillRect(0, 0, W, H);
  if (W < 50 || H < 50) return;
  const m = {l: 40, r: 20, t: 28, b: 36}, w = W - m.l - m.r, h = H - m.t - m.b;
  const X = (N) => m.l + (N / K) * w, Y = (C) => m.t + h - (C / 200000) * h;   // stock along, catch up
  ctx.font = "14px system-ui, sans-serif";
  ctx.lineWidth = 1;
  ctx.strokeStyle = c.muted;
  ctx.fillStyle = c.fg;
  ctx.textAlign = "center";
  ctx.textBaseline = "top";
  for (const [N, text] of [[0, "0"], [5e5, "500"], [1e6, "1,000"]]) ctx.fillText(text, X(N), m.t + h + 3);
  ctx.fillText("stock / 1,000 t", m.l + w / 2, m.t + h + 19);
  ctx.textAlign = "right";
  ctx.textBaseline = "middle";
  for (const [C, text] of [[0, "0"], [1e5, "100"], [2e5, "200"]]) ctx.fillText(text, m.l - 5, Y(C));
  ctx.textAlign = "left";
  ctx.fillText("catch / 1,000 t per yr", 4, 9);
  ctx.globalAlpha = 0.25;
  ctx.beginPath();
  for (const C of [1e5, 2e5]) { ctx.moveTo(m.l, Y(C)); ctx.lineTo(m.l + w, Y(C)); }
  ctx.stroke();
  ctx.globalAlpha = 1;
  ctx.beginPath();
  ctx.moveTo(m.l, m.t);
  ctx.lineTo(m.l, m.t + h);
  ctx.lineTo(m.l + w, m.t + h);
  ctx.stroke();

  ctx.save();
  ctx.beginPath();
  ctx.rect(m.l, m.t - 6, w + 6, h + 6);
  ctx.clip();
  // the growth curve: left half dashed (unstable under a quota), right half solid (stable)
  for (const right of [false, true]) {
    ctx.beginPath();
    DATA.curve.filter(([N]) => right === (N >= K / 2)).forEach(([N, g], i) => (i ? ctx.lineTo : ctx.moveTo).call(ctx, X(N), Y(g)));
    ctx.strokeStyle = right ? c.ink : c.muted;
    ctx.lineWidth = 1.8;
    ctx.setLineDash(right ? [] : [5, 4]);
    ctx.stroke();
  }
  ctx.setLineDash([]);
  // the current policy, in the color of its dots: a quota is a horizontal line, a fleet a line through the origin
  ctx.strokeStyle = state.mode === "quota" ? c.accent : c.second;
  ctx.lineWidth = 1;
  ctx.beginPath();
  if (state.mode === "quota") { ctx.moveTo(X(0), Y(state.quota)); ctx.lineTo(X(K), Y(state.quota)); }
  else { ctx.moveTo(X(0), Y(0)); ctx.lineTo(X(K), Y(Q * state.boats * K)); }
  ctx.stroke();
  // one dot per year at (stock, catch); the previous run faint
  for (const [list, alpha] of [[state.previous, 0.3], [state.history, 1]]) {
    ctx.globalAlpha = alpha;
    for (const e of list) {
      ctx.fillStyle = e.mode === "quota" ? c.accent : c.second;
      ctx.beginPath();
      ctx.arc(X(e.stock), Y(e.catch), 3, 0, 2 * Math.PI);
      ctx.fill();
    }
  }
  ctx.globalAlpha = 1;
  ctx.restore();
  ctx.fillStyle = c.ink;
  ctx.beginPath();
  ctx.arc(X(K / 2), Y(DATA.msy), 3.5, 0, 2 * Math.PI);
  ctx.fill();
  ctx.textAlign = "center";
  ctx.textBaseline = "bottom";
  ctx.lineWidth = 4;                                    // a halo in the background color keeps the label
  ctx.strokeStyle = c.bg;                               // readable when a policy line runs through it
  ctx.strokeText("MSY", X(K / 2), Y(DATA.msy) - 5);
  ctx.fillText("MSY", X(K / 2), Y(DATA.msy) - 5);
}

function render() {
  const c = colors();
  drawSea(c);
  drawChart(c);
  const last = state.history[state.history.length - 1];
  $("year").textContent = `Year ${state.year} of ${YEARS}`;
  $("stock").textContent = `Stock ${tonnes(state.stock)} t`;
  $("catch").textContent = `Catch ${tonnes(last ? last.catch : 0)} t`;
  $("total").textContent = `Total ${(state.total / 1e6).toFixed(2)} million t`;
  $("boats").textContent = `Boats ${boatsOut(state)}`;
  $("growth").textContent = `Growth +${tonnes(R * state.stock * (1 - state.stock / K))} t`;
  const quota = state.mode === "quota";
  $("quota-mode").setAttribute("aria-pressed", quota);
  $("boats-mode").setAttribute("aria-pressed", !quota);
  $("weather").setAttribute("aria-pressed", state.weather);
  $("knob-label").textContent = quota ? "Quota" : "Boats";
  Object.assign($("knob"), quota ? {max: QUOTA_MAX / 1000, step: QUOTA_STEP / 1000} : {max: BOATS_MAX, step: 1});
  $("knob").value = quota ? state.quota / 1000 : state.boats;
  $("knob-val").textContent = quota ? `${tonnes(state.quota)} t/yr` : `${state.boats} boats`;
  $("play").textContent = state.running ? "Pause" : "Play";
  $("next").textContent = `New years (${state.set} of 20)`;
}

// ---- controls, keys, and the loop
function set(partial) {
  Object.assign(state, partial);
  render();
}

function setMode(mode) {                                // carry last year's catch over to the new policy
  const last = state.history[state.history.length - 1];
  if (mode !== state.mode && last && state.stock > 0) {
    if (mode === "boats") state.boats = clamp(Math.round(last.catch / (Q * state.stock)), 0, BOATS_MAX);
    else state.quota = clamp(Math.round(last.catch / QUOTA_STEP) * QUOTA_STEP, 0, QUOTA_MAX);
  }
  set({mode});
}

function nudge(sign) {                                  // − and +, and the arrow keys
  if (state.mode === "quota") set({quota: clamp(state.quota + sign * QUOTA_STEP, 0, QUOTA_MAX)});
  else set({boats: clamp(state.boats + sign, 0, BOATS_MAX)});
}

const reset = () => set({year: 0, stock: DATA.stock0, total: 0, running: false, clock: 0,
  previous: state.history.length ? state.history : state.previous, history: []});
const togglePlay = () => set({running: !state.running && state.year < YEARS && state.stock > 0});
const newYears = () => { set({set: state.set % 20 + 1, weather: true}); reset(); };

$("quota-mode").addEventListener("click", () => setMode("quota"));
$("boats-mode").addEventListener("click", () => setMode("boats"));
$("weather").addEventListener("click", () => set({weather: !state.weather}));
$("knob").addEventListener("input", (e) => {
  const v = Number(e.target.value);
  set(state.mode === "quota" ? {quota: v * 1000} : {boats: v});
});
$("minus").addEventListener("click", () => nudge(-1));
$("plus").addEventListener("click", () => nudge(1));
$("play").addEventListener("click", togglePlay);
$("reset").addEventListener("click", reset);
$("next").addEventListener("click", newYears);
document.addEventListener("keydown", (e) => {
  const actions = {" ": togglePlay, ArrowLeft: () => nudge(-1), ArrowRight: () => nudge(1), q: () => setMode("quota"),
    b: () => setMode("boats"), w: () => set({weather: !state.weather}), r: reset, n: newYears};
  const act = actions[e.key.length === 1 ? e.key.toLowerCase() : e.key];
  const native = (e.target instanceof HTMLInputElement && e.key.startsWith("Arrow"))
    || (e.target instanceof HTMLButtonElement && e.key === " ");   // the focused control handles these
  if (act && !native) {
    e.preventDefault();
    act();
  }
});

let last = null;
function frame(now) {                                   // called by the browser once per screen refresh
  const dt = last === null ? 0 : Math.min((now - last) / 1000, 0.05);   // capped: a background tab does not jump
  last = now;
  state.swim += dt;
  if (state.running) {
    state.clock += dt;
    if (state.clock >= YEAR_S) {
      state.clock -= YEAR_S;
      year();
    }
  }
  render();
  requestAnimationFrame(frame);
}

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