Retrix

image → retro pixel art

画像をレトロ風ピクセルアートへ変換する Web アプリ．変換はすべて クライアントサイド（Canvas API）で完結し，ビルドツール・外部パッケージへの 依存はない．

機能

• 入力: ファイル選択 / ドラッグ&ドロップ
• 切り抜き（Crop）: 上下左右の縁を割合で切り落とす
• 前処理（減色前）: 色相回転 / HSV 調整 / トーン調整（明るさ・コントラスト・ 彩度）/ レベル・トーンカーブ（黒白・master/RGB ガンマ）/ ポスタライズ / ノイズ / 順序ディザ（Bayer）/ ネガ反転 / チャネル入替
• 減色: 固定パレット（15 種）/ 適応パレット（Median Cut）/ Floyd–Steinberg 誤差拡散
• 後処理演出（減色後）: 輪郭抽出 / CRT 走査線 / アパーチャグリル / ブルーム（グロー）/ グリッチ / 色収差 / ビネット
• Feeling Lucky: ランダム生成した設定候補を並べ，クリックで After へ適用
• 設定操作: Export / Import（JSON）/ URL 共有 / スナップショット （localStorage）/ 全体・グループ単位のリセット
• 出力: PNG エクスポート（等倍・8x 拡大），ファイル名は 入力名_retrix_日時 形式

各パラメータの UI（スライダ・セレクト）はステージ定義から自動生成され， グループごとに折りたたみ・ツールチップ表示に対応する．

実行方法

ES Modules を使用しているため，file:// 直接読込ではなく静的サーバ経由で開く:

cd retrix
python3 -m http.server 8000
# → http://localhost:8000 を Chrome で開く

対応ブラウザは Chrome（OffscreenCanvas / createImageBitmap に依存）．

デプロイ（GitHub Pages）

ビルド不要の静的サイトのため，リポジトリをそのまま公開できる． GitHub の Settings → Pages で公開ソースを main / root に設定する． .nojekyll を同梱済み（Jekyll のビルドをスキップ）．パスはすべて相対で， <user>.github.io/<repo>/ のサブパス配信でも動作する．

構成

retrix/
├── index.html
├── css/style.css
├── js/
│   ├── main.js       エントリ（UI 生成・入出力・設定/共有・結線）
│   ├── pipeline.js   変換パイプライン（order 順にステージを適用）
│   ├── palettes.js   パレット定義（データのみ）
│   └── stages/       変換ステージ（拡張ポイント）
└── docs/sample.png

エフェクトの追加は js/stages/ にファイルを1つ加え，main.js に副作用 import を1行足すだけで済む（パイプライン組み込みと UI 生成は自動）． パレットの追加は js/palettes.js へのエントリ追加のみ．

開発方針

• git 管理下で開発し，機能追加は branch / worktree で行う
• ステージは純関数（ImageData → ImageData，入力非破壊）として実装する
• UI・ランダム生成・設定 I/O はステージ定義（registry）駆動とし， 個々のステージ実装に依存しない構造を保つ

ライセンス

MIT License