两千个小人是怎么用代码画出来的？

去真东西上看这一处 ↗网址里的 z 是放大倍数；改成 1，就是整卷铺满屏幕高度的样子。

11 · 1先画成一张大图，看哪儿裁哪儿，不行吗？

最顺手的做法，是像画真画那样，先把整卷画成一张图存下来，看哪儿裁哪儿。可屏幕上的图是一格一格的像素，拉大不会多出细节，只会把每一格拉成更大的色块。要让任何一处放大六倍都清楚，这张图一开始就得按六倍的精度画。

第二条路：不存图，每一帧把屏幕上看得见的画件按当前精度现画一遍？一块 16 : 9 的屏，铺满 1000 单位高时横跨约 1800 单位；1757 件画件铺在三万单位上，平均每 100 单位约 6 件，一屏就是一百来件，每件几十到几百笔。可一帧只有约 16.7 毫秒（第 8 课的帧预算）。第二条路撞墙：画不过来。第 3 节的实验台会在你这台机器上当场量：现画一屏和拼一屏差多少。

长卷走的是第三条路：只存看得见的几小块，按需要的精度现画。先得看清一笔墨在代码里是什么。

11 · 2一笔墨，在代码里是什么？

长卷里的每一笔，存的不是像素，是几个点。画的时候交给 brush() 这个函数，它把这几个点变成一个填了墨的多边形。下面跑的就是它（src/kit/ink.js）：红圈是记下来的点，蓝色细线围出的是最后填墨的多边形，中间一串蓝点是它算的时候用的中线（打开「显示骨架」才看得见这些）。

来自材料

填墨用的是 ink.js 的 brush() 本身；磨圆、等距取点、前 22% 渐宽、后 35% 渐收，都写在这个函数里。

本实验的设定

纸是 160 × 72 单位，1 倍 = 每单位 4 像素；三种预设笔画是为演示挑的；蓝色轮廓按同一套步骤另算一遍画出来。

它能证明

一笔墨 = 几个点 + 一个函数；同一串点在任何精度下重算，边缘都利；同一个种子，飞白一模一样。

它不能证明

这就是毛笔。它太匀，真毛笔的提按、手腕的犹豫它模仿不了。

01 笔锋只是一条宽度曲线：前 22% 从起笔的宽度涨到最宽，最后 35% 收到收笔的宽度，就是实验台下方那条折线。02 磨圆用的是 Chaikin 切角：首尾两个点留着，中间每一段只取 1/4 和 3/4 处的两个点，折角就被削掉一块。磨圆以后，再沿着这条线按相等的间距重新取点，每个点往两边各推出半个笔宽，左右两边连起来，就是那个多边形。换成「一个折角」那一笔，拖着磨圆次数看最明显。

把 04 放大拖到 6 倍：左边是 1 倍时存成像素的图被拉大，边成了糊的色块；右边是同一串点在 6 倍下重算、重新填墨，边还是利的。存下来的是描述，不是像素。

03 飞白让每一点的宽度随机抖一点。这里的随机数来自一个种子：随机数的起点，同一个种子按顺序抽出来的一串数永远一样。拨一拨种子你会发现：同一个种子，每次画出来一模一样。为什么非这样不可，下一节就明白。

这几个函数还有一个用处。长卷是 11 个并行的 AI 画师画的，五个画素材、六个各画一段。它们共用同一套 brush()、同一盒颜料（palette.js），外加一份 127 行的规范 STYLE.md：线宽多少、颜色怎么上、楼怎么斜着画（系数写明）、不许画方盒子、不画旗，每类素材还画了样板对照。拼起来像出自一只手，靠的是这些。

让规则去「长」

代码画的不只是笔画。广州片（Blender 做的 3D 城市片）里的榕树，枝干是算法「长」出来的，叫空间殖民（space colonization）：先在树冠该有的范围里撒一把「吸引点」，每一步，离吸引点最近的枝头朝它们的平均方向长出一小段，枝头碰到的点就删掉，直到删完。枝条自然往空处长、互相让开，像真树争阳光。枝条多粗按管道模型：父枝的截面积约等于子枝截面积之和，也就是父枝半径的平方约等于各子枝半径的平方相加（广州片榕树的脚本把这个指数取成 2.35，比 2 略大）。另一种老办法叫 L 系统：用「一根枝换成一根枝加两个分叉」这样的改写规则，一代一代替换，再照着画出来。

随机也要有规矩。《拾光》的沙面第一轮按 8 种样式给楼随机分：相邻两栋撞成同一种的概率是 1/8，139 栋要是排成一排，平均会撞 17 对；加一条「相邻不能一样」的规则，撞车就是 0 C37。长卷的两千多个小人也是这样：每个人按时代给的比例，从自己的种子里挑衣服和颜色（figures.js），同一个种子永远是同一身。

11 · 3切成瓦片：只画一次，反复用

回到第 1 节的两堵墙：存不下，也画不过来。长卷把画面切成 512 × 512 像素的小方块，叫瓦片（tile）。每件画件自己报一个包住它的长方形，叫边界框。画一块瓦片，就是查出哪些画件的边界框和这块瓦片相交，每件按自己的点、自己的种子画一遍，画好存起来（缓存）。镜头挪动时，大部分瓦片直接从缓存拿来拼，只有新露出的边上要现画。

来自材料

树、小人、楼的画法是长卷的函数本身（trees.js、figures.js、arch-core.js、arch-parts.js）；怎么查画件、怎么分档、怎么按框裁切，照 tiles.js 精简了抄过来。

本实验的设定

这段 900 × 300 单位的小长卷是为实验摆的；瓦片边长缩成 128 像素，只有一层远近；精度按网页排版的像素算（和屏幕密度无关），任何屏幕上画面都一样。毫秒数和线程计时是你这台机器当场量的，每次有起伏。

它能证明

缓存让平移几乎不用画；换档要整屏重画；种子不对、边界框不对，接缝出在瓦片的边上。

它不能证明

长卷本身的速度：它一屏上百件画件、五层远近，瓦片边长是这里的 4 倍，还有人物动画和昼夜。

拖 01 平移：「现画」的块数只在新露出一列时才跳，其余全从缓存拿。读数第三行是当场量的：这一小段（二十来件画件）现画一屏要几毫秒，拼一屏不到一毫秒。长卷一屏是它的好几倍。

再看 03 随机数。那棵大榕树横跨好几块瓦片，就会在每一块里各画一遍，每块只留下自己那一格；每一遍都得一模一样才拼得上。同一个种子、按同样的顺序抽，才保证一模一样。换成「每块瓦片各抽各的」，树叶和衣服就在瓦片边上错开：浏览器自带的 Math.random 不能指定种子，用它就是这个下场。长卷 rng.js 开头的注释写着：画件里的每一个随机选择，都必须来自交给它的那串带种子的随机数。

拖 02 推近。精度变高以后，瓦片要按更高的精度重画，可不能每挪一点就重画一套，所以分成档：

档 = 四舍五入( log₂(每单位像素数) × 每倍几档 )
这一档的瓦片按 2^{档 ÷ 每倍几档} 像素/单位画

网页上精度每翻一倍只分 2 档，相邻两档差 2^1/2 ≈ 1.41 倍。两档之间，瓦片按最近的一档画好，再拉伸或压缩一点贴上去；离最近的一档最远是半档，也就是 2^1/4 ≈ 1.19 倍。读数里「第几档」一变，这一屏的瓦片就全部现画。档越细，精度越贴近屏幕，推拉时要重画的也越多。网页要跟手，选了粗的。

江雾为什么被切成了方块

六段画拼起来以后，二沙岛一带的江雾被切成了一块块直角方块 C12。引擎决定一块瓦片要画哪些画件，看的是每件画件自己报的边界框，从不检查它实际画到了哪儿。

11 · 4推近的时候，画面为什么会闪？

长卷宣传片第二版是一镜到底，交付说明里写着「闪烁：已修复并验证」：逐帧测整屏平均亮度，3075 帧没有一处跳变。第二天你看完问：「移动的时候，画面会闪烁。这是什么问题？是渲染过程中的问题，还是编码过程中的问题？」C14

下面用上面那台瓦片引擎推近 96 帧（每倍 2 档，和网页一样），每帧做两种检测：当时用的整帧平均亮度；以及把上一帧放大到和这一帧对齐、再逐个像素相减的帧差（相减后越亮，两帧差得越多）。

把 02 逐帧看从第 41 帧拨到第 42 帧：帧差图整片亮起来，左边的窗户颜色全换了。两帧的精度只差约 1.5%，画出来却像两栋楼。这一跳有两个来源，都在换档那一刻。

小的那个是拉伸：第 41 帧要每单位 2.365 像素，瓦片却按第 2 档的 2.0 画，再拉大贴上，是这 96 帧里最糊的时候之一；第 42 帧要 2.399（比 2.365 多约 1.5%），瓦片换成第 3 档的 2.83 画，再压小贴上，是最利的时候之一。每次换档都这样跳一下，曲线上那几个小尖就是它。

大的那个是细节分支。长卷的很多函数会看「现在每个单位占几个像素」决定画多少细节，这就是一个分支：精度够了才多画一笔。石面函数 granite() 在每单位超过 2 个像素时才撒上石头的斑点，一个斑点从随机数里抽两个数（位置）。可随机数是一串，按顺序一个一个取；斑点和后面挑窗玻璃颜色用的是同一串。斑点一出现，这一串被多取了几百个，排在后面的每一个「挑什么颜色」拿到的都是另一个数。

每单位 2.35 像素 · 第 2 档每单位 2.40 像素 · 第 3 档

现在把 01 档位换成每倍 32 档：这是长卷出视频的改法，相邻两档只差 2^1/32 ≈ 1.022 倍，而且同一帧里所有瓦片只用一档（网页上瓦片没画好时，会先借上下几档画好的顶着，一屏里可能混着好几档）C14。拉伸的小尖全平了，可第 31 帧还剩一个大尖：档分得再细，总有一档要跨过「每单位 2 个像素」那条线。最后打开 03，让斑点用它自己的一串随机数（rng.js 里现成有分出一串新随机数的 fork()），这个尖也没了。

最后，把这一课和第 8 课接起来：