mcpField
P
printed-curtain-render

printed-curtain-render

github.com/vibe-motion创意与媒体1.4k198 次安装3 周前更新
代码仓库

关于 printed-curtain-render

用于生成印花布帘交互预览的技能，面向需要将图像或文字融入布料模拟的创作者。它将图案烘焙到布料坐标中，使图案随布帘的摆动、折叠和分离而变化。

主要功能

  1. 01将图像与文字布局到布料画布
  2. 02模拟 40 条 Verlet 布帘线
  3. 03图案随布料形变
  4. 04生成可移植的本地预览目录
  5. 05支持浏览器临时替换图像

适用场景

  1. 01预览印有品牌图案的布帘
  2. 02调整图像适配、位置和尺寸
  3. 03制作多行文字与配色方案
  4. 04通过浏览器检查布帘交互效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vibe-motion/skills --skill printed-curtain-render

安装后在 Claude Code 中输入/printed-curtain-render确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/printed-curtain-template/
controls.js
curtain.js
index.html
NOTICE.txt
point.js
print.js
rigidBody.js
segment.js
sketch.js
style.css
scripts/
create_printed_curtain.py

详细介绍

印花窗帘渲染

工作流

  1. 确定源图像、可选文本行、调色板和输出目录。
  2. 确定已安装的技能目录，并运行 scripts/create_printed_curtain.py。
  3. 等待 VALIDATION=PASS 和 OUTPUT_HTML=<absolute path>。
  4. 通过 HTTP 提供输出目录，并在浏览器中检查结果。不要使用 file://；浏览器画布安全机制可能会阻止采样本地作品像素。
  5. 返回 HTML 绝对路径、本地服务器命令和选定的作品设置。

快速开始

/usr/local/bin/python3 scripts/create_printed_curtain.py \
  --image "/absolute/path/to/artwork.png" \
  --text "VIBE MOTION" \
  --output-dir "$(pwd)/out/printed-curtain"

已安装技能的解析

使用已安装的技能副本，而不是此技能集合的源代码检出副本：

skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
  if [ -d "$base/skills/printed-curtain-render" ]; then
    skill_dir="$base/skills/printed-curtain-render"
    break
  fi
done
[ -n "$skill_dir" ] || { echo "printed-curtain-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }

/usr/local/bin/python3 "$skill_dir/scripts/create_printed_curtain.py" \
  --image "/absolute/path/to/artwork.png" \
  --text "VIBE MOTION" \
  --output-dir "$(pwd)/out/printed-curtain"

预览

提供生成的目录，然后打开输出的 URL：

/usr/local/bin/python3 -m http.server 8000 --directory "$(pwd)/out/printed-curtain"
  • 在窗帘上移动指针，可将单根帘线拨开。
  • 按 H 切换实时控件和图像选择器。
  • 按 R 重建布料。
  • 将 PNG、JPEG 或 WebP 文件拖放到画布上，即可在浏览器中临时替换图像。

自定义

  • 重复使用 --text 可添加多行居中文本。
  • 使用 --image-fit contain|cover|stretch，以及 --image-x、--image-y、--image-width 和 --image-height 画板控件，将作品放置在 1200×1600 的材质画布上。
  • 使用 --text-y、--text-width、--text-height、--text-gap、--font-family 和 --font-weight 微调文字。
  • 使用 CSS 十六进制颜色设置 --cloth-color、--ink-color 和 --background-color。
  • 仅在现有输出目录中更新生成的文件名时使用 --overwrite。它会保留无关文件。
  • 编辑生成的 artwork.js，可精细调整图像图层或逐行设置颜色，而无需分叉物理引擎。

行为

  • 将捆绑的 p5.js 模拟程序和选定图像复制到便携式输出目录；不上传用户作品，也不需要网络连接。
  • 将作品嵌入布料的材质坐标中，使其随帘线拉伸、折叠和分开，而非悬浮在帘线之上。
  • 模拟 40 根 Verlet 帘线，并插值显示可见编织结构，以较低的物理计算开销呈现致密窗帘。
  • 将舞台适配为居中的 3:4 画面，并在其他窗口比例下保留作品比例。
  • 除非明确指定 --overwrite，否则拒绝使用非空输出目录。
  • 未提供 --image 或 --text 时，生成仅含文字的 VIBE MOTION 窗帘。

要求

  • Python 3.9+
  • 支持 Canvas 的现代浏览器

许可证

捆绑的窗帘引擎改编自 Jason Labbe 的 Dynamic ropes 2，仍采用 CC BY-SA 4.0 许可证。保留其源代码署名，并以相同许可证分享改编作品。

评论

支持 Markdown