diffusion.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIFFUSION</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=DM+Mono&display=swap');
  * { margin:0; padding:0; }
  html, body { width:100%; height:100%; background:#020105; overflow:hidden; }
  canvas { position:fixed; inset:0; display:block; image-rendering:pixelated; }
  #label {
    position:fixed; bottom:2rem; right:2rem;
    font-family:'DM Mono',monospace; font-size:0.55rem;
    letter-spacing:0.3em; color:rgba(140,100,200,0.1);
    text-transform:uppercase; pointer-events:none;
  }
  #params {
    position:fixed; bottom:2rem; left:2rem;
    font-family:'DM Mono',monospace; font-size:0.5rem;
    line-height:2; letter-spacing:0.15em;
    color:rgba(140,100,200,0.18); pointer-events:none;
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="params"></div>
<div id="label">DIFFUSION · Gray-Scott · réaction-diffusion</div>

<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

// Simulation at reduced resolution for performance
const SCALE = 3;
let W, H, GW, GH;

function resize() {
  W = innerWidth; H = innerHeight;
  canvas.width = W; canvas.height = H;
  canvas.style.width  = W + 'px';
  canvas.style.height = H + 'px';
  GW = Math.floor(W / SCALE);
  GH = Math.floor(H / SCALE);
  init();
}

// ─── Gray-Scott ───────────────────────────────────────────────────────────────

// Presets: different F/k → different pattern types
const PRESETS = [
  { name: 'coral',     F: 0.0545, k: 0.062, Du: 0.21, Dv: 0.105 },
  { name: 'worms',     F: 0.078,  k: 0.061, Du: 0.21, Dv: 0.105 },
  { name: 'mitosis',   F: 0.0367, k: 0.0649,Du: 0.21, Dv: 0.105 },
  { name: 'labyrinth', F: 0.04,   k: 0.065, Du: 0.21, Dv: 0.105 },
  { name: 'dots',      F: 0.025,  k: 0.06,  Du: 0.21, Dv: 0.105 },
];

let presetIdx = 0;
let preset = PRESETS[0];

let U, V, U2, V2;

function init() {
  U  = new Float32Array(GW * GH);
  V  = new Float32Array(GW * GH);
  U2 = new Float32Array(GW * GH);
  V2 = new Float32Array(GW * GH);

  // Fill with stable state: U=1, V=0
  U.fill(1);
  V.fill(0);

  // Seed: small square(s) of V near center
  const seedCount = 3 + Math.floor(Math.random() * 4);
  for (let s = 0; s < seedCount; s++) {
    const sx = Math.floor(GW * (0.2 + Math.random() * 0.6));
    const sy = Math.floor(GH * (0.2 + Math.random() * 0.6));
    const radius = 5 + Math.floor(Math.random() * 8);
    for (let dy = -radius; dy <= radius; dy++) {
      for (let dx = -radius; dx <= radius; dx++) {
        if (dx*dx + dy*dy <= radius*radius) {
          const ix = (sy + dy) * GW + (sx + dx);
          if (ix >= 0 && ix < GW * GH) {
            U[ix] = 0.5 + Math.random() * 0.1;
            V[ix] = 0.25 + Math.random() * 0.1;
          }
        }
      }
    }
  }

  document.getElementById('params').textContent =
    `F=${preset.F.toFixed(4)} · k=${preset.k.toFixed(4)} · ${preset.name}`;
}

// ─── Step ─────────────────────────────────────────────────────────────────────

function step() {
  const { F, k, Du, Dv } = preset;
  const W = GW, H = GH;

  for (let y = 0; y < H; y++) {
    for (let x = 0; x < W; x++) {
      const i = y*W + x;

      // Laplacian with wrap-around
      const xm = (x-1+W)%W, xp = (x+1)%W;
      const ym = (y-1+H)%H, yp = (y+1)%H;

      const lapU = U[ym*W+x] + U[yp*W+x] + U[y*W+xm] + U[y*W+xp] - 4*U[i];
      const lapV = V[ym*W+x] + V[yp*W+x] + V[y*W+xm] + V[y*W+xp] - 4*V[i];

      const uvv = U[i] * V[i] * V[i];

      U2[i] = U[i] + (Du * lapU - uvv + F * (1 - U[i]));
      V2[i] = V[i] + (Dv * lapV + uvv - (F + k) * V[i]);

      // Clamp
      if (U2[i] < 0) U2[i] = 0;
      if (U2[i] > 1) U2[i] = 1;
      if (V2[i] < 0) V2[i] = 0;
      if (V2[i] > 1) V2[i] = 1;
    }
  }

  // Swap
  const tmp = U; U = U2; U2 = tmp;
  const tmv = V; V = V2; V2 = tmv;
}

// ─── Render ───────────────────────────────────────────────────────────────────

// Pre-allocate ImageData for the simulation grid
let imgData;
function ensureImg() {
  imgData = ctx.createImageData(GW, GH);
}

// Color map: V concentration → color
// Low V (0) → dark indigo, high V (1) → bright violet/white
function colorize(v, u) {
  // v drives color, u gives depth
  const t = Math.min(1, v * 2.5);
  // Palette: dark purple → magenta → warm white
  let r, g, b;
  if (t < 0.5) {
    const s = t * 2;
    r = Math.floor(30  + s * 120);  // 30 → 150
    g = Math.floor(10  + s * 20);   // 10 → 30
    b = Math.floor(60  + s * 120);  // 60 → 180
  } else {
    const s = (t - 0.5) * 2;
    r = Math.floor(150 + s * 95);   // 150 → 245
    g = Math.floor(30  + s * 120);  // 30 → 150
    b = Math.floor(180 + s * 55);   // 180 → 235
  }
  return [r, g, b];
}

function draw() {
  const d = imgData.data;
  for (let i = 0; i < GW * GH; i++) {
    const [r, g, b] = colorize(V[i], U[i]);
    const p = i * 4;
    d[p]   = r;
    d[p+1] = g;
    d[p+2] = b;
    d[p+3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);

  // Scale up
  ctx.drawImage(canvas, 0, 0, GW, GH, 0, 0, W, H);
}

// ─── Loop ─────────────────────────────────────────────────────────────────────

let frameN = 0;
const STEPS_PER_FRAME = 8;

function tick() {
  for (let s = 0; s < STEPS_PER_FRAME; s++) step();

  // Draw at reduced resolution then upscale
  const tmp = ctx.createImageData(GW, GH);
  const d = tmp.data;
  for (let i = 0; i < GW * GH; i++) {
    const [r, g, b] = colorize(V[i], U[i]);
    d[i*4]   = r;
    d[i*4+1] = g;
    d[i*4+2] = b;
    d[i*4+3] = 255;
  }

  // Write to offscreen, scale
  const off = document.createElement('canvas');
  off.width = GW; off.height = GH;
  off.getContext('2d').putImageData(tmp, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(off, 0, 0, W, H);

  frameN++;

  // Cycle preset every ~1200 frames
  if (frameN % 1200 === 0) {
    presetIdx = (presetIdx + 1) % PRESETS.length;
    preset = PRESETS[presetIdx];
    init();
  }

  requestAnimationFrame(tick);
}

// Click: new seed + next preset
canvas.addEventListener('click', e => {
  const x = Math.floor(e.clientX / SCALE);
  const y = Math.floor(e.clientY / SCALE);
  const r = 6;
  for (let dy = -r; dy <= r; dy++) {
    for (let dx = -r; dx <= r; dx++) {
      if (dx*dx+dy*dy<=r*r) {
        const ix = Math.min(GH-1,Math.max(0,y+dy)) * GW + Math.min(GW-1,Math.max(0,x+dx));
        U[ix] = 0.5; V[ix] = 0.25;
      }
    }
  }
});

// Dblclick: change preset
canvas.addEventListener('dblclick', () => {
  presetIdx = (presetIdx + 1) % PRESETS.length;
  preset = PRESETS[presetIdx];
  init();
});

resize();
addEventListener('resize', resize);
requestAnimationFrame(tick);
</script>
<script src="header.js"></script>
</body>
</html>