可触摸的粒子图像
Interactive Particles,Bruno Imbrizi (Codrops),2019 年

正在布展…
它是怎么做的
- 第 1 步读取图片像素,丢弃暗像素,每个亮像素生成一个实例化小方片
- 第 2 步鼠标轨迹画进离屏 canvas,作为 touch 纹理传入着色器
- 第 3 步顶点着色器按 touch 纹理位移粒子并叠加噪声抖动
- 第 4 步片元着色器按原图颜色着色并做圆形软边
复刻配方
一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。
Read an image's pixels into a canvas and create one instanced quad per pixel whose brightness exceeds a threshold, storing its grid position and a random value as instance attributes. Maintain an offscreen canvas where the pointer path is drawn as fading radial gradients and upload it as a texture each frame. In the vertex shader, sample this touch texture at the particle's UV and push the particle outward along a random angle by that amount, plus a little noise jitter. Shade each quad with the source pixel color and a soft circular mask.
档案
能不能拿来用
原作不是开源许可(Codrops resource licence (free to build on, no as-is redistribution; package.json says MIT)):只能作为视觉参考,不要复制它的代码或素材,自己按技术思路实现。
性能开销
视觉强度
实现难度
尺度为策展判断(1 到 5),用于比较和推荐。
核实记录:Repo exists with README describing a Codrops custom licence; tympanus.net demo returns 403 to automated fetch (bot protection), so demo not visually confirmed.


