本文介绍了我在 p5.js 中的一个创意编码研究，我在同一画面里结合了两种视觉语言：一套严格的三维结构——嵌套的线框立方体，以及受 Sonia Delaunay 和 Orphism 启发的平面二维图层。我专为 VJ 投影和环境音乐演出而设计了这个结果。
同一画面中的两套系统
我的基础由四个相互嵌套的线框立方体构成。首先我让每个立方体以略有不同的速度旋转，营造出一种平静的机械节奏。除此之外，我在边缘上放置了沿边轨道运行和滑动的小点——它们遵循几何结构，但为画面注入了生命的脉动，像能量在结构中流动。
在此之上我加入了一个 Orphic 叠层：同心圆环和弧线相互重叠、相互切割，形成一种运动的拼贴。我有意保持这一图层的扁平与图形化——与立方体的深度形成对比。这两套系统共同制造出一种安静的视觉张力，适合长时间投影。
色彩即运动
我选择了与 Delaunay 的“同时对比”相呼应的配色：红、黄、蓝、橙、绿、白和黑。在这里色彩不是装饰——它主导着被感知到的运动。因此，即便动画保持细微，画面也会持续变化，因为缓慢的旋转与强烈的对比不断生成新的组合。
一个关键细节：我把白色当作空间而不是颜料。我将本应为白色的部分保持透明，让黑色背景透过。因此这些环看起来像是从黑暗中被切割出来的——更显轻盈与建筑感。
为什么它适合环境音乐
环境音乐不需要快节奏的剪辑。相反，它需要能够“呼吸”的视觉。这就是我让动画保持缓慢且分层的原因。立方体提供结构，圆圈与弧线带来节奏与色彩运动，环绕的小点则形成稳定的脉动。正因为如此，它们共同构建出适合投影的安静张力——你可以长时间观看，仍能发现新的组合。
我将这项创意编码研究直接关联到我在 Resolume 中的现场 VJ 投影作品。
技术说明 — p5.js WEBGL
我在 p5.js 的 WEBGL 模式下以 1920×1080 构建了该视觉效果。我用简单形状和重复图案构成所有内容：将圆环视为分段几何体、将弧线作为切片图层、将立方体作为线框。我从零编写了完整代码，没有使用着色器或外部依赖——只有构图与运动。
最后，如果你想了解更多这项作品，请访问 创意编码概览 或 FDR-Sound 音乐页面。
