ascii-pixel-art

ASCII ピクセルアートジェネレーター

画像から、被写体検出、ぼかしたピクセル背景、動的な視覚効果を備えたアニメーション ASCII アートを生成します。

説明

高度な視覚効果を使って、画像をインタラクティブな ASCII アートに変換します。コンピュータービジョンで被写体を検出し、雰囲気のある背景を作成して、パルス効果、斜め方向のスイープ、ランダムなちらつき、インタラクティブなホバー応答など、映画のようなアニメーションを追加します。

使用する場面

✅ 次の場合に使用します：

• 写真やポートレートをアーティスティックに視覚化する
• レトロ／サイバーパンク風のコンテンツを生成する
• インタラクティブなウェブアート作品を制作する
• 画像をアニメーション付き HTML 表示に変換する
• 独自のソーシャルメディアコンテンツを作成する
• クリエイティブコーディングの手法を紹介する

❌ 次の場合は使用しないでください：

• シンプルなテキストベースの ASCII アートで十分な場合
• パフォーマンスが重要な場合（負荷の高い処理が必要です）
• アクセシビリティが最優先の場合（視覚効果に依存します）
• 入力画像に明確な被写体がない場合（ポートレートやオブジェクトに最適です）
• 静止した出力が必要な場合（アニメーション付き HTML を生成します）

前提条件

必須パッケージ：

pip install pillow rembg numpy

システム要件：

• Python 3.7+
• 画像処理用に約500MBの RAM
• rembg のモデルは自動的にダウンロードされます（約180MB）

使用方法

基本コマンド

python3 scripts/ascii_pixel_effect.py <input_image> [output.html]

例

# Generate with default output name
python3 scripts/ascii_pixel_effect.py portrait.jpg

# Specify output file
python3 scripts/ascii_pixel_effect.py photo.png artwork.html

# Process multiple images
for img in *.jpg; do
  python3 scripts/ascii_pixel_effect.py "$img" "${img%.jpg}.html"
done

仕組み

7段階のパイプライン

1. 読み込みとリサイズ

• 画像を開き、RGB に変換します
• 幅を900pxにリサイズします（アスペクト比を維持）
• 高品質な縮小処理のために LANCZOS フィルターを使用します

2. ぼかした背景の作成

• ガウスぼかしを適用します（半径=14）
• 35%暗くします（0.65を乗算）
• 彩度を50%下げます（輝度グレースケールとブレンド）
• BOX フィルターで縮小し、NEAREST で拡大してピクセル化します
• 雰囲気のあるベースレイヤーを作成します

3. 被写体検出

• rembg を実行してアルファマスクを生成します
• しきい値：被写体の検出には、マスクの平均値が0.25を超えることが必要です
• 重要： マスクのみを使用します（輝度による補完は行いません）
• 明るい背景に ASCII 文字が表示されるのを防ぎます

4. ピクセルグリッドの重ね合わせ

• 24px間隔で白いボックスを配置します
• 控えめなサイバーパンク風にするため、不透明度は5%です
• 被写体のセルにのみ適用します
• 静的なレイヤーです（1回だけ描画されます）

5. 文字グリッドの作成

• セルサイズ：11×14ピクセル
• 各セルの平均 RGB 値と輝度をサンプリングします
• 被写体のセル： 密度ランプから選んだ ASCII 文字と、正規化された色を使用します
• 背景のセル： 暗い青色（40、65、100）の . 文字を使用します
• ASCII ランプ：@#S08Xox+=;:-,. （輝度の反転）

6. レイヤーの合成

• レイヤー1：ぼかした背景（base64 として埋め込み）
• レイヤー2：ピクセルグリッドのキャンバス
• レイヤー3：ASCII 文字のキャンバス
• すべてのレイヤーを一致させて拡大する単一のラッパー div

7. アニメーション（JavaScript）

• 正弦波パルス： 明るい被写体セルが明滅します
• 斜め方向の輝き： ハイライトが掃引する効果
• ランダムなちらつき： セルごとに0.25%の確率で発生し、2～8フレーム続きます
• ホバーリップル： 8セル以内にインタラクティブなシアンの輝きを表示します
• 文字の散乱： ホバー時に2セル以内へランダムな文字を表示します
• 動的な輝き： shadowBlur が輝度とパルスに応じて変化します
• 背景のドット： 不透明度30%で固定表示します

パラメーター

パラメーター	値	用途
TARGET_WIDTH	900px	出力画像の幅
CELL_W × CELL_H	11×14px	文字セルの寸法
GRID_STEP	24px	ピクセルグリッドの間隔
ぼかし半径	14	背景のぼかしの強さ
BG darken	0.65	背景を暗くする度合い（35%暗くなります）
BG desaturate	50%	背景の色の低減率
被写体のしきい値	0.25	被写体検出に使うマスクの平均値
ASCII ランプ	@#S08Xox+=;:-,.	密度のグラデーション（暗→明）
BG dot color	(40, 65, 100)	背景文字の RGB 値
BG dot opacity	30%	背景文字の不透明度
Grid opacity	5%	ピクセルグリッドの視認性

色の計算式

def normalize_color(r, g, b):
    """Preserve hue, maximize brightness"""
    mx = max(r, g, b, 1)
    return int(r/mx*255), int(g/mx*255), int(b/mx*255)

この処理では、最も明るいチャンネルが255になるように RGB 値を正規化し、色相を保ちながら被写体ピクセルの彩度を最大化します。

出力

自己完結型の HTML ファイル：

• 外部依存関係なし
• 背景画像は base64 でエンコード済み
• CSS と JavaScript をインラインで記述
• ブラウザーで直接開けます
• ホバー時にインタラクティブなエフェクトが発生します
• 画像サイズに応じて約 500KB～2MB

視覚効果：

• 60fps のアニメーション
• マウスの動きに反応します
• 映画のようなライティングとグロー
• サイバーパンク／レトロな美学

ヒントとベストプラクティス

画像の選択：

• 最適： ポートレート、人、特徴のはっきりしたオブジェクト
• 良好： 製品写真、被写体が明確なアートワーク
• 避ける： 風景、抽象的なパターン、雑然とした背景

パフォーマンス：

• 処理時間：画像あたり 5～15 秒
• 出力サイズ：約 1～2MB の HTML
• ブラウザーでのパフォーマンス：優れています（canvas ベース）

アーティスティックな調整：

• 元画像が暗いほど、コントラストがよりドラマチックになります
• コントラストの高い被写体ほど、輪郭がより明確になります
• 背景がすっきりしているほど、ドットマトリックスもすっきりします
• 被写体が中央にあるほど、視覚的なバランスが良くなります

よくある問題：

• 被写体を検出できない： 前景と背景がより明確に分かれている画像を試してください
• 明るすぎる： 元画像の調整が必要な場合があります
• アニメーションがカクつく： ブラウザーのハードウェアアクセラレーションを確認してください

関連バリエーション

• v2（グレー背景）： ピクセル化されたぼかしの代わりに、中間色のグレー背景を使う代替版
• 実装については skills/ascii-pixel-effect-v2/SKILL.md を参照してください

参考資料

• オリジナルの実装：2026年3月
• 指導者：Sensei
• インスピレーション：クラシックな ASCII アート＋最新のウェブアニメーション
• 技法：コンピュータービジョン＋ジェネレーティブアート

ライセンス

MIT License - 自由に使用、改変できます