跳到正文
网页珍奇柜Web Curio

可触摸的粒子图像

Interactive Particles,Bruno Imbrizi (Codrops),2019 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步读取图片像素,丢弃暗像素,每个亮像素生成一个实例化小方片
  2. 第 2 步鼠标轨迹画进离屏 canvas,作为 touch 纹理传入着色器
  3. 第 3 步顶点着色器按 touch 纹理位移粒子并叠加噪声抖动
  4. 第 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.