Screenshots
Overview
概要
宇宙空間に浮かぶ鉄琴の音板の階段を、ほのかに光る球体がぽーん、ぽーんと跳ねながら降りていくオーディオビジュアルデモです。音板は1枚が1音に対応し、実際の鉄琴と同じく高い音ほど短く、音の高さに合わせて青紫から黄金色へと色づいています。球体が着地するたびに音板が光り、波紋が広がり、鉄琴の澄んだ音が鳴る。その連なりがそのまま1曲のメロディになります。収録曲はきらきら星変奏曲・カノン・ジムノペディ・トロイメライ・歓喜の歌など、すべてパブリックドメインのクラシック13曲。曲を選ぶと、その曲の音符の数だけ音板が並んだ階段が組み上がります。
How to use
遊び方・使い方
「タップしてスタート」で演奏がはじまります(音が出ます)。曲が終わると玉はそのまま次の曲の音板群へ飛び移り、途切れなく演奏が続きます(連続再生)。「1曲リピート」に切り替えれば同じ曲を繰り返します。左上のセレクトでブラームスの子守歌、パッヘルベルのカノンなど13曲からいつでも選曲でき、途中で替えても玉が新しい階段へシームレスに跳び移ります。音色(鉄琴・オルゴール・マリンバ)とテンポ(60〜140%)も変更でき、これらの設定はURLに反映されるのでそのまま共有できます。音板を直接タップすると単音で鳴らせます。
Tech stack
技術スタック
重力は常に一定で、玉は毎回「落差と飛行時間から決まる初速」の純粋な放物線を描きます。休符や伸ばす音符は音板の配置(遠く・低く)が吸収し、1.2秒を超える滞空は同じ音板上での小さなバウンドに分解。音板はMeshPhysicalMaterialの透過(transmission)+虹彩でガラス質感にし、環境マップの映り込みを効かせています。メロディは[半音, 拍数]の配列データで、階段はその場で手続き生成。OGP画像は同じ配色ロジックをBlenderのPythonスクリプトで再現しCyclesでレンダリングしました。
Highlights
工夫した点
- 鉄琴の音はサンプル音源を使わず、金属音板の倍音構成(基音の2.756倍・5.404倍)をWeb Audio APIのオシレーターで加算合成し、フィードバックディレイの残響を添えて生成
- 球体の軌道は物理エンジンではなく、音符の拍の長さをそのまま放物線ホップの滞空時間に使う設計。着地の瞬間と発音が音楽的に必ず一致する
- アニメーションの時計にAudioContextのクロックを使い、映像と音のずれを構造的に排除。音は150ms先読みでサンプル精度スケジューリング
- 「眩しすぎない」美しさの調整。ブルームの閾値・音板の発光量・残光スプライトの重なりを実機で何度も確認しながら、球体だけがほのかに光る絵に追い込んだ
- 曲間は画面を切り替えず、玉が次の曲の音板群へ物理法則どおりに跳び移り、前の曲の音板は静かにフェードアウトする「終わらないカスケード」構造
- 13曲の採譜はAIサブエージェント3体がIMSLP・Mutopia等の楽譜と照合して検証し、7曲の音程・リズムを修正済み
To improve
改善したい点
- メロディは単旋律のみで、和音や伴奏声部がないため原曲の雰囲気が簡素になる曲がある
- 採譜は一部簡略化しており、原曲に忠実でないフレーズが残っている
- モバイルの低スペック端末でのブルーム描画負荷は最適化の余地がある
What's next
今後の展望
- 伴奏用の第2の球体(和音・低音声部)を追加して二重奏にする
- テンポ・音色(オルゴール・マリンバ等)の切り替えUI
- 自分でメロディを並べて共有できるエディタモード