時区間駆動型API
時区間駆動型APIとは？
これを「時刻駆動型API (time-driven API)」と呼びます
描画ループごとに呼び出すことを念頭に設計されており、楽曲再生中にパーティクルを生成したり破棄したりといった処理に便利です
具体的には、 Web標準の requestAnimationFrame() や p5.js の loop() といった描画ループにおいて、最後に呼び出されたときの再生時刻 lastPosition を記録しておき、次の呼び出し時に現在の再生時刻 position までの区間を引数で与えることにより、各フレームの描画で行うべき処理をまとめて計算できます 例えば以下のような使い方ができます:
code:script.js
const beats = player.findBeatChange(lastTime, position);
if (
lastTime >= 0 &&
// ↑初期化された直後はビート検出しない
beats.entered.length > 0
// ↑二拍ごとにしたければ
// && beats.entered.find((b) => b.position % 2 === 1)
// のような条件を足してチェックすればよい
) {
// ビート同期のアニメーションを発火させる
requestAnimationFrame(() => {
bar.className = "active";
requestAnimationFrame(() => {
bar.className = "active beat";
});
});
}
APIの返値は？
返値は以下のような構造を持ちます:
上の例では entered プロパティのみを利用しています
code:TimedObjectsInRange.ts
interface TimedObjectsInRange<T> {
// T は取得したい情報（イベント）の型
// 区間の最後と重複しているイベント
current: T;
// 区間内に発生したイベント
entered: T[];
// 区間内に終わったイベント
left: T[];
// 区間の外にあり、次に起きる最初のイベント
next: T;
// 区間の前にあり、すでに完了した最後のイベント
previous: T;
}
API設計についてさらに詳しく
関連するAPI設計の比較は以下の図をご覧ください:
https://gyazo.com/6d04d9441d023424ec106f18e359131f
APIリファレンス