Metaballs 融合光球
Real metaballs need marching squares. This fakes them with six blurred circles and gets 90% of the look for 5% of the code. 真正的 metaball 要写 marching squares,这里用六个模糊圆糊弄过去——效果拿到九成,代码只要零头。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Each of the six circles is drawn at radius 42 with ctx.filter = blur(16px), so their edges bleed into each other long before the shapes actually touch. Because the circles are drawn in the same solid colour, the overlaps merge visually into a single blob. 六个圆都以半径 42 绘制,并设 ctx.filter = blur(16px),所以它们的边缘在形状真正接触之前就已经渗到一起了。又因为用的是同一个实色,重叠部分在视觉上就并成了一个团。
What to change可以改的地方
- 1Increase the radius to 60 with the same blur for stickier merging at a distance.
- 2Add a second pass drawn with screen blending for a brighter core.
- 1半径加到 60、模糊不变,隔着老远就会粘起来。
- 2再叠一遍用 screen 混合模式,中心会更亮。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。