Film Grain 噪点颗粒
Every frame, a fresh ImageData buffer filled with random grey at 14% alpha. 每帧新建一块 ImageData,用随机灰填满,再以 14% 的透明度贴上去。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
This is the one effect that is genuinely per-pixel: the loop writes random values into all four channels of a new ImageData and blits it with putImageData. Alpha is fixed at 35/255, which is what makes it grain over the content rather than a white noise screen. 这是少数真正逐像素的效果:循环往新 ImageData 的四个通道写随机值,再用 putImageData 贴回画布。alpha 固定 35/255,正是这个值让它成为「覆盖在内容上的颗粒」,而不是一块雪花屏。
What to change可以改的地方
- 1Raise the alpha to 80 for aggressive film grain, or lower it to 10 for a subtle texture.
- 2Update only every other frame to halve the cost at almost no visual difference.
- 1alpha 提到 80 是粗颗粒胶片,降到 10 是极细的质感。
- 2隔帧才刷新,成本减半、肉眼几乎看不出差别。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。