学习工作赛道 · 墨韵——在线毛笔书法创作平台

TRAE AI 创造力大赛 【大赛初赛专区】
1

墨韵 · 书法 —— 在浏览器里复活毛笔的呼吸

0. 打个招呼 :waving_hand:

我是 一名独立开发者 / 创作者 。

做「墨韵 · 书法」这件事之前，我其实一直在想一个问题：为什么我们能在平板上画出几乎真实的水彩、油画，却很难在网页里写出"像样"的一笔毛笔字？

我和 TRAE 的合作方式，更像是和一个 坐在我旁边、且懂算法也懂审美的搭档 一起搭积木——我把脑子里的画面（“我想要起笔尖、收笔细、慢写粗、墨色随压力变”）一句一句讲给它听，它把数学公式和 Canvas 路径一段一段写出来。最让我意外的是， 笔锋起收笔的 taper 曲线、宣纸边缘的 FBM 噪声 ，这些我原本以为得自己啃论文、调参调到头秃的细节，TRAE 直接给出了能跑的初版，让我能立刻在 iPad 上"试笔"——这一步，把我从"看代码发呆"拉回了"看笔触发呆"。

它帮我跨过的那个坎是： 让我敢动手 。以前看到「毛笔仿真」四个字，我会先给自己判死刑；现在我愿意先说"我们试试看"。

1. Demo 简介

是什么 ：一款运行在浏览器中的 在线毛笔书法创作 Web App （基于 React + Canvas 2D，平板 + 压感笔效果最佳）。

面向谁 ：

  • 想随时随地练字、却苦于没有笔墨纸砚的人
  • 书法老师 / 国画爱好者，用于课堂演示与临摹
  • 设计 / 字体创作者，采集手写笔迹做素材
    核心功能 ：
  1. 真实感毛笔笔触算法 —— 基于 Pointer Events 采集 (x, y, pressure, t) ，通过均值滤波去抖 → Catmull-Rom 样条平滑 → 压力 / 速度 / 起收笔 taper 动态计算笔宽 → FBM 噪声扰动边缘，最后以单条闭合 fill 路径渲染。
  2. 可调笔刷系统 —— 工具栏内置"浓墨重笔 / 普通硬笔"等预设，开放笔刷大小、墨色、墨量、起收笔强度等参数，支持 PNG 导出。
  3. 宣纸质感与墨色行为 —— 仿宣纸纹理背景、起笔浸墨、沿笔画方向墨量衰减、慢写处叠加"墨团"，让一根线条有"蘸墨—行笔—收锋"的生命感。
  4. 附产品截图

图片
图片1920×910 22.5 KB

图片
图片1920×910 69.7 KB

图片
图片1870×1030 80.5 KB

2. Demo 创作思路

灵感来源 ：
去年我在 iPad 上给小朋友上一节线上书法课时，发现所有号称"毛笔"的 App，要么是"粗细两档切换"的玩具，要么是必须订阅才能解锁压感的"写字课软件"。毛笔的灵魂—— 那一瞬间的提按、转折、墨色的呼吸 ——在网页上几乎没人认真做过。我想自己搭一个。

想解决的真实痛点 ：

  • 门槛高 ：磨墨、铺纸、备毡，传统书法的硬件成本挡住了 90% 的年轻人。

  • 跨设备不可复现 ：在 A 平台写的字，去 B 平台打不开，作品无法沉淀。

  • “假毛笔"太多 ：现有 App 的笔触像是"加粗版的圆珠笔”，起笔不见尖、收笔不见锋、墨色不会变。

  • 为什么做这个方向 ：
    做这件事有三层判断。第一， Web + 平板 已经能拿到真实的压感数据（Pointer Events 规范支持得很完整），技术拐点到了；第二， Canvas 2D 足够轻量 ，不需要上 WebGL 也能在 60fps 下渲染复杂笔触，部署成本低；第三， 书法 / 国风内容 在内容平台上持续升温，缺的不是内容，是趁手的"毛笔"。

    我的取舍是： 先把"一根线条的呼吸感"做对，再考虑字帖、临摹、社区 。这一版只专注解决"那一笔"。

3. Demo 体验地址（三选一）

4. TRAE 实践过程

    关键任务 Session ID
    .1030655543622176:c6d9da4e14e75ad6fae4ca9d1a1bfe9f_6a38f1ae8313f6cb95ce0e4f.6a38f3738313f6cb95ce0e52.6a38f373fd2bb2487e545488:Trae CN.T(2026/6/22 16:33:55)

.1030655543622176:794ffb1296fc24aa14523ee8e15f28f7_6a38f1ae8313f6cb95ce0e4f.6a38f5fe8313f6cb95ce0ed2.6a38f5fefd2bb2487e545489:Trae CN.T(2026/6/22 16:44:46)


.1030655543622176:9bff37a7a89ec1bb2c683f1b947ceb89_6a38f1ae8313f6cb95ce0e4f.6a4c5d687e127789ac6586ad.6a4c5d68a27a762bb2738385:Trae CN.T(2026/7/7 09:59:04)

.1030655543622176:b5ffa5853139a169e45596b2fe3c6c10_6a4cb7723412b15f42cebce5.6a4e1124bdccf4a49ba13c38.6a4e1124c4eadc4fd35d6c25:Trae CN.T(2026/7/8 16:58:12)

5. 对应的报名审核通过的帖子链接

1 个赞