Skip to content

Commit f87bfe0

Browse files
committed
chore: 移除 CNAME(自定义域名已撤),README 同步更新
仓库里的 CNAME 仍写着 tangyue.me,但 Pages 设置里的自定义域名已经清空。 两者打架会让访问解析出问题,所以把 CNAME 删掉,站定回到 tyuecode.github.io。 README: - 「在线体验」与「使用」里的域名改为 tyuecode.github.io - 文件结构去掉 CNAME,补上 .gitattributes - 部署段落重写:自定义域名应在 Settings→Pages 里填(GitHub 会自动写 CNAME), 并说明两边不一致会解析失败的注意点 - 版本号示例更新为当前值 - 技术实现补齐后四种风格(水墨/点彩/霓虹/像素)的关键处理, 补上 8 种笔触类型、细腻程度逐风格对照表、导出分辨率档位表 - 补记笔触预算与分块追加(避免 push(...big) 爆栈)这两个保底机制
1 parent a3dff59 commit f87bfe0

2 files changed

Lines changed: 52 additions & 11 deletions

File tree

‎CNAME‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎README.md‎

Lines changed: 52 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
仓库:<https://github.com/tyuecode/tyuecode.github.io>
77

8-
在线体验:<https://tangyue.me/>
8+
在线体验:<https://tyuecode.github.io/>
99

1010
## 八种风格
1111

@@ -30,18 +30,39 @@
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` 后访问)
4041
2. 拖入 / 选择图片(PNG / JPG / WEBP)
4142
3. **选一种风格**
4243
4. 调「细腻程度」「动画时长」「处理精度」
4344
5. 点「开始生成」
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

@@ -53,7 +74,7 @@
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

Comments
 (0)