Glowing blobs that merge and split like a lava lamp.
Each blob contributes a field that falls off with distance, and the fields are summed at every point. Wherever the total crosses a threshold you see blob, which is why two blobs bridge smoothly when they get close. The field is evaluated per pixel at reduced resolution, then shaded with a warm gradient and a soft highlight.
Try it. Move the pointer to drag a blob through the lamp.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a glowing lava lamp out of metaballs with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and resizes with it.
- Create 8 blobs, each with a position, a velocity and a radius of about 6% of the window height.
- Each frame, render into a small offscreen canvas about 300 pixels wide using ImageData. For each pixel, sum r² / d² over all blobs, where d is the distance to that blob. Wherever the sum is above 1, the pixel is wax; otherwise it is liquid. Scale the small canvas up with drawImage to fill the window.
- Paint the liquid with a vertical gradient from deep violet at the top to magenta at the bottom, and the wax a warm orange.
- Give each blob a temperature: it heats up near the bottom and cools near the top, and its upward force is proportional to how hot it is. Add heavy drag so everything moves slowly, like syrup.
Once that works, make it beautiful:
- Smooth the wax edge by blending over a narrow band of field values around 1 instead of a hard cutoff.
- Shade the wax as 3D: sqrt(1 - 1 / field) is a perfect hemisphere for a single blob, so use the differences of that height between neighboring pixels as a surface normal for a highlight and soft lighting.
- Add a pool of wax resting on the bottom, a warm glow from the bulb, and faint vertical reflections on the glass.
- Let me drag a blob around with the pointer.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as marching squares for crisp vector outlines, a color picker for the lamp, or blobs that split when stretched.
