带播放器、能拖进度的一支支片子——宣传片、MV、作品集片花——和一册册「数学 × 着色器」的实时图版。按画面是用什么做的,分成六个风格族。
一面平面星盘在图纸上画出来,然后天开始转,八十二秒。没有冷开场,第一帧纸面就点燃:一颗橙色火花照着一段 60 行的 TikZ,按乔叟给牛津的 51°50′ 作出这面星盘。先是母盘:盘沿四道圆、分四个象限的度数环、二十四小时环与悬环;再是纬盘,每一条线都是天上的一个圆从南天极投影下来:南北回归线与赤道、地平线与地平下 18° 的晨昏蒙影线、每 2° 一圈的等高圈、每 10° 一条的方位线、夜间十二不等时;最后用作图线布好星网,黄道和 43 颗亮星在 2026 年的位置。笔停之后只剩音乐,音乐进入高潮的那一小节,作图过程收起,星网从作图线里一条条切出来、发烫。随后时间从 10 月 4 日夜里往前快进,星网每个恒星日转一圈,太阳沿黄道慢慢挪,标尺跟着太阳扫过小时环,左栏的读数表一路跟着跑:当地时间、恒星时、太阳的位置与高度、东方升起的黄道、地平线上有几颗星。转过近六圈,停在 10 月 10 日牛津日落,太阳压在地平线上;之后每小节一道光从星网中心沿着金属往外流,流到哪颗星哪颗星亮一下。和 sections/astrolabe 是同一面星盘、同一份清单。音乐由 YuE2 按片子的结构生成,音效由代码按作图计划与转动的天合成:每一笔一声铅笔,每次日出日落一声铃。
一面三元罗盘在图纸上逐层成形,随后十五层转动归位,一百零五秒。片子先放归位的那一刻:十五层各自转动,相邻两层反向,由外而内一圈圈锁定、闪一下橙光,磁针在天池里摆动;一句「以代码为规,以数理为矩」之后,画面倒放回一张白纸。然后从头画:一段 138 行的 TikZ 化作一颗橙色火花,从天池起一层一层作出这面三元盘,镜头随着盘面长大一圈一圈往外退 —— 先天八卦与它配的洛书数、后天八卦与九宫,地盘正针二十四山、三元龙与替星;外圈是伏羲六十四卦方位圆图:卦气、卦名、卦象(一爻一笔,三百八十四笔)、卦运与天地人父母卦;再往外是三百八十四爻,开禧宿度的二十八宿与周天度数。盘上 439 个字依据同一组数值另行排版,跟着画笔一格一格显现。画完收起作图过程,十五层转动、锁回原位,磁针停在子午线上,两条红线组成天心十道;最后天心十道转动,左栏的读盘表逐层读出坐与向落在哪一卦、哪一爻,停在子山午向兼癸丁 4°,坐复向姤。和 sections/sanyuan-luopan 是同一面盘、同一份清单,按 2026-10-07 定的开头规矩先放结尾再倒放。配乐是代码,读同一份作图计划与转盘:每一笔一声铅笔划纸,每锁定一层一声铃。
按对称拆解原神的七枚元素图标,两分多钟。深色方格纸上,一颗橙色火花依照一段 TikZ 代码,先按游戏里的顺序画出一排七枚,再从对称最多的到最少的,逐一画出每一枚可以怎样构成,每一枚各占一个 scope:冰有 12 种对称,只在两面镜子之间的十二分之一里用五个圆画出半条臂与半片花瓣,其余十一份由转动与镜像铺满;雷只能转,九个圆画一遍、再转两次,外圆半径取 φ² 时其中三个半径与 φ、1、1/φ 相差不到 1%;岩转半圈重合,一块由九个圆和五段直线画成,镜头拉远看最大的那个圆,半径是图标半宽的四倍多;草和风各有一面镜子,草的右半边用 23 个圆画出,风的翅膀却是控制点拉出的自由曲线;水除了「不动」没有别的对称,四个主圆的圆心在同一条竖线上,半径为 R、0.8R、0.7R、0.36R;火也只有「不动」,35 段曲线里 34 段由控制点拉出。每画完一枚,它的作图过程就收起,只留墨线。最后镜头拉远,上面一排是游戏里的顺序,下面一排按对称排好,每一枚下面亮起它的对称群与对称的个数:12、3、2、2、2、1、1。图标依照同人矢量拟合,是对图形的分析,不是 HoYoverse 官方的作图过程。配乐由代码依据同一份作图计划合成:每一块填色落下一声铃,音高随它绕图标中心的角度转一圈。
一面三合罗盘在图纸上逐层成形,随后十六层转动归位,九十五秒。片子先放归位的那一刻:十六层各自转动,相邻两层反向,由外而内一圈圈锁定、闪一下橙光,磁针在天池里摆动;一句「以代码为规,以数理为矩」之后,画面倒放回一张白纸。然后从头画:一段 112 行的 TikZ 代码化作一颗橙色火花,从天池起一层一层画出这面十六层三合盘的盘线,镜头先贴着天池与先天八卦,随着盘面长大一圈一圈往外退:龙上八煞、八路黄泉、坐山九星;地盘正针二十四山、穿山七十二龙、正针一百二十分金;逆转半山的人盘中针、透地六十龙、顺转半山的天盘缝针与双山三合五行;缝针分金、按开禧古度排列的二十八宿、二十四节气与周天三百六十度。盘上 720 个字依据同一组数值另行排版,跟着画那一层的笔一格一格显现,刚出现是橙色,慢慢冷成本色。画完收起作图过程,十六层转动、由外而内锁回原位,磁针停在子午线上,两条红线拉过盘面,组成天心十道;最后天心十道转动,左栏的读盘表逐层列出坐向那条线两端所落的格位,停在子山午向兼壬丙 4 度。和 sections/sanhe-luopan 是同一面盘、同一份代码;按 2026-10-07 定的开头规矩先放结尾、再倒放。配乐由代码合成,依据同一份作图计划与盘面归位的过程:每一笔一声铅笔划纸,每写下一个字一声轻响,每锁定一层一声铃。
一台 GPU 服务器在图纸上逐笔成形、随后满载运转,七十二秒。片子先放结尾那一刻:八张卡满载,每个风扇上一个橙色的小太阳,读数表上八行都是训练任务;一句「这里的每一笔,都出自一行代码」之后,画面倒放回一张白纸。然后从头画:一颗橙色火花依照一段 72 行的 TikZ 代码,先画 2U 机箱和它的尺寸,再一张一张画八张卡(外框、风扇与轮毂、状态灯、十二片散热鳍片、金手指),镜头跟着笔从第一张走到第八张,每画完一个风扇扇叶就转起来;接着是底部的 PCIe 总线、相邻两张卡之间的 NVLink 桥、每张卡一条以 45° 转角穿出机箱的走线。凌晨三点,夜班派了几个推理小任务:风扇转快、状态灯闪烁、数据包沿走线流出,清单下面一张机柜读数表跟着跳。随后八张卡一张接一张满载,温度朝 95 °C 爬升;每当一张卡的温度超过 88 °C,笔就在它的风扇上画出十二道光芒,清单里也多出一句「% GPU i 高温」。标题栏填好,作图过程淡去,只留下满载的服务器和八个小太阳。和 sections/server-room 是同一台服务器、同一份代码;冷开场是按 2026-10-07 定的开头规矩做的第一支。配乐由代码合成,依据同一份作图计划与机柜的负载:每一笔一声铅笔划纸,每个太阳一声铃,冷开场倒放时一声倒卷的风。
图纸逐笔成形,画出的主板随后通电开机,两分半。深色方格纸上,一颗橙色火花依照一段 303 行的 TikZ 代码,逐个部件画出一整块 12 × 9.6 英寸的 ATX 主板,镜头随笔推近每一处:外形与九个安装孔、后置 I/O;CPU 插座和环绕它的十四相供电;EPS 8 + 4 与 24-pin,针脚逐根画出;四条 DDR5 插槽及其十二根等长走线,较短的几根绕成蛇形;扩展槽、三块 M.2 硬盘、CPU 的通道、芯片组;沿板边的接口、独占一角的音频、网卡与 BIOS;最后是 Debug 数码管、Q-LED 和丝印,标题栏填好。然后像真机一样开机:按下开关,各路电压建立后,电源发出 Power Good;插座两侧的各相供电电路轮流导通;Debug 数码管依次显示各个 POST 码,Q-LED 由 CPU 亮到 BOOT,四条内存逐条训练、显卡槽的链路建立、开始读取系统盘;显示 AA,自检通过。随后满载运行:十四相全部投入,封装温度升至 85 °C,每条总线上都有数据流过。左上角的代码在开机之后换成一张硬件监控表。最后辅助线淡去,只留下开着机、静静空闲的主板。和 sections/form-factor 是同一块主板、同一份代码。配乐由代码合成,依据同一份作图计划与主板的开机过程:每一笔伴着铅笔划纸声,每个 POST 码一声轻响,自检通过时还有主板那一声短促的「嘀」。
给 Voltway 那套 look 做的第二支一分钟宣传片,与第一支同样是等轴 2.5D,用的也是同一套冷灰与红色,three.js 实时渲染,配乐以代码合成。第一支讲一颗电芯长成一座城,这一支讲那颗电芯是怎么造出来的:一条 65 格长的微缩产线,五个工位一字排开,镜头跟着一个红色的小东西从头走到尾,它每到一站就换一种样子。滴管垂下,一滴红色液体落进搅拌罐,「Bring your curiosity.」;它凝成一粒小珠,顺着管道滑向涂布线,又变成一枚红色夹子,夹在刚涂好的极片前沿,穿过一节节烘箱;进入卷绕机后,成为卷芯顶上的红色极耳,龙门机械手把卷芯放进壳里,压合之后,它就成了一颗带红色套环的电芯,「A better battery / is a team achievement.」;它被提到化成架最上层的一格里充电,那一格亮起红灯,充满后回到传送带,正好落进留给它的空位,经过质检门时,扫描灯亮成红色;接着它和十一颗白色电芯一起装进托盘,扣上带红色封条的盖子,由 AGV 送上货车,关门后车身腰线变红,货车驶离台面。每一站都有穿红衣服的人,头顶悬着一张岗位卡;镜头拉远到整条产线,五个工位依次标上片中那句话里的五个领域,红线按句中顺序在工位之间来回连接,最后从末站拉回第一站,连成一圈;产线坐上台座,三行大标题「Find / your / field.」。粘土白、太阳与天光、环境光遮蔽、轻轻的移轴;字全部取自那套 look 自己的文案,Poppins 一套字。
给 Voltway 那套 look 做的一支一分钟宣传片,等轴 2.5D、three.js 实时渲染,配乐以代码合成。正交相机下的一座白色微缩城市:冷灰的虚空里落下一粒红色火花,地砖一圈一圈翻上来,一颗电芯从地里升起、剖开看见一层一层的卷芯;电芯长成 63 颗的阵列,厂房的墙升起、锯齿屋顶落下;城市从厂房往外按八分音符一圈圈长出来 —— 路、写字楼、实验室穹顶、住宅、树、风车,红色的头车开出厂门,玩具车流跟着转起来,「Move possibility forward.」;人出现在各个街区,三张卡片讲三种工作;电从厂门沿路网一格一格漫开、电包往外跑、充电桩亮起;最后整座城市坐上一个台座,变成桌上的模型,品牌与一句「Power your next chapter.」。粘土白、太阳与天光、环境光遮蔽、轻轻的移轴,红色只留给火花、头车、充电桩与电;字全部取自那套 look 自己的文案,Poppins 一套字。
给 Voltway 那套 look 做的第三支一分钟宣传片,和前两支同样是等轴 2.5D、同一套冷灰与红色,three.js 实时渲染,配乐以代码合成。第一支从一颗电芯往外长成一座城,第二支跟着一样红色的东西走完一条产线;这一支是汇合:那套 look 的四条入职路径是四座小岛 —— 校园(New graduates)、城区(Experienced talent)、工坊(Technical careers)、开放日(Early opportunities)—— 摆在台面的四条轴上,桥通向中间一座圆形广场。开场是四分屏,一格一座岛,一小节一座、顺时针翻出来,「A new generation of possibilities.」;每座岛门口站着一个穿红衣服的人,头顶一张路径卡。四个人同时出发,身后各拖出一条红线,桥一节一节往中间铺;四台相机一边跟着人一边各自拉向全景的四分之一,四格之间的缝合上,分屏就成了一整个画面,中间不切镜头,那三小节里 culture 卡的一长句一段一段说完。广场从下面升起,桌上一颗电芯,「Progress happens / in conversation.」;四个人一拍一个走到桌前,四条红线各弯成四分之一个圆,第四个人到的那一下圆合上、电芯亮起,能量包沿四条线流回四座岛,岛上亮起红色的钟面、楼冠、卷帘门和舞台的檐。四座岛与广场落在同一块底座上,三行大标题「Different / minds. / Shared energy.」。粘土白、太阳与天光、环境光遮蔽、轻轻的移轴;字全部取自那套 look 自己的文案,从时间轴阶段起就是英文与中文两版(中文版在 /zh)。
P(doom) 的中文版:以 pdoom-video 的实时渲染引擎,为一首原创中文歌《小数点》(由本地部署的 YuE2 生成)配上画面。保留同样的 22 幅图版与同一颗橙色火花,文字层则按新词逐字重编:每到副歌,小数点便右移一位,P(doom) 由万分之一逐级升至 1;「点」字的最后一点就是小数点,「井」字中间一格是黑洞,「江」字的三点水被喝光,只剩一个「工」;另有中文屋的翻牌板、盖着公章的红头文件、对话框里的已读不回。卡拉 OK 逐字对齐,切点落在 132 BPM 的强拍上;每一帧都是歌曲时间的函数,由浏览器即时绘制。片中汉字裁剪自思源黑体、思源宋体、霞鹜文楷与得意黑,手写的字按笔顺逐笔写出;页面采用 Mona Sans、Martian Mono 与思源黑体,中文为正文,英文译文居于副行。
收录一支用代码实时渲染的音乐录像《I’m Upping My P(doom)》(Giacomo Magnanini,MIT),和它的放映页。片子被做成一本讲世界末日的图解论文里的 22 个图版:笔绘图仪画独角兽、训练损失坠崖、提示词逐 token 敲出来、铜版画刻出的触手怪、官僚表格盖章、回形针铺满房间、导火索……一颗橙色火花贯穿全片,P(doom) 的数值每唱一次就往上涨。卡拉 OK 逐词对齐,切点落在强拍上。每一帧都是歌曲时间的函数,在浏览器里现算:进度条指到哪一秒就现画那一秒,22 张图版封面也是现画的。原作引擎原样收录;播放器、双语字幕带、页面是这里做的,页面用 Mona Sans / Martian Mono / 思源黑体。
Lattice City 的第二版:同一个题目,只用线与粒子。画面里没有任何面——每栋楼是十二条棱、每两个单位一圈楼层线和一格一格的窗点,每条街是一条线,每一份车流是一个光点,全部按光相加。叙事是一个回环:一张 64 × 64、留着街区空洞的点阵上,广度优先搜索从中心沿街道一步一步漫开,搜索树一条一条连起来,找到四条最短路;同一组 4096 个点升成 16³ 的立方体,一千多条曼哈顿路由按拍子织进去;飞进无穷的点阵,光痕沿轴线擦过,在路口转直角;线松开,每个点在自己的水流里漂;点落成城市,塔楼就立在开头那些空洞上,第一条路由成了主街,镜头贴着它飞;最后拉远,整座城只是放大 120 倍的同一张点阵里的一个点,画面回到开头。极细的 Geist 200、很宽的字距,和 v1 的粗宽体正好反过来;配乐 120 BPM、60 小节,用代码合成。
一部两分钟的实时短片,和它的放映页。一座由晶格构成的城市:没有地面、没有天空、没有边——一个晶胞,朝三个方向无穷重复。每一帧都是浏览器现场光线步进出来的:从原点的一个光点长成一个格子,冲进大道与竖井,车流在梁上拖出光轨;一次信号沿梁走出八面体的波前;加速到城市绕着航线扭转、黑场;再穿过体心立方、面心立方(八面体桁架)、六方三个街区;最后退到城外,整座城是一块水晶,缩回它来的那个晶胞。配乐用代码合成、离线渲染,128 BPM、64 小节,画面的每一个切点、闪光、随底鼓的震动都卡在同一张编排表的小节上。HUD 是真读数:机位坐标、速度、小节与拍、晶格的配位数。
一支 15 秒、踩着 128 BPM 的动态设计作品集短片:一颗球按真实重力弹跳,三个词砸在重拍上,一屏形状随波变形,点阵倒成地面冲进隧道,一段界面动效,几千个粒子卷成漩涡再炸开、拼出名字。外面套一台能拖动、逐帧、跳章的播放器,配乐是现场合成的。