printed-curtain-render

プリントカーテンレンダー

ワークフロー

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 の16進数カラーを指定して、--cloth-color、--ink-color、--background-color を設定します。
• --overwrite は、既存の出力ディレクトリ内にある生成済みファイルを更新する場合にのみ使用してください。無関係なファイルは保持されます。
• 物理エンジンをフォークせずに、生成された artwork.js を編集して、画像レイヤーを細かく調整したり、行ごとの色を設定したりできます。

動作

• 同梱の p5.js シミュレーションと選択した画像を、ポータブルな出力ディレクトリにコピーします。ユーザーのアートワークをアップロードしたり、ネットワーク接続を必要としたりすることはありません。
• アートワークを布の素材座標に焼き込み、糸の上に浮かぶのではなく、糸とともに伸縮し、折り畳まれ、分離するようにします。
• 40本のベルレーストランドをシミュレートし、物理演算の負荷を抑えながら、表示される織り目を補間して密度の高いカーテンを描画します。
• ステージを中央揃えの3:4フレームに合わせ、ほかのウィンドウ形状でもアートワークの縦横比を維持します。
• --overwrite が明示されていない場合、空でない出力ディレクトリへの出力を拒否します。
• --image も --text も指定されていない場合は、テキストのみの VIBE MOTION カーテンを生成します。

要件

• Python 3.9+
• Canvas をサポートする最新のブラウザー

ライセンス

同梱のカーテンエンジンは Jason Labbe の Dynamic ropes 2 を改変したもので、CC BY-SA 4.0 のライセンスが引き続き適用されます。元のソースの帰属表示を保持し、改変物も同じライセンスで公開してください。