AI Metaball Lava Lamp - Hypnotic Blob Fusion Watch colorful blobs float and merge like a real lava

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1); // Keep pixel math simple & fast
  initField();
}

function initField() {
  const gw = max(160, floor(width  / 2)); // lower res = faster, still smooth
  const gh = max(120, floor(height / 2));

  fieldGraphics = createGraphics(gw, gh); // https://p5js.org/reference/#/p5/createGraphics
  fieldGraphics.pixelDensity(1);

  initMetaballs();
}

function initMetaballs() {
  metaballs = [];
  const gw = fieldGraphics.width;
  const gh = fieldGraphics.height;
  const base = min(gw, gh);

  for (let i = 0; i < NUM_METABALLS; i++) {
    const radius     = random(0.18, 0.28) * base;
    const amplitudeX = random(0.20, 0.45) * gw;
    const amplitudeY = random(0.20, 0.45) * gh;
    const speedX     = random(0.15, 0.40); // different speeds per axis
    const speedY     = random(0.15, 0.40);
    const phase      = random(TWO_PI);

    metaballs.push({
      radius,
      amplitudeX,
      amplitudeY,
      speedX,
      speedY,
      phase
    });
  }
}

function draw() {
  background(bgColor[0], bgColor[1], bgColor[2]);
  drawMetaballs();
}

function drawMetaballs() {
  const gw = fieldGraphics.width;
  const gh = fieldGraphics.height;

  const isoLevel = 1.0;  // threshold where the blob "surface" appears
  const falloff  = 3.0;  // how quickly color moves from orange to magenta

  const n = metaballs.length;
  const centersX = new Array(n);
  const centersY = new Array(n);
  const strengths = new Array(n);

  const t = frameCount * 0.02; // time for smooth oscillation

  // Precompute metaball centers and strengths this frame
  for (let i = 0; i < n; i++) {
    const m = metaballs[i];

    centersX[i] = gw / 2 + m.amplitudeX * sin(t * m.speedX + m.phase);
    centersY[i] = gh / 2 + m.amplitudeY * cos(t * m.speedY + m.phase * 1.37);

    // Classic metaball field: strength = radius^2
    strengths[i] = m.radius * m.radius;
  }

  fieldGraphics.loadPixels(); // https://p5js.org/reference/#/p5/loadPixels
  const pixels = fieldGraphics.pixels;

  for (let y = 0; y < gh; y++) {
    for (let x = 0; x < gw; x++) {
      let field = 0;

      // Accumulate influence from each metaball: Σ (r^2 / d^2)
      for (let i = 0; i < n; i++) {
        const dx = x - centersX[i];
        const dy = y - centersY[i];
        let distSq = dx * dx + dy * dy;
        if (distSq < 0.0001) distSq = 0.0001; // avoid division by zero
        field += strengths[i] / distSq;
      }

      const idx = 4 * (y * gw + x);

      if (field <= isoLevel) {
        // Outside blobs: dark background
        pixels[idx + 0] = bgColor[0];
        pixels[idx + 1] = bgColor[1];
        pixels[idx + 2] = bgColor[2];
        pixels[idx + 3] = 255;
      } else {
        // Inside blob: smooth gradient + soft edge
        // u controls color along orange -> magenta
        const u = constrain((field - isoLevel) / falloff, 0, 1);

        // alpha controls the softness of the blob edge
        const edgeWidth = 0.8;
        const alpha = constrain((field - isoLevel) / edgeWidth, 0, 1);

        const r = startColor[0] + (endColor[0] - startColor[0]) * u;
        const g = startColor[1] + (endColor[1] - startColor[1]) * u;
        const b = startColor[2] + (endColor[2] - startColor[2]) * u;

        pixels[idx + 0] = r;
        pixels[idx + 1] = g;
        pixels[idx + 2] = b;
        pixels[idx + 3] = 255 * alpha;
      }
    }
  }

  fieldGraphics.updatePixels(); // https://p5js.org/reference/#/p5/updatePixels

  // Scale the low-res field up to full canvas for a smooth, hypnotic look
  image(fieldGraphics, 0, 0, width, height); // https://p5js.org/reference/#/p5/image
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  initField(); // rebuild buffer & metaballs for new size
}