Skip to content

Commit f8e1669

Browse files
committed
Initial commit: strokeoil 油画工序逐笔重绘(纯前端)
0 parents  commit f8e1669

9 files changed

Lines changed: 2041 additions & 0 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: Deploy static site to Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: false
16+
17+
jobs:
18+
deploy:
19+
environment:
20+
name: github-pages
21+
url: ${{ steps.deployment.outputs.page_url }}
22+
runs-on: ubuntu-latest
23+
steps:
24+
- name: Checkout
25+
uses: actions/checkout@v4
26+
- name: Setup Pages
27+
uses: actions/configure-pages@v5
28+
- name: Upload artifact
29+
uses: actions/upload-pages-artifact@v3
30+
with:
31+
path: .
32+
- name: Deploy to GitHub Pages
33+
id: deployment
34+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# 操作系统 / 编辑器
2+
.DS_Store
3+
Thumbs.db
4+
*.swp
5+
6+
# 依赖与构建
7+
node_modules/
8+
*.log
9+
10+
# 临时文件
11+
*.tmp

‎CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
tangyue.me

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 tangyue
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# strokeoil · 油画工序逐笔重绘
2+
3+
把任意图片重绘成「按真实油画十道工序逐笔画出」的动画。**纯前端实现,图片不上传、无需后端**,可直接托管到 GitHub Pages。
4+
5+
仓库:<https://github.com/tyuecode/tyuecode.github.io>
6+
7+
在线体验:<https://tangyue.me/>
8+
9+
## 特点
10+
11+
- 🎨 **真实油画工序**:刷底色 → 起稿 → 单色底层 → 铺大色 → 塑造 → 塑形 → 罩染 → 干扫 → 细部 → 提白,十道工序顺序严格
12+
- 🖌 **物理笔触**:起收锋、笔毛分叉、颜料渐枯、厚涂浮雕、罩染透叠
13+
- 📱 **响应式**:桌面双栏、移动端单栏,自动适配触屏
14+
- 🔒 **本地处理**:图片只在你的浏览器里,绝不联网上传
15+
- 📦 **可下载**:生成结果打包成单个 HTML 文件,双击离线播放、随意分享
16+
- ⚡ **快**:1500px 图约 1.5–3 秒,8 万条笔触
17+
18+
## 使用
19+
20+
1. 打开网站(或本地 `python -m http.server` 后访问)
21+
2. 拖入 / 选择图片(PNG / JPG / WEBP)
22+
3. 调「细腻程度」「动画时长」「处理精度」
23+
4. 点「开始生成」
24+
5. 页面内实时预览,或下载单文件播放器
25+
26+
## 文件结构
27+
28+
| 文件 | 说明 |
29+
|---|---|
30+
| `index.html` | 主页面(上传、调参、实时预览、下载) |
31+
| `core.js` | 算法核心 |
32+
| `worker.js` | Web Worker,后台生成不卡界面 |
33+
| `player-template.html` | 下载用的单文件播放器模板 |
34+
| `CNAME` | 自定义域名(tangyue.me) |
35+
| `.github/workflows/deploy.yml` | GitHub Pages 自动部署 |
36+
37+
## 算法原理
38+
39+
**分层定色、结构张量定走向、工序定笔触语言、串行时间轴定节奏。**
40+
41+
1. **五层明暗分层**:在 L\*(亮度)× S(饱和度)平面上做 k-means,把人像与背景按材质分开
42+
2. **轮廓与方向**:Canny 提取边缘,结构张量(Sobel → 特征分解)求每一笔的走向;平坦区改用低频方向场,避免笔触乱指
43+
3. **十道工序**:每道工序有自己的笔宽、密度、透明度与颜色处理,宽度逐档过渡(否则细笔硬盖巨笔会毛躁)
44+
4. **严格串行**:`start[i] == start[i-1] + dur[i-1]`,逐条校验零重叠零断点
45+
5. **颜色取自原图**:沿笔触取中位色,只做轻微抖动,绝不用调色板
46+
47+
## 部署到 GitHub Pages
48+
49+
仓库本身就是 Pages 站点,`main` 分支 + GitHub Actions 自动部署。
50+
51+
换成你自己的域名:改 `CNAME` 文件内容即可。
52+
53+
其他静态托管(Cloudflare Pages / Netlify / Vercel)同样适用——四个静态文件,无构建步骤。
54+
55+
## 本地开发
56+
57+
```bash
58+
python -m http.server 8000
59+
# 访问 http://localhost:8000/
60+
```
61+
62+
> 注意:不要用 `file://` 直接双击 `index.html`,Web Worker 和 fetch 会被浏览器拦截。
63+
64+
## 许可证
65+
66+
MIT

0 commit comments

Comments
 (0)