∿ Generative art

Metaballs

메타볼

Blobs that merge into each other with a smooth, surface-tension-like seam instead of simply overlapping.

Also known as: Blobby objectsIsosurface blending

···

js

const c = document.createElement('canvas');
document.body.appendChild(c);
c.style.width = '100%'; c.style.height = '100%';
const ctx = c.getContext('2d');
const GW = 110, GH = 66;
const small = document.createElement('canvas');
small.width = GW; small.height = GH;
const sctx = small.getContext('2d');
const img = sctx.createImageData(GW, GH);
const cs = getComputedStyle(document.documentElement);
const rgb = (cs.getPropertyValue('--accent').trim() || '#5b5bf7').match(/[0-9a-f]{2}/gi).map((x) => parseInt(x, 16));
let w, h;
function resize() {
  const dpr = Math.min(devicePixelRatio || 1, 2);
  w = innerWidth; h = innerHeight;
  c.width = w * dpr; c.height = h * dpr;
}
addEventListener('resize', resize);
resize();

const N = 6;
const balls = Array.from({ length: N }, () => ({ x: Math.random(), y: Math.random(), vx: (Math.random() - 0.5) * 0.006, vy: (Math.random() - 0.5) * 0.006, r: 0.09 + Math.random() * 0.06 }));
function step() {
  for (const b of balls) {
    b.x += b.vx; b.y += b.vy;
    if (b.x < 0.05 || b.x > 0.95) b.vx *= -1;
    if (b.y < 0.05 || b.y > 0.95) b.vy *= -1;
  }
}
function render() {
  for (let gy = 0; gy < GH; gy++) for (let gx = 0; gx < GW; gx++) {
    const px = gx / GW, py = gy / GH;
    let field = 0;
    for (const b of balls) { const dx = px - b.x, dy = py - b.y; field += (b.r * b.r) / (dx * dx + dy * dy + 0.0001); }
    const n = Math.max(0, Math.min(1, (field - 0.9) * 1.6));
    const i = (gy * GW + gx) * 4;
    img.data[i] = rgb[0] * n; img.data[i + 1] = rgb[1] * n; img.data[i + 2] = rgb[2] * n; img.data[i + 3] = 255;
  }
  sctx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = true;
  ctx.fillStyle = '#0d0d12'; ctx.fillRect(0, 0, c.width, c.height);
  ctx.drawImage(small, 0, 0, c.width, c.height);
}
for (let i = 0; i < 30; i++) step();
render();
(function loop() { step(); render(); requestAnimationFrame(loop); })();

Simply overlapping circles gives you circles with sharp, overlapping edges. Metaballs take a different approach — at every point on the screen, sum up "how close am I to each blob" into a single field value, and only paint the region where that value crosses a threshold. As two blobs approach each other, their fields overlap and the region above the threshold connects into a smooth bridge, so the two circles merge like drops of water touching. The idea was formalised in the early 1980s by researchers including Jim Blinn, aiming to render soft, organic character shapes.

This demo divides the screen into a coarse grid, computes the field value at each grid point, and shades the area near the threshold with a soft gradient (a simplified approximation rather than the marching squares algorithm that extracts an exact vector outline). Production renderers use marching squares to trace that boundary as a precise contour.

Use it for liquid-feeling logo animation, loading indicators, and organic UI background decoration.

When to use

Use it for liquid-feeling logo/loading motion or organic blob backgrounds. Trace an exact vector outline with marching squares if you need one.