Watts-Strogatz Small-World Network

// Watts-Strogatz small-world network.
// Ring lattice of n=40 nodes each connected to k=6 nearest neighbors,
// then each clockwise edge rewired with probability p. Scrub mouse X
// across [0,1] in log space to watch C(p) stay high while L(p) collapses.

const N = 40, K = 6, HALF_K = K / 2, SEED = 0xC0FFEE, SAMPLES = 48;
let W = 0, H = 0;
let xs, ys, adj, neighbors, nbrCount, dist, queue;
let lastP = -2, p = 0;
let C0 = 0, L0 = 0, Cp = 0, Lp = 0;
let curveP, curveC, curveL;

function mulberry32(a) {
  return function () {
    a = (a + 0x6d2b79f5) | 0; let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function buildRing() {
  adj.fill(0);
  for (let i = 0; i < N; i++) {
    for (let d = 1; d <= HALF_K; d++) {
      const j = (i + d) % N;
      adj[i * N + j] = 1; adj[j * N + i] = 1;
    }
  }
}

function rewire(prob, seed) {
  buildRing();
  const rng = mulberry32(seed);
  for (let d = 1; d <= HALF_K; d++) {
    for (let i = 0; i < N; i++) {
      if (rng() >= prob) continue;
      const j = (i + d) % N;
      adj[i * N + j] = 0; adj[j * N + i] = 0;
      let tries = 0, kNew = -1;
      while (tries++ < 50) {
        const c = Math.floor(rng() * N);
        if (c === i || adj[i * N + c]) continue;
        kNew = c; break;
      }
      if (kNew === -1) { adj[i * N + j] = 1; adj[j * N + i] = 1; }
      else { adj[i * N + kNew] = 1; adj[kNew * N + i] = 1; }
    }
  }
  for (let i = 0; i < N; i++) {
    let c = 0, base = i * N;
    for (let j = 0; j < N; j++) if (adj[i * N + j]) neighbors[base + c++] = j;
    nbrCount[i] = c;
  }
}

function clustering() {
  let sum = 0, m = 0;
  for (let i = 0; i < N; i++) {
    const ki = nbrCount[i];
    if (ki < 2) continue;
    const base = i * N;
    let tri = 0;
    for (let a = 0; a < ki; a++) {
      const u = neighbors[base + a];
      for (let b = a + 1; b < ki; b++) {
        if (adj[u * N + neighbors[base + b]]) tri++;
      }
    }
    sum += tri / ((ki * (ki - 1)) / 2);
    m++;
  }
  return m ? sum / m : 0;
}

function pathLen() {
  let total = 0, count = 0;
  for (let s = 0; s < N; s++) {
    const sb = s * N;
    for (let i = 0; i < N; i++) dist[sb + i] = -1;
    dist[sb + s] = 0;
    let head = 0, tail = 0;
    queue[tail++] = s;
    while (head < tail) {
      const u = queue[head++], base = u * N, ku = nbrCount[u], d1 = dist[sb + u] + 1;
      for (let a = 0; a < ku; a++) {
        const v = neighbors[base + a];
        if (dist[sb + v] === -1) { dist[sb + v] = d1; queue[tail++] = v; }
      }
    }
    for (let t = 0; t < N; t++) {
      if (t === s) continue;
      const d = dist[sb + t];
      if (d > 0) { total += d; count++; }
    }
  }
  return count ? total / count : 0;
}

function recompute(prob) {
  rewire(prob, SEED ^ Math.floor(prob * 100000));
  Cp = clustering(); Lp = pathLen();
}

function init({ width, height }) {
  W = width; H = height;
  xs = new Float32Array(N); ys = new Float32Array(N);
  adj = new Uint8Array(N * N);
  neighbors = new Int32Array(N * N);
  nbrCount = new Int32Array(N);
  dist = new Int32Array(N * N);
  queue = new Int32Array(N);
  curveP = new Float32Array(SAMPLES);
  curveC = new Float32Array(SAMPLES);
  curveL = new Float32Array(SAMPLES);
  rewire(0, SEED); C0 = clustering(); L0 = pathLen();
  for (let i = 0; i < SAMPLES; i++) {
    const t = i / (SAMPLES - 1);
    const pi = Math.pow(10, -3 + 3 * t);
    rewire(pi, SEED ^ Math.floor(pi * 100000));
    curveC[i] = clustering(); curveL[i] = pathLen(); curveP[i] = pi;
  }
  recompute(0); lastP = 0;
}

function pFromInput(input) {
  const x = input.mouseX;
  let frac;
  if (x === undefined || x === null || x < 0 || x > W) {
    frac = 0.5 + 0.5 * Math.sin(performance.now() * 0.00035);
  } else frac = Math.max(0, Math.min(1, x / W));
  return Math.pow(10, -3 + 3 * frac);
}

function layoutRing() {
  const cx = W * 0.27, cy = H * 0.55, R = Math.min(W * 0.22, H * 0.36);
  for (let i = 0; i < N; i++) {
    const a = (i / N) * Math.PI * 2 - Math.PI / 2;
    xs[i] = cx + Math.cos(a) * R; ys[i] = cy + Math.sin(a) * R;
  }
}

function tick({ ctx, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }
  p = pFromInput(input);
  if (Math.abs(Math.log10(p + 1e-9) - Math.log10(lastP + 1e-9)) > 0.02) {
    recompute(p); lastP = p;
  }
  ctx.fillStyle = "#0a0d14"; ctx.fillRect(0, 0, W, H);
  layoutRing(); drawNet(ctx); drawPlot(ctx); drawHUD(ctx);
}

function drawNet(ctx) {
  for (let i = 0; i < N; i++) {
    for (let j = i + 1; j < N; j++) {
      if (!adj[i * N + j]) continue;
      const rd = Math.min((j - i + N) % N, (i - j + N) % N);
      const orig = rd <= HALF_K;
      ctx.strokeStyle = orig ? "rgba(140,160,200,0.35)" : "rgba(255,120,90,0.85)";
      ctx.lineWidth = orig ? 1 : 1.4;
      ctx.beginPath(); ctx.moveTo(xs[i], ys[i]); ctx.lineTo(xs[j], ys[j]); ctx.stroke();
    }
  }
  ctx.fillStyle = "#e8ecf5";
  for (let i = 0; i < N; i++) {
    ctx.beginPath(); ctx.arc(xs[i], ys[i], 3.2, 0, Math.PI * 2); ctx.fill();
  }
}

function xForP(pi, x0, w) {
  const t = (Math.log10(pi) + 3) / 3;
  return x0 + Math.max(0, Math.min(1, t)) * w;
}

function drawPlot(ctx) {
  const x0 = W * 0.54, y0 = 60, w = W - x0 - 24, h = H - y0 - 72;
  if (w < 80 || h < 80) return;
  ctx.fillStyle = "rgba(0,0,0,0.4)"; ctx.fillRect(x0 - 8, y0 - 18, w + 16, h + 60);
  ctx.strokeStyle = "#3a4566"; ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x0, y0 + h); ctx.lineTo(x0 + w, y0 + h); ctx.stroke();
  ctx.strokeStyle = "rgba(80,95,130,0.4)"; ctx.fillStyle = "#7a8aa8";
  ctx.font = "10px monospace"; ctx.textAlign = "center";
  for (let e = -3; e <= 0; e++) {
    const xx = xForP(Math.pow(10, e), x0, w);
    ctx.beginPath(); ctx.moveTo(xx, y0); ctx.lineTo(xx, y0 + h); ctx.stroke();
    ctx.fillText(`10^${e}`, xx, y0 + h + 12);
  }
  ctx.fillStyle = "#aab4c8";
  ctx.fillText("rewiring probability p (log)", x0 + w / 2, y0 + h + 26);

  function plotCurve(arr, base, color) {
    ctx.strokeStyle = color; ctx.lineWidth = 1.8; ctx.beginPath();
    for (let i = 0; i < SAMPLES; i++) {
      const yn = base > 0 ? arr[i] / base : 0;
      const xx = xForP(curveP[i], x0, w);
      const yy = y0 + h - Math.max(0, Math.min(1, yn)) * h;
      if (i === 0) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy);
    }
    ctx.stroke();
  }
  plotCurve(curveL, L0, "#7adfff");
  plotCurve(curveC, C0, "#ffae5c");

  const px = xForP(p, x0, w);
  ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 1.2; ctx.setLineDash([4, 3]);
  ctx.beginPath(); ctx.moveTo(px, y0); ctx.lineTo(px, y0 + h); ctx.stroke();
  ctx.setLineDash([]);

  const cy = y0 + h - Math.max(0, Math.min(1, C0 > 0 ? Cp / C0 : 0)) * h;
  const ly = y0 + h - Math.max(0, Math.min(1, L0 > 0 ? Lp / L0 : 0)) * h;
  ctx.fillStyle = "#ffae5c"; ctx.beginPath(); ctx.arc(px, cy, 4, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = "#7adfff"; ctx.beginPath(); ctx.arc(px, ly, 4, 0, Math.PI * 2); ctx.fill();

  ctx.textAlign = "left"; ctx.font = "11px monospace";
  ctx.fillStyle = "#ffae5c"; ctx.fillText("C(p)/C(0)  clustering", x0 + 8, y0 + 14);
  ctx.fillStyle = "#7adfff"; ctx.fillText("L(p)/L(0)  path length", x0 + 8, y0 + 28);
}

function drawHUD(ctx) {
  const pad = 12;
  ctx.fillStyle = "rgba(0,0,0,0.6)"; ctx.fillRect(pad, pad, 252, 96);
  ctx.fillStyle = "#fff"; ctx.font = "13px monospace";
  ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
  ctx.fillText(`Watts-Strogatz n=${N} k=${K}`, pad + 10, pad + 20);
  ctx.fillText(`p     = ${p.toFixed(4)}`, pad + 10, pad + 38);
  ctx.fillText(`C(p)  = ${Cp.toFixed(3)}   C(0)=${C0.toFixed(3)}`, pad + 10, pad + 56);
  ctx.fillText(`L(p)  = ${Lp.toFixed(2)}    L(0)=${L0.toFixed(2)}`, pad + 10, pad + 74);

  let regime, color;
  if (p < 0.01) { regime = "regular lattice (high C, high L)"; color = "#ffae5c"; }
  else if (p < 0.2) { regime = "SMALL-WORLD regime (high C, low L)"; color = "#7aff9a"; }
  else { regime = "random graph (low C, low L)"; color = "#7adfff"; }
  ctx.fillStyle = "rgba(0,0,0,0.6)"; ctx.fillRect(pad, H - pad - 28, 340, 28);
  ctx.fillStyle = color; ctx.fillText(regime, pad + 10, H - pad - 10);
}