什么是故障艺术
故障艺术主动使用图像与颜色的失真、破碎、错位和变形，把原本需要排除的技术故障转化为审美材料。参考文章将常见表达归纳为六类，本案例逐项转译为视频处理算法。
学习目标
01
理解故障艺术如何把数字系统中的失真、破碎、错位与变形转化为视觉语言。
02
使用 createVideo() 获取动态画面，并把每一帧作为 p5.js 图像处理的输入。
03
分别实现数据块像素化、双重曝光、RGB 颜色退化、噪点颗粒、扭曲纹理与故障字体。
04
用固定时间轴切换算法，保证六种效果按时段独立呈现而不叠加。
核心概念
原理解析
视频帧就是动态图像
createVideo() 静音循环播放 face.mp4；drawVideoFrame() 每帧把视频写入 frameBuffer。后续函数只读取这张当前帧，不直接修改原视频资源。
六种技法，六个独立时段
每段持续 4 秒，一个 24 秒周期只激活一个渲染函数。
- 00–04s：数据块像素化
- 04–08s：双重曝光
- 08–12s：RGB 颜色退化
- 12–16s：噪点与颗粒
- 16–20s：扭曲纹理
- 20–24s：故障字体
每种效果处理不同信息
参考文章中的作品不是轻微滤镜：像素化用大块缺损和位移破坏轮廓；双重曝光拉开青色与品红色人像；颜色退化拆开 RGB 通道；噪点制造密集静电与信号断层；扭曲纹理逐条横向挪动画面；故障字体则把大字切开、拉伸后重新拼合。
代码执行路径
draw() 先更新当前视频帧，再由 getStageIndex() 计算时段，最后只调用 EFFECTS[stageIndex].render。updateStageLabel() 同步案例下方的阶段名称，便于把画面与算法对应起来。
- 视频层：face.mp4 → frameBuffer
- 时间层：millis() → 0–5 阶段索引
- 效果层：单一 render 函数 → canvas
案例演示
实时运行 · 01 像素化 Pixelization
sketch.js打开源码
正在载入源码…核心要点
故障来自有意破坏信息
不同技法分别改变空间分辨率、画面位置、颜色层次、信号噪声、表面纹理或文字结构。
分时展示才能看清差异
每个阶段只运行一种效果，让观察者可以直接比较六种处理方式，而不会被复合视觉干扰。
缓冲区隔离处理职责
frameBuffer 保存视频帧，pixelBuffer 负责低分辨率图像，textBuffer 负责字体切片，三者互不污染。