Blobs2D

Version 2.0 — © 1996-1999 Christian Cohnen

A classic demoscene effect: soft, glowing blobs that float across the screen, merge when they overlap and create colorful organic shapes. Well known from countless Amiga, Atari ST and PC demos, 2D blobs are surprisingly simple compared to their 3D metaball cousins — no ray marching, no isosurface extraction, just a precalculated radial falloff stamped onto a framebuffer.

The blob function uses a squared distance falloff: for each pixel inside the blob radius, the intensity is (1 − r²/R²)², giving a smooth bell-shaped bump. This field is precalculated once and then simply added to the screen buffer at each blob position every frame. Even-numbered blobs add their field (bright), odd-numbered blobs subtract (creating dark "anti-blobs") — when they overlap, positive and negative values cancel out, producing interesting interference patterns.

The color palette is hardcoded as a gradient from black through green, red, yellow, white and blue — so the overlapping intensities naturally produce vivid color shifts as blobs merge and separate. A pixelsize parameter lets you render at lower resolution for a chunky retro look.

Originally a Java applet (1996). The original Java applet code was transpiled to JavaScript/Canvas in 2026 so the effect can run in modern browsers without a Java plugin. The JavaScript version uses Canvas pixel manipulation with an indexed color palette rendered via Uint32Array for fast true color output.

Features

• Precalculated blob field for fast per-frame rendering
• Additive and subtractive blobs for interference patterns
• Configurable blob count, size and pixel scaling
• Constant-speed movement with delta-time compensation
• Indexed color palette (black → green → red → yellow → white → blue)
• Mouse interaction: additive blobs are attracted, subtractive blobs are repelled by the cursor
• 60 fps via requestAnimationFrame

Parameters (BLOBS_CFG)

Code Example

<canvas id="game" width="200" height="200"></canvas>
<script>var BLOBS_CFG = { blobsize: 64, numberblobs: 6 };</script>
<script src="blobs2d.min.js"></script>

Original Applet

Originally a Java applet (1996). The original used Java’s IndexColorModel with a MemoryImageSource for 8-bit indexed rendering. The blob field was stored as signed bytes and the palette provided 256-color gradients. The JavaScript version replicates the same palette and blob math, rendering via Canvas ImageData with a Uint32Array view for fast pixel writes.

Version History