55
66仓库:< https://github.com/tyuecode/tyuecode.github.io >
77
8- 在线体验:< https://tangyue.me / >
8+ 在线体验:< https://tyuecode.github.io / >
99
1010## 八种风格
1111
3030- 🎨 ** 八种风格** :油画 / 线描 / 色块 / 素描 / 水墨 / 点彩 / 霓虹 / 像素,各有一套工序和笔触语言
3131- 🖌 ** 物理笔触** :起收锋、笔毛分叉、颜料渐枯、厚涂浮雕、罩染透叠
3232- 🔒 ** 本地处理** :图片只在你的浏览器里,绝不联网上传
33- - 📦 ** 可下载** :生成结果打包成单个 HTML 文件,双击离线播放、随意分享
33+ - 📦 ** 可下载** :播放器打包成单个 HTML 文件,双击离线播放、随意分享
34+ - 🖼 ** 高清终帧** :终帧按 1× / 2× / 3× 离屏重绘,不受屏幕尺寸限制
3435- 📱 ** 响应式** :桌面双栏、移动端单栏,自动适配触屏
35- - ⚡ ** 快** :1400px 图约 1.5–3 秒,6 万条笔触
36+ - ⚡ ** 快** :1400px 图约 1.5–3 秒,数万条笔触
3637
3738## 使用
3839
39- 1 . 打开网站 (或本地 ` python -m http.server ` 后访问)
40+ 1 . 打开 < https://tyuecode.github.io/ > (或本地 ` python -m http.server ` 后访问)
40412 . 拖入 / 选择图片(PNG / JPG / WEBP)
41423 . ** 选一种风格**
42434 . 调「细腻程度」「动画时长」「处理精度」
43445 . 点「开始生成」
44- 6 . 页面内实时预览,或下载单文件播放器
45+ 6 . 页面内实时预览,或下载单文件播放器 / 导出终帧 PNG
46+
47+ 「细腻程度」在每种风格下的含义不同,界面上会跟着所选风格给出说明:
48+
49+ | 风格 | 往左(更细) | 往右(更粗) |
50+ | ---| ---| ---|
51+ | 油画 / 线描 / 素描 | 笔触更细更密,细节更清楚 | 笔触更粗犷,只留主干 |
52+ | 色块 | 保留更多小色块,边缘贴原图 | 小色块被并掉,画面更概括 |
53+ | 水墨 | 墨色更细碎 | 笔触更宽,更像大笔挥洒 |
54+ | 点彩 | 点更密更小,接近照片 | 点更大更疏,更像修拉 |
55+ | 霓虹 | 线条更多更密 | 只留最亮的主干 |
56+ | 像素 | 格子更多更清晰 | 格子更大更复古 |
57+
58+ ** 导出终帧** 时可以选 1×(原图尺寸)、2×、3×。终帧是在屏幕外的独立画布上
59+ 按所选倍数重新绘制的,不受预览窗口大小限制:
60+
61+ | 档位 | 输出尺寸(以 1527×1000 为例) | 大致文件大小 |
62+ | ---| ---| ---|
63+ | 原图尺寸 | 1527×1000 | ~ 3.5 MB |
64+ | 2 倍 | 3054×2000 | ~ 13 MB |
65+ | 3 倍 | 4581×3000 | ~ 27 MB |
4566
4667## 文件结构
4768
5374| ` worker.js ` | Web Worker,后台生成不卡界面 |
5475| ` player-template.html ` | 下载用的单文件播放器模板(内联 ` render.js ` ) |
5576| ` build.js ` | 资源版本号(见下方「更新后请改版本号」) |
56- | ` CNAME ` | 自定义域名(tangyue.me) |
77+ | ` .gitattributes ` | 统一用 LF,避免 Windows 上自动转 CRLF 产生无意义 diff |
5778| ` .github/workflows/deploy.yml ` | GitHub Pages 自动部署 |
5879
5980### 更新后请改版本号
@@ -66,7 +87,7 @@ GitHub Pages 给静态资源发的是 `Cache-Control: max-age=14400`(4 小时
6687为此 ` index.html ` 里所有脚本引用都带 ` ?v= ` 查询串,由 ` build.js ` 的 ` OIL_BUILD ` 统一提供:
6788
6889``` js
69- window .OIL_BUILD = ' 20261111-4style ' ;
90+ window .OIL_BUILD = ' 20261111-brushtrokes ' ;
7091```
7192
7293** 每次改动这些脚本,就把 ` OIL_BUILD ` 换一个新值** (如日期或递增序号),
@@ -88,10 +109,18 @@ window.OIL_BUILD = '20261111-4style';
88109
89110八种风格从同一张结构图出发,各取所需:
90111
91- - ** 油画** :网格播种 → 沿方向场行走 → 按显著性分配笔宽和密度,七道工序逐层加细
112+ - ** 油画** :网格播种 → 沿方向场行走 → 按显著性分配笔宽和密度,十道工序逐层加细
92113- ** 线描** :种子只撒在 Canny 脊线上,行走时向法线方向吸附(` requireEdge ` ),走偏即止;用 ` maxTurn ` 限制转角,防止笔画打卷成毛线团
93114- ** 色块** :对每个分层跑 marching squares 抽闭合轮廓,用 RDP 简化(闭合轮廓要在离起点最远处切成两条开链,否则首尾重合会让 RDP 退化),最后用 ` evenodd ` 填充规则一次平涂
94115- ** 素描** :按局部亮度分四遍排线,` rot90 ` 让交叉线垂直正交;石墨色按原图明暗映射,亮部再用高亮笔擦回纸白
116+ - ** 水墨** :墨色不用纯黑而带暖调,浓淡靠同一色相不同透明度叠出来;笔触宽而短像墨团化开,皴擦刻意压到最疏
117+ - ** 点彩** :六边形错排撒点,每个点在原色附近做色相抖动靠眼睛混色;暗部点自动放大,因为纸是白的,暗处点太小会从缝里透出白点像噪点
118+ - ** 霓虹** :` lighter ` 加色混合做辉光,但主体走正常混合——密集区域纯靠加色会亮度累加到饱和成白纸;亮处目标亮度用正弦收一点,避免高光区糊成一片
119+ - ** 像素** :先铺大格再补细格,每通道量化到 5 档做调色板感;格边长由「细腻程度」控制
120+
121+ ** 笔触类型** :` render.js ` 里定义了 8 种笔触形态(` NORMAL ` 普通、` GLAZE ` 罩染、
122+ ` SCUMBLE ` 干扫、` IMPASTO ` 厚涂、` FILL ` 闭合填充、` DOT ` 圆点、` GLOW ` 发光、` PIXEL ` 方块),
123+ 各风格按需选用。
95124
96125** 严格串行的时间轴** :` start[i] == start[i-1] + dur[i-1] ` 。每道工序按权重分配时长,
97126工序内按 ` 0.0035 + 0.0010×弧长 + 0.0006×笔宽 ` (色块额外按面积开方)分配每笔时长,然后逐条校验零重叠零断点。
@@ -102,11 +131,24 @@ window.OIL_BUILD = '20261111-4style';
102131** 网页与播放器共用渲染器** :` render.js ` 被 ` index.html ` 和下载的单文件播放器共同引用,
103132所以页面里看到的效果和下载后播放的完全一致。
104133
134+ ** 笔触保底机制** :大笔触风格(油画 / 线描 / 素描)有总量预算(约 13 万 / 10 万 / 9 万条),
135+ 超出时按工序权重等比稀释,保持各阶段比例而不是砍掉某一层。这样把「细腻程度」
136+ 拉到极端值时数据量不会失控(油画最细档原本 22.7MB,现在约 12.5MB,画质无可察觉损失)。
137+
138+ 另外批量拼接笔触用的是分块追加而不是 ` arr.push(...big) ` ——后者在笔触数量大时
139+ 会超出引擎的参数栈上限,抛 ` Maximum call stack size exceeded ` 。
140+
105141## 部署到 GitHub Pages
106142
107- 仓库本身就是 Pages 站点,` main ` 分支 + GitHub Actions 自动部署。
143+ 仓库本身就是 Pages 站点,` main ` 分支 + GitHub Actions 自动部署,地址是
144+ < https://tyuecode.github.io/ > 。
145+
146+ ** 要绑自定义域名** :在仓库 ` Settings → Pages → Custom domain ` 里填域名,
147+ GitHub 会自动往仓库写一个 ` CNAME ` 文件(不用手动建)。另外还需要在你的 DNS
148+ 那边加一条 ` CNAME ` 记录指向 ` tyuecode.github.io ` 。
108149
109- 换成你自己的域名:改 ` CNAME ` 文件内容即可。
150+ 注意:如果仓库里有 ` CNAME ` 文件、但 Pages 设置里的域名为空,两者会打架,
151+ 访问可能解析失败。换域名或撤域名时,建议两边一起改。
110152
111153其他静态托管(Cloudflare Pages / Netlify / Vercel)同样适用——几个静态文件,无构建步骤。
112154
0 commit comments