Condensing

const SIZE = 720;
const SPACING = 9;          // candidate lattice for nucleation sites
const JITTER = 3.3;
const COLD_SCALE = 0.0038;
const COLD_MIN = 0.46;      // warmer than this: never nucleates, ever
const GROW = 0.058;         // base growth; slows as a drop gets larger
const TOUCH = 0.84;         // how much overlap counts as touching

export default function sketch(p) {
  let drops = [];
  let f = 0;

  const reseed = () => {
    const d = new Date();
    const seed = d.getFullYear() * 10000 + (d.getMonth() + 1) * 100 + d.getDate();
    p.noiseSeed(seed);
    p.randomSeed(seed);
  };

  // the surface. never drawn.
  const coldAt = (x, y) => p.noise(x * COLD_SCALE, y * COLD_SCALE);

  const build = () => {
    drops = [];
    for (let gy = SPACING / 2; gy < SIZE; gy += SPACING) {
      for (let gx = SPACING / 2; gx < SIZE; gx += SPACING) {
        const x = gx + p.random(-JITTER, JITTER);
        const y = gy + p.random(-JITTER, JITTER);
        const c = coldAt(x, y);
        if (c < COLD_MIN) continue;
        const t = (c - COLD_MIN) / (1 - COLD_MIN);
        drops.push({ x, y, r: 0.3, rate: GROW * Math.pow(t, 1.35), n: 1 });
      }
    }
    f = 0;
  };

  // two drops touch -> one drop. area is conserved, the centre is mass-weighted.
  // this is the only thing in the picture that moves anything sideways.
  const coalesce = () => {
    const CELL = 30;
    const grid = new Map();
    const key = (i, j) => i * 4096 + j;
    for (let idx = 0; idx < drops.length; idx++) {
      const d = drops[idx];
      const k = key(Math.floor(d.x / CELL), Math.floor(d.y / CELL));
      let l = grid.get(k);
      if (!l) { l = []; grid.set(k, l); }
      l.push(idx);
    }
    const dead = new Set();
    for (const [k, list] of grid) {
      const i = Math.floor(k / 4096), j = k - i * 4096;
      const near = [];
      for (let di = -1; di <= 1; di++) {
        for (let dj = -1; dj <= 1; dj++) {
          const l = grid.get(key(i + di, j + dj));
          if (l) for (const v of l) near.push(v);
        }
      }
      for (const a of list) {
        if (dead.has(a)) continue;
        const A = drops[a];
        for (const b of near) {
          if (b === a || dead.has(b)) continue;
          const B = drops[b];
          const dx = A.x - B.x, dy = A.y - B.y;
          const reach = (A.r + B.r) * TOUCH;
          if (dx * dx + dy * dy < reach * reach) {
            const a1 = A.r * A.r, a2 = B.r * B.r, tot = a1 + a2;
            A.x = (A.x * a1 + B.x * a2) / tot;
            A.y = (A.y * a1 + B.y * a2) / tot;
            A.r = Math.sqrt(tot);
            A.rate = Math.max(A.rate, B.rate);
            A.n += B.n;
            dead.add(b);
          }
        }
      }
    }
    if (dead.size) {
      const next = [];
      for (let i = 0; i < drops.length; i++) if (!dead.has(i)) next.push(drops[i]);
      drops = next;
    }
  };

  p.setup = () => {
    p.createCanvas(SIZE, SIZE);
    reseed();
    p.noStroke();
    build();
  };

  p.draw = () => {
    f++;
    for (const d of drops) d.r += d.rate / (0.6 + d.r * 0.24);
    if (f % 2 === 0) coalesce();

    p.background(8, 9, 12);
    for (const d of drops) {
      p.fill(232, 236, 240, 225);
      p.circle(d.x, d.y, d.r * 2);
    }

    if (f > 2600) { reseed(); build(); }
  };
}