AMBERGLOW

コンクリート床へプロジェクターで投影する、リキッドライトショー風のジェネラティブ映像作品です。

映像は床の上に「載せる」のではなく、コンクリートの質感に馴染み、光や色が染み込んでいるように見える表現を目指しています。水・油・インク・光がゆっくり混ざるような動きで、輪郭はグラデーションで溶け、細い流れとにじみを中心に描画します。

PC ブラウザで全画面表示して使用することを想定した、静的サイト（バックエンド不要）の MVP です。

ページ構成

パス	内容
/	作品紹介ページ
/play/	投影用の全画面映像

GitHub Pages ではリポジトリ名がベースパスになるため、公開 URL は次のようになります。

• 紹介: https://6vox.github.io/amberglow/
• 投影: https://6vox.github.io/amberglow/play/

開発方法

npm install
npm run dev

ブラウザで表示されたローカル URL を開きます。

見た目の主要パラメータ（色・速度・ぼかし・透明度など）は src/config.ts にまとめています。

ビルド方法

npm run build

成果物は dist/ に出力されます。ローカル確認:

npm run preview

GitHub Pages へのデプロイ方法

1. npm run build で dist/ を生成する
2. GitHub リポジトリの Settings → Pages で、デプロイ元を次のいずれかにする
   • GitHub Actions で dist/ を公開する（推奨）
   • または dist/ の内容を gh-pages ブランチへ推す
3. vite.config.ts の base は /amberglow/ 前提です。別リポジトリ名の場合は合わせて変更してください

手動で gh-pages ブランチへ載せる例:

npm run build
npx gh-pages -d dist

PR の見た目プレビュー（Netlify）

本番は GitHub Pages のまま、Pull Request の見た目確認だけ Netlify Deploy Preview を使います。

初回だけ（Netlify と GitHub を接続）

1. Netlify で GitHub の 6vox/amberglow を Import
2. Build settings は netlify.toml をそのまま使う（上書き不要）
3. Site settings → Build & deploy → Continuous Deployment で Deploy Previews が有効なことを確認
4. Production の公開は GitHub Pages 側を使う（Netlify の production ビルドは netlify.toml でスキップ）

使い方

PR を開くと Netlify がプレビューをビルドし、PR にコメントで URL が付きます（例: https://deploy-preview-4--….netlify.app/play/）。

ローカル起動なしで / と /play/ の見た目を確認できます。

キー操作（/play/）

通常時は UI を出さず、映像のみを表示します。

キー	動作
F	フルスクリーン切り替え
1	昼パレット
2	夕方パレット
3	日没パレット
4	夜パレット
0	時刻連動の自動モード
↑ / ↓	動きの速度調整
H	操作説明の表示・非表示

自動モードでは、大阪府吹田市付近の緯度経度から日の入り時刻をブラウザ上で計算し、昼→夕方前→日没→夜のパレットを時間に応じて滑らかに補間します。

将来の音声連動について

今回の MVP では音声連動は実装していません。

ただし、映像の可変パラメータは src/visualParams.ts に、描画処理は src/renderer.ts に分離しています。将来 Web Audio API で音量や周波数帯のエネルギーを取得し、applyAudioModulation() 経由で速度・透明度・色などを変調できるようにしてあります。