demo_gsap API

Luna-Flow/geometry3d/demo_gsap は js ターゲット向けのブラウザ用実行ファイルです。MoonBit の項目は公開せず、インターフェースは前提とする HTML ページと、GSAP SVG バックエンドで作るプレーヤーです。

ビルドと配信

just gsap-build   # moon build src/demo_gsap --target js, then copy files
just gsap-serve   # build, then serve target/gsap-demo on http://localhost:8081

gsap-build は src/demo_gsap/index.html とコンパイルされた demo_gsap.js（demo.js として）を target/gsap-demo/ にコピーします。ページは jsDelivr から GSAP 3.13.0 を読み込み、globalThis.gsap を設定してから demo.js をインポートします。

ページの取り決め

geometry3d-svg

<svg id="geometry3d-svg"> 要素が描画されたポリゴンを受け取ります。サイズは 640 × 480 です。

play-toggle, reverse, restart

これらのボタンはタイムラインの一時停止・再開、逆再生、最初からの再生を行います。プログラムは play-toggle のテキストを PLAY または PAUSE にします。

progress, time-readout

範囲入力 progress（0 から 1）はタイムラインの位置を表示し、シークにも使います。要素 time-readout は時刻を t / 8.00s の形で表示します。

demo-select

セレクタでシーンを選びます。値 dolly ならドリーズーム、それ以外ならトーラスです。

speed, loop

speed セレクタは再生速度の倍率を設定し、loop チェックボックスは無限の繰り返しと 1 回だけの再生を切り替えます。

これらの要素のどれかが欠けていると、プログラムは起動時に中断します。

タイムライン

タイムラインは 8 秒で、既定では無限に繰り返します。更新のたびに現在時刻 $t$ における選択中のシーンを描画します。

トーラス

トーラスのシーンは、Canvas デモのトーラスを $y$ まわりに $1.8\,t$ ラジアン（$x$ と $z$ まわりにはその $0.7$ 倍と $0.25$ 倍）回転させ、6.2 単位離れた位置から 35 mm レンズで写します。

ドリーズーム

ドリーのシーンはカメラ距離 $d(t) = 3.2 + 66.37 \cdot \tfrac12\big(1 + \sin(\pi t / 2)\big)$ を使うので、8 秒のループでドリーを 2 周期行います。焦点距離は $23 \cdot d / 3.2$ mm で、立方体は $1.23$、$1.71$、$0.69$ rad/s で回転します。