Screenshots
Overview
概要
Hydra（hydra-synth）は Olivia Jack によるオープンソースのライブコーディング用ビジュアルシンセサイザーです。アナログのビデオシンセに着想を得ており、osc や noise などの発生源に rotate・kaleid・modulate といった変形をメソッドチェーンでつなぐだけで、ブラウザと GPU だけでリアルタイムの映像を合成できます。本サイトは、その表現力を作例ギャラリー・その場で書き換えられるプレイグラウンド・音/カメラ反応デモで体験できるショーケースです。
How to use
遊び方・使い方
ヒーローの背景自体が動く Hydra コードで、一定間隔で別のスケッチへ自動巡回します。作例ギャラリーでは12点のスケッチがすべて実際に GPU で描画され、各カードからコードを表示したり「プレイグラウンドで開く」で読み込めます。プレイグラウンドではコードを書き換えると 500ms 後に自動で映像へ反映され、パラメータ・スライダーで再実行なしにライブ変調、現在のフレームの画像保存・動画(webm)録画・全画面・URL共有もできます。さらにマイクを許可すると FFT で音に反応し（周波数バーを可視化）、Webカメラを許可すると自分の映像が万華鏡になります。
Tech stack
技術スタック
映像エンジンは hydra-synth 1.4.0（UMD版を public/vendor に自己ホスト）。Next.js 16 App Router で配信し、複数シンセの同時描画はコンテキストプール（PC8/モバイル3）と画面外破棄・コンテキストロスト復帰で安定化しています。本番はメモリ制約のためローカルビルドした成果物を rsync する方式。
Highlights
工夫した点
- 1ページにヒーロー・ギャラリー12枚・プレイグラウンド・入力デモと多数のシンセが同居するため、makeGlobal:false + autoLoop:false + 自前RAFで各キャンバスを独立駆動し、画面外ではコンテキストを破棄。同時WebGLコンテキスト数を上限管理するプールで黒画面を防止
- hydra-synth を npm 依存にせず配布版を自己ホストし、ユーザーコードは synth のキーを関数引数に束縛して評価することで、通常の Hydra と同じ書き味のままグローバルを汚さず複数インスタンスを実行
- setFunction による独自 GLSL 変換の作例、render() の4分割マルチ出力、音声FFTの可視化、動画録画など、Hydra の表現力と拡張性を一通り提示。prefers-reduced-motion や reduced 解像度などの配慮も実装
To improve
改善したい点
- エディタが素の textarea で、シンタックスハイライトや行番号などの本格的なコード編集支援がない
- 音声・カメラ入力は許可が前提で、非対応・拒否時の体験は限定的
- 低スペック端末ではギャラリーの同時描画が重く、サムネ静止化など更なる負荷低減の余地がある
What's next
今後の展望
- CodeMirror 等の導入によるエディタ体験の強化
- 作例の追加と、MIDI など外部入力ソースの拡充
- 共有ギャラリーやお気に入り保存などソーシャル要素の検討