程序化生成中国山水画：6000 星开源项目用 JavaScript 绘制 SVG 无限卷轴

我头一回打开它的时候愣了半天。

满屏幕的山，一层一层往远处退，雾气从山腰浮上来。树是歪的、石头是皴的，跟我小时候在挂历上看到的那种山水画一个味儿。我下意识以为是张高清大图，结果人家是现场画的。

这个项目叫 shan-shui-inf，作者是 LingDong-，GitHub 上已经攒了 6300 多星。

它的一句介绍特别朴素，我按原意翻过来就是一句话：程序化生成的中国山水画。

没有 sota、没有颠覆、没有一张参数表。但你看完下面这些，就会明白这六个字里装了多大的活儿。

它压根没存任何一张图片

这是这个项目最让我服气的地方，我决定放到最前面讲。

打开它的网页，你会看到一片山水。但整个仓库里没有任何一张用来做素材的图片。没有山水照片，没有贴图，没有预渲染背景。你看到的每一座山、每一棵树、每一缕烟，都是浏览器当场算出来、当场画出来的。

它靠什么算？两样东西：噪声函数和数学公式。

山的轮廓不是随手画的。它用的是分形噪声，一层套一层：先叠一个很粗的低频波，得到山脉的大起伏；再往上叠中频，勾出山脊线上的小峰；最后叠高频，把石头缝、土坡边的毛刺补上。这样叠出来，远山是大块大块的平缓弧线，近山是密密麻麻的细褶皱。跟真的山一样——退远了看和凑近了看，完全是两个样。

树也是这个思路。树叶不是贴着画上去的，而是沿着枝干走向，用递归的方式一节一节往外冒，越到末梢越小越密。

最关键的：它输出的是矢量

这里有一个技术选择，我觉得是整件事的魂魄所在。它画完之后，输出的不是像素图，是 SVG——矢量图。

山是折线，树是线条，雾是一层半透明的路径。你把它放大到多少倍，线条都干干净净，不会有马赛克。

这意味着两件事。第一，它不像“生成一张图”那样生成完就完了，它是在生成一份可以无限延展的画稿。第二，正因为是矢量，它才能完成接下来我要说的那件事。

一幅永远画不完的卷轴

中国传统山水画里有一样东西叫长卷。你没法一眼看全，得用手把画一点点展开，从右往左，边卷边看。它把一个横向极长的画面，收在一段一段的观看节奏里。

这个项目做的事情，就是把这套观看方式搬到了屏幕上。

官方说法叫“无限滚动的山水”。我实际操作了一下：按住鼠标右键往左拖，画面就一直往左延展，新的一笔实时画出来。你手不停，它就画不停；你停下来，它也停在那儿等你。

那不是把一张大图横向平移——平移早穿帮了。它是你每拖一段，就现场再算一段新内容接上去。山接着山，水连着水，永远平顺。理论上你能一直拖下去，画一幅谁也画不完的卷轴。

我特意拖了好几分钟，一直没到头，也没看到哪里露出接缝。这一手是真的漂亮。

灵感是从哪来的

这个项目的灵感，README 里写得清清楚楚：来源是传统山水画的经典长卷。

作者点了两幅画的名字——元代黄公望的《富春山居图》和北宋王希孟的《千里江山图》。这两幅都是山水长卷里天花板级别的作品。

你细想一下这个取法。他没有去模仿某张具体的照片，他模仿的是一整套观看的语法：山怎么退远，水怎么留白，云怎么断，路怎么把人引进去。然后把这套语法翻译成数学函数能表达的东西。

这就是为什么它看着不像“程序生成的”，倒像“有人画的”。因为它模仿的层次不在像素，在章法。

一行没写后端，它就是个网页

再讲两个让我觉得它“实在”的点。

纯前端：没有任何后端，不需要装环境。整个仓库主要是 HTML 和 JavaScript，双击打开或者访问在线 demo 就能跑。不用装 Python、不用装显卡驱动、不用连服务器。作者把门槛压到了最低。GitHub Pages 打不开的时候还有备选托管地址。

技术栈很老派：就是纯 JS 画 SVG。没有用任何三维引擎，没有 WebGL，老老实实用 JavaScript 算坐标，然后吐 SVG 元素出来。放在今天看简直有点复古，但正因为简单，到现在都跑得好好的。

星标是真的攒起来的：这个项目 2018 年 1 月开源，代码最后一次更新是同年 12 月，开发了不到一年就基本完事了。之后六年，它就这么安安静静躺在那儿，星标一路涨到六千多。这种曲线只有真被人喜欢、被人反复分享的东西才有。想研究类似的开源项目，可以到开源实战板块看看。

在线就能玩，三十秒上手

这个项目最好的一点是：你什么都不用装。

打开在线页面，等画面加载出来，按住鼠标右键往左拖就行了。

想自己搭一份也简单，三步搞定：

git clone https://github.com/LingDong-/shan-shui-inf

进到目录，用浏览器打开 index.html，或者起个最简单的本地服务就行。没有依赖，没有构建步骤。

手机浏览器也能开，但滚动操作还是鼠标右键最顺手，触摸屏上会费点劲。

我看完的一点感想

这个项目现在回头看，打动我的不是“技术多难”，而是克制。

它明明可以做成一个花哨的网站，加个下载按钮、加个登录、加个“生成十张”的付费功能。但作者没有。他就干了一件事：把那套山水长卷的章法翻译成代码能执行的语言，然后开源出来，让所有人免费玩。

我干外包这些年，见了太多反过来的例子：一个功能能做的事，非得包三层。看完它再回头看自己写的东西，有点脸红。

还有一个感受，是关于“模仿”这件事的。现在大家聊 AI 学习人类作品 说得神乎其神，其实这个项目 2018 年就在干类似的事了：读懂一幅画背后的规则，然后用另一种材料重新实现它。它没用一个神经元，靠的全是数学。有时候问题的答案，比我们以为的朴素得多。

你要是有半小时空闲，去它的在线页面拖一拖，拖到手酸为止。对这类程序化生成、开源技术感兴趣的朋友，云栈社区里也有不少同好在讨论。