// Figures for the introduction and Part I: the three settings, d'Alembert's
// travelling halves, folding, the leapfrog stencil, the dispersion curves and
// the delay loop.  Every curve that looks computed is computed, here, from
// the same closed forms the chapters use.
import type { ReactElement } from 'react'
import { Arrowheads, Figure, Label, Node, arrow } from './svg.tsx'
import { faded, familyColor, ink, method } from '../plot/palette.ts'

const pts = (xy: [number, number][]) => xy.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`).join('')

/** The three settings of the tutorial, with the boundary each one has. */
export function Settings() {
  // a plucked string
  const s0 = 40
  const s1 = 210
  const sy = 110
  const apex = s0 + 0.3 * (s1 - s0)
  // a square membrane, drawn with the sign pattern of mode (2, 1)
  const q0 = 282
  const qs = 132
  const qy = 44
  const cells: ReactElement[] = []
  const n = 12
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      const x = (j + 0.5) / n
      const y = (i + 0.5) / n
      const v = Math.sin(2 * Math.PI * x) * Math.sin(Math.PI * y)
      const c = v > 0 ? method.boundary : method.fd2
      cells.push(
        <rect
          key={`${i}-${j}`}
          x={q0 + (j * qs) / n}
          y={qy + (i * qs) / n}
          width={qs / n + 0.4}
          height={qs / n + 0.4}
          fill={faded(c, 1 - Math.min(1, Math.abs(v)) * 0.75)}
        />,
      )
    }
  }
  // a room in oblique projection
  const r0 = 500
  const ry = 72
  const rw = 150
  const rh = 96
  const dx = 44
  const dy = -30
  const S: [number, number] = [r0 + 36, ry + 70]
  const R: [number, number] = [r0 + 128, ry + 52]
  const hit: [number, number] = [r0 + 84, ry + rh]
  return (
    <Figure
      width={716}
      height={236}
      caption="The three settings. A string, fixed at both ends; a drumhead, clamped at its rim, shown here in one of its modes with the two signs of the displacement in two colours; and a room, whose walls reflect sound, with the direct path from a source to a listener and one reflection from the floor."
    >
      <Arrowheads id="set" colors={[ink.muted]} />
      {/* string */}
      <line x1={s0} y1={sy - 18} x2={s0} y2={sy + 18} stroke={ink.secondary} strokeWidth={3} />
      <line x1={s1} y1={sy - 18} x2={s1} y2={sy + 18} stroke={ink.secondary} strokeWidth={3} />
      <line x1={s0} y1={sy} x2={s1} y2={sy} stroke={ink.axis} strokeWidth={1} strokeDasharray="3 3" />
      <path d={pts([[s0, sy], [apex, sy - 46], [s1, sy]])} fill="none" stroke={method.modal} strokeWidth={2.2} />
      <Label x={(s0 + s1) / 2} y={196} size={12.5} fill={ink.primary}>
        string
      </Label>
      <Label x={(s0 + s1) / 2} y={215} size={11.5} fill={ink.muted}>
        u = 0 at both ends
      </Label>
      {/* drum */}
      {cells}
      <rect x={q0} y={qy} width={qs} height={qs} fill="none" stroke={ink.secondary} strokeWidth={2.5} />
      <Label x={q0 + qs / 2} y={196} size={12.5} fill={ink.primary}>
        drum
      </Label>
      <Label x={q0 + qs / 2} y={215} size={11.5} fill={ink.muted}>
        u = 0 on the rim
      </Label>
      {/* room */}
      <g stroke={ink.secondary} strokeWidth={1.4} fill="none">
        <rect x={r0} y={ry} width={rw} height={rh} />
        <path d={`M${r0} ${ry}l${dx} ${dy}h${rw}v${rh}l${-dx} ${-dy}`} />
        <path d={`M${r0 + rw} ${ry}l${dx} ${dy}`} />
      </g>
      <path d={`M${r0} ${ry + rh}l${dx} ${dy}h${rw}`} fill="none" stroke={ink.axis} strokeWidth={1} strokeDasharray="3 3" />
      <line x1={S[0]} y1={S[1]} x2={R[0]} y2={R[1]} stroke={method.boundary} strokeWidth={1.6} />
      <path d={pts([S, hit, R])} fill="none" stroke={faded(method.boundary, 0.35)} strokeWidth={1.4} strokeDasharray="4 3" />
      <Node x={S[0]} y={S[1]} r={4.5} fill={method.waveguide} />
      <Node x={R[0]} y={R[1]} r={4.5} fill={ink.node} />
      <Label x={S[0] - 8} y={S[1] - 10} size={11} fill={method.waveguide} anchor="end">
        source
      </Label>
      <Label x={R[0] + 8} y={R[1] - 10} size={11} fill={ink.secondary} anchor="start">
        listener
      </Label>
      <Label x={r0 + (rw + dx) / 2} y={196} size={12.5} fill={ink.primary}>
        room
      </Label>
      <Label x={r0 + (rw + dx) / 2} y={215} size={11.5} fill={ink.muted}>
        ∂p/∂n = 0 on rigid walls
      </Label>
    </Figure>
  )
}

/** d'Alembert: the plucked shape as two halves travelling apart. */
export function Dalembert() {
  const beta = 0.3
  const x0 = 70
  const x1 = 646
  const W = x1 - x0
  const phi = (x: number) => {
    let r = ((x % 2) + 2) % 2
    let sg = 1
    if (r > 1) {
      r = 2 - r
      sg = -1
    }
    return sg * Math.min(r / beta, (1 - r) / (1 - beta))
  }
  const rows = [0, 0.12, 0.3, 0.55, 1.0]
  const rh = 64
  const top = 18
  const amp = 26
  const curve = (f: (x: number) => number, y0: number) => {
    const out: [number, number][] = []
    for (let i = 0; i <= 200; i++) {
      const x = i / 200
      out.push([x0 + x * W, y0 - amp * f(x)])
    }
    return pts(out)
  }
  return (
    <Figure
      width={716}
      height={top + rows.length * rh + 24}
      caption="d'Alembert's solution for a string plucked at β = 0.3. The shape (solid) is the sum of two copies of the initial triangle at half height (dashed), one moving right and one moving left, each reflected inverted at the ends. After half a period (bottom row) the string is the mirror image of its starting shape, upside down."
    >
      {rows.map((ct, k) => {
        const y0 = top + k * rh + rh / 2
        return (
          <g key={k}>
            <line x1={x0} y1={y0} x2={x1} y2={y0} stroke={ink.grid} strokeWidth={1} />
            <line x1={x0} y1={y0 - 22} x2={x0} y2={y0 + 22} stroke={ink.axis} strokeWidth={2} />
            <line x1={x1} y1={y0 - 22} x2={x1} y2={y0 + 22} stroke={ink.axis} strokeWidth={2} />
            <path d={curve((x) => 0.5 * phi(x - ct), y0)} fill="none" stroke={method.fd2} strokeWidth={1.2} strokeDasharray="4 3" />
            <path d={curve((x) => 0.5 * phi(x + ct), y0)} fill="none" stroke={method.boundary} strokeWidth={1.2} strokeDasharray="4 3" />
            <path d={curve((x) => 0.5 * (phi(x - ct) + phi(x + ct)), y0)} fill="none" stroke={method.modal} strokeWidth={2.2} />
            <Label x={x0 - 12} y={y0} size={11.5} fill={ink.muted} anchor="end">
              {`ct = ${ct}`}
            </Label>
          </g>
        )
      })}
      <Label x={x0 + W / 2} y={top + rows.length * rh + 10} size={11.5} fill={ink.muted}>
        right-moving half dashed blue, left-moving half dashed pink, their sum solid
      </Label>
    </Figure>
  )
}

/** Partials above the Nyquist frequency fold back below it. */
export function Folding() {
  const x0 = 50
  const x1 = 670
  const fs = 1
  const f0 = fs / 7.35
  const fmax = 1.02 * fs
  const sx = (f: number) => x0 + ((x1 - x0) * f) / fmax
  const base = 140
  const h = 118
  const parts = Array.from({ length: 7 }, (_, i) => i + 1)
  const amp = (n: number) => h / n
  const fold = (f: number) => {
    const r = f % fs
    return r > fs / 2 ? fs - r : r
  }
  const ay = base + 26
  return (
    <Figure
      width={716}
      height={262}
      caption="Aliasing. A note's partials (green) lie at whole multiples of its fundamental. Sampling at fs cannot tell a partial above the Nyquist frequency fs/2 from one at the same distance below it, so each partial above fs/2 is reflected about fs/2 (arcs) and heard at a frequency that is generally not a multiple of the fundamental (red)."
    >
      <line x1={x0} y1={base} x2={x1} y2={base} stroke={ink.axis} strokeWidth={1.2} />
      <line x1={sx(fs / 2)} y1={ay + 70} x2={sx(fs / 2)} y2={14} stroke={ink.muted} strokeWidth={1.2} strokeDasharray="4 4" />
      <Label x={sx(fs / 2)} y={8} size={11.5} fill={ink.muted}>
        fs / 2
      </Label>
      <line x1={sx(fs)} y1={base + 6} x2={sx(fs)} y2={base - 6} stroke={ink.muted} strokeWidth={1.2} />
      <Label x={sx(fs)} y={base + 16} size={11.5} fill={ink.muted}>
        fs
      </Label>
      <Label x={sx(0)} y={base + 16} size={11.5} fill={ink.muted}>
        0
      </Label>
      {parts.map((n) => {
        const f = n * f0
        const above = f > fs / 2
        const g = fold(f)
        const rx = (sx(f) - sx(g)) / 2
        return (
          <g key={n}>
            <line
              x1={sx(f)}
              y1={base}
              x2={sx(f)}
              y2={base - amp(n)}
              stroke={above ? faded(method.modal, 0.55) : method.modal}
              strokeWidth={3}
            />
            <Label x={sx(f)} y={base + 16} size={10.5} fill={ink.muted}>
              {n === 1 ? 'f₀' : `${n}f₀`}
            </Label>
            {above && (
              <>
                <line x1={sx(g)} y1={base} x2={sx(g)} y2={base - amp(n)} stroke={method.alt} strokeWidth={3} />
                <path
                  d={`M${sx(f)} ${ay}A${rx} ${rx * 0.28} 0 0 1 ${sx(g)} ${ay}`}
                  fill="none"
                  stroke={faded(method.alt, 0.25)}
                  strokeWidth={1.3}
                />
                <line x1={sx(f)} y1={base + 22} x2={sx(f)} y2={ay} stroke={faded(method.alt, 0.25)} strokeWidth={1.3} />
                <line x1={sx(g)} y1={base + 4} x2={sx(g)} y2={ay} stroke={faded(method.alt, 0.25)} strokeWidth={1.3} />
              </>
            )}
          </g>
        )
      })}
    </Figure>
  )
}

/** The leapfrog stencil in space and time, and the two domains of dependence. */
export function Stencil() {
  const gx = 60
  const gy = 30
  const ox = 90
  const oy = 190
  const node = (j: number, n: number): [number, number] => [ox + j * gx, oy - n * gy * 1.5]
  const lam = 0.6
  const P = node(4, 3)
  const nodes: ReactElement[] = []
  for (let n = 0; n <= 3; n++) {
    for (let j = 0; j <= 8; j++) {
      const [x, y] = node(j, n)
      nodes.push(<Node key={`${j}-${n}`} x={x} y={y} r={2.4} fill={ink.axis} />)
    }
  }
  const used: [number, number, string][] = [
    [3, 2, method.fd2],
    [4, 2, method.fd2],
    [5, 2, method.fd2],
    [4, 1, method.fd2],
  ]
  const cone = (w: number) => pts([node(4 - 3 * w, 0), P, node(4 + 3 * w, 0)])
  return (
    <Figure
      width={716}
      height={236}
      caption="The leapfrog stencil. The new value at the top (orange) is computed from three values at the previous step and one at the step before (blue). Information therefore moves at most one node per step, which bounds the numerical domain of dependence (grey); the physical one (dashed) spreads at c Δt per step, λ nodes. The scheme is stable only if the numerical domain contains the physical one, λ ≤ 1."
    >
      <path d={`${cone(1)}Z`} fill={faded(ink.muted, 0.85)} stroke={ink.muted} strokeWidth={1} />
      <path d={cone(lam)} fill="none" stroke={method.modal} strokeWidth={1.6} strokeDasharray="5 4" />
      {nodes}
      {used.map(([j, n, c]) => {
        const [x, y] = node(j, n)
        return (
          <g key={`${j}-${n}`}>
            <line x1={x} y1={y} x2={P[0]} y2={P[1]} stroke={faded(method.fd2, 0.4)} strokeWidth={1.3} />
            <Node x={x} y={y} r={5} fill={c} />
          </g>
        )
      })}
      <Node x={P[0]} y={P[1]} r={6} fill={method.fd4} />
      <Label x={P[0] + 10} y={P[1] - 14} size={11.5} fill={method.fd4} anchor="start">
        u(j, n+1)
      </Label>
      {[0, 1, 2, 3].map((n) => (
        <Label key={n} x={ox - 16} y={node(0, n)[1]} size={11} fill={ink.muted} anchor="end">
          {n === 3 ? 'n + 1' : n === 2 ? 'n' : n === 1 ? 'n − 1' : 'n − 2'}
        </Label>
      ))}
      <Label x={ox + 4 * gx} y={oy + 20} size={11} fill={ink.muted}>
        x, one node every h
      </Label>
      <Label x={596} y={70} size={11.5} fill={ink.secondary} anchor="start">
        numerical:
      </Label>
      <Label x={596} y={86} size={11.5} fill={ink.secondary} anchor="start">
        1 node per step
      </Label>
      <Label x={596} y={116} size={11.5} fill={method.modal} anchor="start">
        physical:
      </Label>
      <Label x={596} y={132} size={11.5} fill={method.modal} anchor="start">
        λ nodes per step
      </Label>
    </Figure>
  )
}

/** Phase speed against wavenumber for several Courant numbers. */
export function Dispersion() {
  const x0 = 70
  const x1 = 560
  const y0 = 196
  const y1 = 24
  const vmin = 0.55
  const sx = (t: number) => x0 + (x1 - x0) * t
  const sy = (v: number) => y0 - ((y0 - y1) * (v - vmin)) / (1 - vmin)
  const lams = [1, 0.75, 0.5, 0.25]
  const curve = (lam: number) => {
    const out: [number, number][] = []
    for (let i = 1; i <= 200; i++) {
      const kh = (Math.PI * i) / 200
      const r = (2 * Math.asin(lam * Math.sin(kh / 2))) / (lam * kh)
      out.push([sx(i / 200), sy(r)])
    }
    return pts(out)
  }
  const ticks = [0.55, 0.7, 0.85, 1]
  const ppw = [20, 10, 5, 4, 3, 2]
  return (
    <Figure
      width={716}
      height={250}
      caption="The leapfrog dispersion relation, as the speed of each wave on the grid relative to the true speed, against its wavenumber. At λ = 1 every wave travels at exactly the right speed; below it, short waves travel slowly, and at two points per wavelength (right edge) they travel at 2 arcsin(λ) / (λπ) of the right speed."
    >
      <line x1={x0} y1={y0} x2={x1} y2={y0} stroke={ink.axis} />
      <line x1={x0} y1={y0} x2={x0} y2={y1 - 6} stroke={ink.axis} />
      {ticks.map((v) => (
        <g key={v}>
          <line x1={x0} x2={x1} y1={sy(v)} y2={sy(v)} stroke={ink.grid} />
          <Label x={x0 - 8} y={sy(v)} size={11} fill={ink.muted} anchor="end">
            {v.toFixed(2)}
          </Label>
        </g>
      ))}
      {ppw.map((P) => (
        <g key={P}>
          <line x1={sx(2 / P)} x2={sx(2 / P)} y1={y0} y2={y0 + 5} stroke={ink.axis} />
          <Label x={sx(2 / P)} y={y0 + 16} size={11} fill={ink.muted}>
            {P}
          </Label>
        </g>
      ))}
      <Label x={x1} y={y0 + 34} size={11} fill={ink.muted} anchor="end">
        points per wavelength
      </Label>
      <Label x={x0 - 44} y={y1 - 12} size={11} fill={ink.muted} anchor="start">
        speed on the grid / true speed
      </Label>
      {lams.map((l, k) => (
        <g key={l}>
          <path d={curve(l)} fill="none" stroke={familyColor(k, lams.length)} strokeWidth={2} />
          <Label
            x={x1 + 10}
            y={sy((2 * Math.asin(l)) / (l * Math.PI)) + [0, -4, 0, 9][k]}
            size={11.5}
            fill={familyColor(k, lams.length)}
            anchor="start"
          >
            {`λ = ${l}`}
          </Label>
        </g>
      ))}
    </Figure>
  )
}

/** The Karplus-Strong loop as a block diagram. */
export function Loop() {
  const y = 90
  const box = (x: number, w: number, label: string, sub: string, c: string) => (
    <g>
      <rect x={x} y={y - 24} width={w} height={48} rx={6} fill={faded(c, 0.82)} stroke={c} strokeWidth={1.4} />
      <Label x={x + w / 2} y={y - 6} size={12.5} fill={ink.primary}>
        {label}
      </Label>
      <Label x={x + w / 2} y={y + 11} size={10.5} fill={ink.muted}>
        {sub}
      </Label>
    </g>
  )
  return (
    <Figure
      width={716}
      height={200}
      caption="The Karplus–Strong string. A delay of P samples, a two-point average that damps each partial a little on every trip and delays the loop by half a sample, and a fractional delay that makes up the length the whole samples cannot. The output can be taken anywhere in the loop; the pitch is fs divided by the total delay."
    >
      <Arrowheads id="ks" colors={[ink.secondary]} />
      <circle cx={70} cy={y} r={15} fill="none" stroke={ink.secondary} strokeWidth={1.4} />
      <Label x={70} y={y + 1} size={15} fill={ink.secondary}>
        +
      </Label>
      <Label x={70} y={y - 40} size={11} fill={ink.muted}>
        pluck
      </Label>
      <line x1={70} y1={y - 32} x2={70} y2={y - 17} stroke={ink.secondary} strokeWidth={1.3} markerEnd={arrow('ks', 0)} />
      <line x1={85} y1={y} x2={122} y2={y} stroke={ink.secondary} strokeWidth={1.3} markerEnd={arrow('ks', 0)} />
      {box(124, 150, 'delay z⁻ᴾ', 'P whole samples', method.waveguide)}
      <line x1={274} y1={y} x2={312} y2={y} stroke={ink.secondary} strokeWidth={1.3} markerEnd={arrow('ks', 0)} />
      {box(314, 160, '½ (1 + z⁻¹)', 'loss, and ½ sample', method.fd2)}
      <line x1={474} y1={y} x2={512} y2={y} stroke={ink.secondary} strokeWidth={1.3} markerEnd={arrow('ks', 0)} />
      {box(514, 140, 'fractional delay', 'η of a sample', method.boundary)}
      <path d={`M654 ${y}H690V${y + 62}H70V${y + 17}`} fill="none" stroke={ink.secondary} strokeWidth={1.3} markerEnd={arrow('ks', 0)} />
      <line x1={690} y1={y} x2={690} y2={y - 42} stroke={ink.secondary} strokeWidth={1.3} markerEnd={arrow('ks', 0)} />
      <Label x={690} y={y - 52} size={11} fill={ink.muted}>
        out
      </Label>
      <Label x={380} y={y + 76} size={11} fill={ink.muted}>
        total delay P + ½ + η = fs / f₀
      </Label>
    </Figure>
  )
}