奇月 发自 凹非寺量子位 | 公众号 QbitAI
老二次元/科技宅倒背如流的Bad Apple动画，网友Nolen Royalty用Vim文本编辑器复现出来了！
而且仅耗时8小时、用了6500个正则表达式！
先来一起瞅瞅效果：
https://mp.weixin.qq.com/s/UaCpTGN6YAiIclorF4QhlA
可以看到，动画基本还原了人物的所有动作，整体视频也很流畅，画风很有经典像素风游戏的味道。
继终端、游戏引擎、ASCII码各种 Bad Apple 整活之后，Vim 编辑器也出息了一回！
难怪有网友说，这就是我们喜欢 Bad Apple 的原因，它总是能带给我们更多惊喜。
PS：如果你还不知道Bad Apple，它是来自《东方Project》中的一个音乐MV，已经成为动画界和科技界的一个梗。不仅有各种二创视频，大家还会在各种硬件和软件上复现它，可以说“有屏幕的地方就有Bad Apple”。
怎么做到的
网友 Nolen Royalty 还热心分享了用 Vim 制作Bad Apple的过程，主要分为以下4步：
1.提取画面帧转换成数组
第一步非常简单，使用 GitHub 用户 Felixoofed 的库就可以获取 Bad Apple 每一帧的数据。
这个仓库里面包含了原始的视频以及一个 ffmpeg 命令，可以将视频转换为约 6500 张 PNG 图片，每张代表一帧。
然后 Nolen 编写了一小段 Python 代码，将每个 PNG 文件转换为 0 和 1 的二维数组（其中 1 代表黑色像素）。
视频最初是 480x360 分辨率，在测量了终端后 Nolen 将其缩小到 120x90。
from PIL import Image
import numpy as np
def process_image(path, target_width=120, target_height=90):
img = Image.open(path)
img = img.resize((target_width, target_height), Image.Resampling.LANCZOS)
if img.mode != "L":
img = img.convert("L")
pixels = np.array(img)
binary_pixels = (pixels < 10).astype(int) # 1 for dark, 0 for light return binary_pixels
def text_preview(binary_pixels):
chars = {0: ".", 1: "#"}
return "\n".join("".join(chars[px] for px in row) for row in binary_pixels)
2.用Vim的高亮匹配功能绘制任意矩形
那么如何在 Vim 中绘制图形呢？
假设你在文本中创建了一个主要由 A 组成的网格，并在其中嵌入一个由 B 组成的绘图，这样如果你搜索 B，就会看到一个小的棍状人物图形：
使用这个方法就可以画图了，但是还存在2个问题：
a.蓝色高亮（Vim 默认）看起来不太清晰。
Vim 允许用户自行配置高亮功能，调用 hi Search cterm=NONE ctermfg=grey ctermbg=grey ，就可以让它用相同的颜色高亮匹配字符的前景和背景，这样就能得到漂亮的方块：
b.第二个问题是，如何将矩形变为正方形像素。
Nolen 最终找到了Square 字体，这是一个正方形的字体，它最初是为了让用户在终端中玩 roguelike 游戏而设计的，在 Vim 中使用它可以绘制一个非常漂亮的网格：
接下来就是分析每帧画面的信息，生成一个针对主要图形的正则表达式优化文件。
然后作者发现，用Vim 自带的搜索功能就可以生成连续的矩形。
/\%l /\%>l /\%
\%23l Matches in a specific line.
\%<23l Matches above a specific line (lower line number).
\%>23l Matches below a specific line (higher line number).
\%.l Matches at the cursor line.
\%<.l Matches above the cursor line.
\%>.l Matches below the cursor line.
Vim 搜索可以匹配特定的行号（和列号），你可以将多个这样的搜索组合在一起。
例如， \%>5c\%<15c\%>4l\%<9l 可以匹配第 5 列和第 15 列之间以及第 4 行和第 9 行之间的矩形区域。
而且，这种匹配模式还可以和其他 Vim 搜索进行 OR 操作，比如将上面的式子和 - \%>5c\%<15c\%>4l\%<9l\|\%>12c\%<25c\%>10l\%<15l 进行OR操作，就可以绘制出之前的矩形以及位于列 12 和 25 以及行 10 和 15 之间的新矩形。
这样，使用单个搜索式就可以轻松地在屏幕上绘制许多矩形。
3.将动画帧的图形转换成矩形
接下来，就得把图像的网格（90x120，约 10000 个像素）拆成一个个矩形。
Nolen 首先尝试找出所有不一样的矩形并生成长搜索字符串、或者把网格拆成最少可填满的矩形，但两种尝试均以失败告终。
最终他想出了一个很简单的算法，它是这样工作的：先在图像的第一行里，把所有连续的“1”的部分找出来。找完第一行，再看第二行，找出和第二行找到的部分有重叠的地方。
要是把这个重叠部分和第一行合起来形成的矩形的面积，比单独这两行形成的矩形的面积都大的话，就把它们合并成一个矩形。然后就一直持续下去，尽量把新找到的部分合并到之前的矩形里
这个算法通常情况下表现得不错。但当搜索字符串超过10000个字符，就会严重拉低每秒的帧数。
Nolen 于是又写了两个解决方案（从左到右构建矩形的算法版本和仅查看各个行的简单 RLE），然后通过三种算法运行每个帧并选择最短搜索模式，这个组合算法最终效果不错。
# Number of times each approach was picked
original approach (top to bottom merging) - 1110
left to right merging - 2239
single-row RLE - 3300
4.设置好Vim宏就可以在编辑器中播放动画了
分解好了图形，最后的一个问题就是：如何在 Vim 中播放视频。具体步骤如下：
1.Vim 设置：顶部中心窗口播放视频，是一个包含 90 行每行 120 个空格的文件，左右两侧是用于图像居中的空缓冲区，底部窗口是约 6500 个搜索模式列表。
2.使用 Vim 宏播放视频：Vim 宏可以记录一系列击键操作，方便重播。宏命令为“”ay$:let @/=@a^M+”，具体来说，就是对寄存器 a 操作，拉动到行尾，将寄存器/的内容设置为寄存器 a 的内容，执行命令，然后移动到下一行开头。这样设置宏可以让光标回归到正确位置，反复迭代即可实现重播。
3.优化：最有趣的优化操作是“let @/=@a”，相比“/^Ra^M”操作，它避免了过长的查询操作导致搜索窗口闪烁严重和帧率降低的问题。
4.运行宏：可以运行“1500@q”（假设宏记录在寄存器 q 中）播放宏 1500 次，快速运行 1500 帧。
这样一来，就终于能得到开头的 Bad Apple 视频啦！
，时长00:42
作者还表示，由于是在一天内完成的项目，还有很多可以完善的细节，比如可以创建结构良好的文件来使用传统正则表达式而非 Vim 的行/列搜索功能，以及帧率的稳定性方面还可以继续加强。
万物皆可BadApple
除了用 Vim 编辑器，网友们在 Bad Apple 整活上一直都脑洞大开，可以说只有你想不到，没有网友做不到的。（doge）
比如有人用马里奥游戏复现：
还有在电脑终端中敲几个命令就能运行的：
甚至包括一些奇奇怪怪的硬件，包括快被淘汰的老式电视机电磁显示屏、甚至做实验用的示波器都可以：
看来，人类对Bad Apple的开发可能还不到10%啊，期待以后能看到更多的整活视频（搓手手）
[1]https://news.ycombinator.com/item?id=42674116
[2]https://eieio.games/blog/bad-apple-with-regex-in-vim/
