项目演示集合

这里收集了我的各个项目的在线演示。

可用项目

项目演示

rimworld-ordinatus-calculi

RimWorld 计算仪典：破甲者之歌・留命者之吟

RimWorld Ordinatus Calculi：Song of the Breaker ・ Chant of the Keeper

一个基于 Vue 3 + TypeScript 的 RimWorld 战斗机制计算器，用于计算给定武器在不同的距离/护甲情况下的DPS，以及给定护甲组合在不同单发伤害/穿甲情况下的受伤期望。

功能特性

Features

武器 DPS 计算器（Weapon-Centric）

Weapon DPS Calculator (Weapon-Centric)

多武器对比：同时评估多个武器在不同护甲率（0–200%）下的 DPS 表现
Multi-weapon comparison: Evaluate multiple weapons across armor values (0–200%).
精确命中率：基于距离分段（贴近/近/中/远）的线性插值算法
Accurate hit chance: Linear interpolation across distance segments (touch / short / medium / long).
连发机制：完整模拟预热、连发间隔、冷却时序
Burst mechanics: Full simulation of warm-up, burst interval, and cooldown timings.

项目演示

my-pen-is-broken

🖋️ 言阅姬 (YanYueJi)

Steam 好评率98%，全球首款「寻找对话中敏感词」的游戏《ウーマンコミュニケーション/ 女性交流》通关后做的小玩具，既可以直接标红页面上的敏感词，也可以人工寻找敏感词并点击以标红。

🎯 两种模式

模式	功能	适用场景
🤖 自动检测版	加载后立即扫描并高亮所有敏感词	让我看看这个网页会被言阅姬抓到多少次无意识风纪违反
👆 手动点击版	点击文字才检测敏感词并显示拼音	一定程度上模拟了原作，但是说实话自从我小学毕业就失去了在日常网页中找敏感词谐音的技能，所以我自己只用自动检测版

🌐 在线Demo

👉 点击这里体验在线版本

在上面链接指向的页面中获取书签，然后那个页面同样提供了用于测试的示例文字！

⚠️ 已知限制

DoubleShot 重叠问题: 当两个敏感词重叠时，自动模式只会标记其中一个，手动模式可以标记多个
拼音相同词汇重复计数: 敏感词库中拼音相同的词会被分别计数，导致统计数量可能偏高

🛠️ 开发

项目结构

my-pen-is-broken/
├── src/
│   ├── index.js              # 核心逻辑
│   └── index.html            # HTML模板
├── scripts/
│   └── build-bookmarklets.js # 书签构建脚本
├── dist/
│   ├── bookmarks.html        # 书签使用页面
│   └── bookmarklets/         # 生成的书签文件
└── webpack配置文件...

NPM 脚本

npm run build    # 构建书签版本
npm run start    # 启动开发服务器
npm run watch    # 监听文件变化

技术实现

原始文本 → 拼音转换 → Token化 → 敏感词匹配 → DOM替换

加载敏感词库: 访问57ing/Sensitive-word获取敏感词列表
拼音标准化: 使用 pinyin 库对页面上的文本和敏感词库里的文本进行中文-拼音转换
模糊匹配: 忽略标点符号进行无音调的拼音比对
DOM替换: 自动模式下将匹配的部分标红，手动模式下给每个文本元素添加“点击时检测敏感词”的回调

📚 外部依赖

敏感词库: 57ing/Sensitive-word
拼音转换: pinyin 库
构建工具: Webpack + Babel

📄 更多信息

详细构建说明: BUILD_GUIDE.md
项目许可证: LICENSE

🤝 贡献

欢迎提交Issue和Pull Request来改进这个项目！

项目演示

color-change-image

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

在线版

https://laurence-042.github.io/project/color-change-image/demo/

这个应用已更新到可以正式使用的程度，进行恰当标记后处理得到的图片中，被标记区域的颜色将随背景颜色变化而变化，而且会一定程度上地保留变色区域的阴影高光与花纹。具体保留效果取决于原图相应区域的颜色，颜色越接近平和的灰色效果越好。

这个应用的功能包括：

使用二次贝塞尔曲线标记选区，可调阈值的相似颜色标记选区。
将选区作为加工范围，或者使用选区操作蒙版后将蒙版作为加工范围。
使用RGB色域修改输出图片的背景色，作为变色图效果的预览。
使用内置的几个背景图片作为输出图片的预览背景。
使用本机上传图片作输出图片的预览背景。

个人感觉现在唯一的更新点差不多就是“将输出图片png和背景一起导出为jpg”，但由于几种背景的显示逻辑不同，这个功能做起来挺麻烦的，所以短期内不准备继续更新这个应用了。除此之外，一开始我只准备让这个应用可以处理整张图就行，后来的加工区域标记功能全是半路加上的，所以这个项目的代码结构非常糟糕，我不想再被自己的代码恶心了（这个是不更新主要原因）

如果你对这个玩具的灵感来源与原理感兴趣

灵感来源

实际上，这个项目的灵感来源是半年前QQ群里刷屏的几张图，其特点是图片中的元素（比如丝袜，衣服之类的）的颜色会随着聊天气泡的颜色（也就是背景色）变化。比如说那张丝袜图，如果聊天气泡是黑色的，丝袜就是黑色的；聊天气泡是白色的，丝袜就是白色的。

关键是，变色部分的阴影是被完美地保留了的，这不是简单的抠图所能做出来的。我猜想可能是画师在画图时预先设定了一个背景色，然后将阴影之类的上完色之后去除背景色，并以png格式导出的方式做出来的。

但我觉得我们可以自己动手试着做一个工具出来，使其可以自动将正常的jpg加工成那种变色图。就这样，这个纯属娱乐的项目就开工了。

思路

如果纯色底图A加上带透明通道的图B可以得到很和谐的图C，那么可不可以把现有的无透明通道的图C拆成纯色底图A与透明通道图B？

如果已知一个图片的长宽，那么就能把图片转成一维点阵向量的形式（就像二维数组在内存中的真实存放方式是按行拼接在一起的一维数组一样），那么就是向量分析了。A为元素为三维向量（RGB）的N维向量（N为长宽乘积），B为元素为四维向量（RGBA）的N维向量，C为元素为三维向量的N维向量。为了方便起见，我们将三维向量RGB当作Alpha值为1的RGBA，这样ABC的形式都一样了。

假设abc为ABC中位置相同的三个元素，下标的RGBA分辨代表红绿蓝透明通道，根据叠加的原理，我们可以得到

$c_A=1-(1-a_A)(1-b_A), c_R=a_Ra_A(1-b_A)+b_Rb_A$

$c_G$ 与 $c_B$ 的计算方式同 $c_R$

将 $a_A=c_A=1$ 带入上式可以得到 $c_R=a_R(1-b_A)+b_Rb_A$ 显然叠加是毫无悬念了，但如果我们要拆分，信息是否足够？

这个式子中的已知量有目标颜色 $c_R$ ，希望拆出的颜色 $a_R$ ，但 $b_A, b_R$ 都是未知量，它绝对没有一个唯一解。

这似乎很令人沮丧，这表示我们没有唯一的拆分方案。但是如果我们给它加一点限制呢？

把R通道的公式变一下形

$\begin{aligned}c_R=a_R(1-b_A)+b_Rb_A&=>c_R=a_R-a_Rb_A+b_Rb_A\\&=>c_R-a_R=b_A(b_R-a_R)\\&=>\frac{c_R-a_R}{b_R-a_R}=b_A\\&=>\frac{c_R-a_R}{b_A}+a_R=b_R\\&=>\frac{a_R-c_R}{a_R-b_R}=b_A\\&=>a_R-\frac{a_R-c_R}{b_A}=b_R\end{aligned}$

显然，b的色彩约浓烈，其Alpha值越小，透明度越高。所以如果我们总是要求b的透明度尽可能高，那么就应该使 $b_R$ 尽可能大，比如当c的通道大于a的时直接设为255，否则设为0，来试一下？

于是这个项目就这么被写出来了。不过当它把某个通道值非常极端（比如0或255这样的）的颜色当作A图的颜色进行处理时，效果很不理想，几乎纯黑也不咋样，只有对非常适中的颜色效果才比较好。

举例来说的话，p站id为59851275的那个作品的整体构图和衣服颜色就很适合进行处理，而69740563这样稍显复杂且衣服颜色过渡很柔和的就无法得到预期的效果了。

附言

顺便一提，我按照Python3，C++，Java，JavaScript的顺序用同样的算法实现了四版的程序。

项目演示

life-credit-pill

回春丹 MV 项目 - 经验总结

项目背景

这是一个游戏内药物公司产品"回春丹"的广告歌曲 MV 项目。使用前端技术（TypeScript + SVG 动画）制作与歌词同步的动画视频。

产品设定

回春丹是一种能透支生命力的药物：

效果：让35岁的人外貌和活力都像20岁
副作用：在老年期显现，导致预期寿命降低
讽刺点：药物公司不惮于威胁顾客——“你不吃有的是人吃，被时代抛下反而死得更快”

可复现的完整流程

第一步：生成歌词

使用 ChatGPT / Claude 等有创造力、会押韵的 AI 生成歌词。

提示词示例：

我需要为游戏内的一个虚构药物"回春丹"写一首广告歌曲。

背景设定：
- 回春丹能让35岁的人看起来像20岁
- 副作用是老年期寿命缩短
- 这是一个反乌托邦世界，职场年龄歧视严重
- 歌曲表面是昂扬的宣传曲，但歌词暗含威胁

要求：
- 押韵，朗朗上口
- 表面积极向上，实则讽刺
- 包含具体的职场焦虑元素（裁员、绩效、竞争）
- 时长约2-3分钟
- 需要 intro、verse、chorus、bridge 等结构
- 使用 Synthwave 风格

请同时给出 Suno 的 style 提示词。

第二步：生成音乐

使用 Suno（https://suno.ai）生成音乐：

将歌词粘贴到 Lyrics 区域
将 style 提示词填入 Style of Music
生成并选择最满意的版本
下载 MP3 文件

第三步：标注时间轴

使用 LRC 时间轴工具（如 https://lzltool.com/audio-lrc）：

项目演示

silly-butt-helper

一个也许可以帮助您身边伸手党朋友的小东西