僅用8小時，用Vim編輯器手搓BadApple火了！

作者：量子位 2025-01-16 16:35:42

人工智能新聞

動畫基本還原了人物的所有動作，整體視頻也很流暢，畫風很有經典像素風游戲的味道。

老二次元/科技宅倒背如流的Bad Apple動畫，網友Nolen Royalty用Vim文本編輯器復現出來了！

而且僅耗時8小時、用了6500個正則表達式！

先來一起瞅瞅效果：

可以看到，動畫基本還原了人物的所有動作，整體視頻也很流暢，畫風很有經典像素風游戲的味道。

繼終端、游戲引擎、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 /\%<l E951 E1204 E1273
\%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 中播放視頻。具體步驟如下：

Vim 設置：頂部中心窗口播放視頻，是一個包含 90 行每行 120 個空格的文件，左右兩側是用于圖像居中的空緩沖區，底部窗口是約 6500 個搜索模式列表。
使用 Vim 宏播放視頻：Vim 宏可以記錄一系列擊鍵操作，方便重播。宏命令為“”ay$:let @/=@a^M+”，具體來說，就是對寄存器 a 操作，拉動到行尾，將寄存器/的內容設置為寄存器 a 的內容，執行命令，然后移動到下一行開頭。這樣設置宏可以讓光標回歸到正確位置，反復迭代即可實現重播。
優化：最有趣的優化操作是“let @/=@a”，相比“/^Ra^M”操作，它避免了過長的查詢操作導致搜索窗口閃爍嚴重和幀率降低的問題。
運行宏：可以運行“1500@q”（假設宏記錄在寄存器 q 中）播放宏 1500 次，快速運行 1500 幀。