在计算机科学中，quine（自复制程序）是一个经典的概念：一个能够输出自身源代码的程序。这种自我引用的特性不仅具有理论意义，也激发了无数程序员的创造力。当 Larva Labs（CryptoPunks 的创造者）将这一概念引入生成艺术领域时，他们面临了一个新的挑战：如何将这种抽象的程序概念通过动画可视化，让观众直观理解代码与艺术之间的奇妙关系？
Quine 的艺术化扩展
Larva Labs 的 Quine 项目不仅仅是简单的程序展示，而是将 quine 概念扩展到了生成艺术的维度。每个 Quine 作品都包含两个层面：视觉上的像素艺术和嵌入其中的可执行 JavaScript 代码。正如项目描述所言：“Quine 是一个生成艺术项目，模糊了其代码与所产生的艺术之间的界限。”
这种设计的精妙之处在于，如果你提取嵌入在艺术品中的代码并运行它，它将生成该 quine 序列的下一个变体。更深入的是，每个 quine 都有一个 “quinity” 特性 —— 可以是 3-Quine、5-Quine、7-Quine 等。对于一个 3-Quine，如果你反复提取并运行每个 quine 生成中的代码，在第三代之后，它将循环回到起点。
动画实现的技术挑战
当 Jonnie Hallman（@destroytoday）接到为 Quine 项目制作动画的任务时，他立即意识到了性能挑战的严重性。每个 quine 的尺寸为 1440×2560 像素，构成每个 quine 的正方形为 14×14 像素，之间有 2 像素的间隙。这意味着单个 quine 作为 SVG 可能包含多达 14,400 个<rect>元素。此外，每个 quine 还可能包含 3,500 到 4,500 个<tspan>元素，这些元素来自打印在其中的代码。
对于熟悉 SVG 性能的人来说，这是大量需要显示的元素，更不用说动画了。Hallman 在考虑坚持使用 SVG 之前没有浪费任何时间，立即将注意力转向了<canvas>—— 这个硬件加速的 HTML 元素可以在不费吹灰之力的情况下动画数千个形状。
从 SVG 到 Canvas 的技术迁移
尽管 Canvas 在性能上可以轻松超越 SVG，Hallman 仍然感到有必要进行一些性能测试。他首先测试了极端情况 —— 单独动画所有形状。虽然他没有打算实际采用这种方法，并且知道这将是性能最慢的，但他仍然希望建立一个基准来衡量有多慢—— 令人惊讶的是，结果并不差！
接下来，他尝试动画代表代码的文本。这次不是再次动画位置，而是专注于变换缩放。同样，结果不错！然后，他测试了更现实的方法 —— 将元素分组进行动画。这肯定会提高性能，因为他不仅动画单个图层，还避免了在每个元素上的迭代循环。
最后，他测试了动画位于文本后面的元素组。由于<canvas>的平面性质，他不期望这会影响性能，但仍然好奇地将其视为一种令人困惑的视觉效果！
动画设计中的隐喻与用户体验
在思考 quine 生成过程时，Hallman 立即想象了一个 quine 被 “打印” 出来的场景，就像喷墨打印机一样 —— 沿着单一方向逐行打印。从涉及分层组的性能测试中，他还想象了将单个颜色作为单独的通道打印，就像丝网印刷一样。
结合这两个隐喻，他迭代了几个变体：
- 单一方向线性通道，其中 “墨水” 随着刮刀移动直到到达其位置
- 带有缓动的单一方向通道
- 带有缓动的双向通道
- 带有打印机行的单一方向线性通道，揭示每一行
Hallman 发现自己最被机械方法所吸引 —— 缓慢而线性。他希望 quine 从每个图层中浮现出来时带有一种期待感。
代码层的视觉强调
在确定了运动方式后，Hallman 放大了 quine 的细节部分 —— 其中的代码。最初，他将代码与其正方形一起 “打印”，但这过于埋没了重点。通过一起打印它们，尽管代码是 quine 存在的原因，但它们具有相同的权重。对于未经训练的眼睛，如果代码与正方形一起打印，你甚至可能完全错过代码。
回想起图层的概念，Hallman 决定尝试先打印代码 —— 在其自己的图层上 —— 以强调它可以独立存在，并且观众应该注意到它。只有这样，他才开始打印正方形的图层以将两者结合起来。在这个过程中，他引入了另一个过渡机会 —— 代码在正方形被打印时反转自身。通过这种视觉效果，我们真正强调了 quine 中包含代码的信息。
扫描动画与 IDE 隐喻
在打印动画之后，是时候转向扫描动画了。Hallman 已经强调了 quine 中包含代码，但他还需要传达这些代码既有意义又可读 —— 不仅仅是随机片段。人们通常使用 IDE 与代码交互，那么为什么不在演示中包含一个呢？
借鉴 AI 聊天界面中常见的文本流效果，Hallman 决定将这种效果与一个模拟 “扫描器” 结合起来，该扫描器经过原始 quine。尽管这简单直接，但它传达了一个观点：quine 中的代码实际上是真实的，并且在以熟悉的格式和环境显示时是可识别的。
性能优化的关键参数
在 Canvas 动画的实现中，有几个关键的性能优化参数值得注意：
- 批处理绘制调用：将 14,400 个矩形元素分组为更少的绘制调用，减少 GPU 开销
- 离屏 Canvas 缓存：预渲染静态部分，避免每帧重新计算
- 请求动画帧节流：根据设备性能动态调整帧率
- 图层分离策略：将代码层和图形层分开渲染，避免不必要的重绘
Hallman 提到：“即使 Canvas 可以轻松超越 SVG，我仍然感到有必要进行一些性能测试。我首先测试了极端情况 —— 单独动画所有形状。虽然我没有打算实际采用这种方法，并且知道这将是性能最慢的，但我仍然希望建立一个基准来衡量有多慢 —— 令人惊讶的是，结果并不差！”
生成循环的动画实现
现在 Hallman 已经有了打印和扫描动画，是时候将两者结合起来了。他会从原始 quine 生成的打印动画开始，但然后会为下一代重复使用它，与扫描动画并行。尽管他分别构建了这些动画，但它们锁定得如此之好，以至于他没有任何修改意见。只要他继续依赖模拟隐喻，整体动画就会继续自行编写。打印 quine。扫描 quine。扫描 quine 会打印 quine。
在屏幕录制动画后，Hallman 有了他的可交付成果 —— 一个将用作 Matt 和 John 公告视频 b-roll 的动画。而且，由于动画是视频格式而不是实时交互的，他不需要担心所有他习惯的典型考虑因素，比如响应性、在较慢机器上的性能、与不同浏览器的兼容性，甚至接下来会发生什么。他可以专注于一个单一的动画，可视化核心概念，而 Matt 则用口头解释为其配音。
画廊展示的扩展需求
在拍卖尘埃落定后，Larva Labs 再次联系了 Hallman，涉及项目的扩展。几周后，他们将在迈阿密的 Art Basel 以画廊形式展示 Quine。除了墙上几个 quine 的装裱印刷品和一张展示每个 quine 网格的巨大长桌外，他们还将有一台 4K 电视，再次帮助以视觉方式演示概念，但这次是作为循环视频。
视频格式的可交付成果仍然使他免于实时动画的考虑，但现在他需要 “升级” 动画。动画不会在扫描和打印一次后结束，而是需要生成整个 quine 序列并带有过渡，自动进行到下一个 quine，然后在完成后循环回到开头。John 为 Hallman 提供了一个包含 10 个 quine 的列表，其 quinity 范围从 3 到 11。这将导致一个长度为 8 分 28 秒的动画。
幸运的是，quine 生成流程的布局，加上 Hallman 对其应该如何移动的直觉，使他在第一次尝试时就成功了。在扫描和打印 quine 序列中的下一代后，两代及其 “代码编辑器” 将滑动和淡出，因此生成的图像将成为源图像，该图像将被扫描并打印下一代。理论上，他可以让动画不间断地运行，并且它将永远循环，因为他实际的动画代码字面上提取 quine 的代码并使用它来生成下一个动画。一个生成器的生成器，本身。
技术实现的启示
Quine 动画项目的技术实现提供了几个重要的启示：
-
性能优先的设计决策：当面临 SVG 的性能限制时，果断转向 Canvas 是明智的选择。这种技术栈的迁移决策需要基于实际性能测试数据。
-
隐喻驱动的用户体验：打印和扫描的隐喻不仅帮助用户理解抽象概念，也为动画设计提供了自然的叙事结构。
-
分层渲染策略：将代码层和视觉层分离渲染，不仅提高了性能，也增强了信息的层次感。
-
可扩展的架构设计：支持从单个 quine 动画扩展到完整序列循环的架构，展示了良好的系统设计思维。
结语
Quine 动画项目展示了如何将抽象的计算机科学概念通过精心设计的动画转化为直观的视觉体验。从技术角度来看，它证明了在面对大规模图形渲染挑战时，正确的技术选择和性能优化策略的重要性。从设计角度来看，它展示了隐喻和叙事在复杂概念传达中的价值。
正如 Hallman 所反思的：“经过多年只专注于产品和网络工作，生活给了我一个机会，以实际意义回归创意代码世界。我还有机会与我自 2018 年上次自由职业以来未曾合作过的亲密朋友合作。这感觉就像是独立生活的完美重新引入，而这一切都是因为那天晚上我在从工作室回家的路上遇到了 John。”
这个项目不仅是一个技术成就，也是创意与技术完美结合的典范，为未来的生成艺术和程序动画项目提供了宝贵的参考。
资料来源：