トップページの白馬の表現について

トップページでは、白馬がアーチの奥から現れ、こちらに向かって駆けてきます。滑らかにつながる映像ではなく、姿勢が一枚ずつ切り替わり、その後ろに残像が残る表現です。

この記事では、足運びを固定位置で再生できるように切り出しました。素材の構成から、時間の刻み方、トップページでの描画までを紹介します。

白馬の足運び

「タカタッ、タカタッ」と駆ける感じは、姿勢の変化と、それぞれを表示する時間の組み合わせで作っています。下のデモでは、トップページで使っている素材の9〜12コマ目を、同じ位置・同じ大きさで繰り返します。

「再生する」で開始し、「一時停止」するとその姿勢で止まります。「先頭へ戻る」で最初の姿勢に戻せます。画面外へスクロールしたときは停止します。

これは足運びを観察するためのデモです。トップページにある接近・拡大・残像は省き、Canvas 2D API でスプライトの切り替えだけを描いています。

一枚の画像から姿勢を取り出す

素材は、12枚の姿勢を一枚にまとめた WebP のスプライトシートです。各コマの切り出し位置と寸法を指定し、必要な領域だけを表示します。

デモで使う4コマは、画像の下段に並んでいます。各領域は幅362px、高さ414pxです。次のコードは、先頭の姿勢を描く部分を抜粋したものです。

context.drawImage(
  image,
  0, 672, 362, 414,
  0, 0, canvas.width, canvas.height,
);

画像を置き換えるのではなく、同じ画像の参照領域を切り替えます。デモとトップページは、素材とコマ情報を共有しています。

コマごとに時間を変える

均等な間隔で切り替えると、足運びも均等に見えます。現在のトップページでは各コマの表示時間を固定値で指定し、意図的に間を変えています。

このデモが取り出している区間の表示時間は、順に201、373、273、316ミリ秒です。一周は1,163ミリ秒で、2コマ目に少し長い間があります。

2つ目の姿勢を長く見せることで、次の足運びに移る前に短い「ため」が生まれます。等間隔の切り替えよりも、ひとまとまりの拍として感じられる間を作っています。

const durationsMs = [201, 373, 273, 316];
const cycleDuration = durationsMs.reduce((sum, value) => sum + value, 0);

let time = elapsedMs % cycleDuration;
const frameIndex = durationsMs.findIndex((duration) => {
  if (time < duration) return true;
  time -= duration;
  return false;
});

これは時間からコマを選ぶ処理を簡略化したものです。実装では requestAnimationFrame の時刻を基準にし、経過時間から表示する姿勢を決めます。描画回数を数えて進めないため、端末のリフレッシュレートが変わっても周期は変わりません。

トップページでは奥行きと残像を加える

Blenderで3Dの白馬を動かす案や、動画として配置する案も検討しました。最終的には、姿勢の切り替えとモザイク状の残像を重ねることで、動きの印象をまとめています。

姿勢ごとに切り出し範囲、表示位置、大きさを定めた平面をあらかじめ用意し、経過時間に応じて表示する平面を切り替えています。位置と大きさが段階的に変わることで、白馬がアーチの奥から手前へ近づいてくるように見えます。アーチの奥にいる区間では、ステンシルによって見える範囲を制限しています。

次の図は、白馬の移動経路を検討するためにFigmaで作成したものです。アーチの奥から現れ、右手前へ回り込みながら大きくなる流れを一枚に重ねています。

下の3枚は、トップページと同じ描画処理で取り出した静止画です。アーチの輪郭を補助線として添え、移動と拡大が分かるよう同じ範囲を表示しています。「残像あり」を切り替えると、同じ姿勢・位置のまま残像の有無を比較できます。

過去の姿勢はすぐに消さず、現在の平面とあわせて表示することで、時間の断片として後ろに残します。古くなるにつれて透明度を下げ、モザイク、色のずれ、規則的なディザによる欠落を加えています。

1992年の白馬と私

今年は午年です。白馬はアーチ内の仮想空間からページの前景へ移動し、異なる空間を飛び越えます。制作面でも、グラフィック、モーション、WebGL 実装といった職域をまたぐモチーフです。

造形では、シュルレアリスムに見られる異なる空間の接続と、初期 CG の離散的な動きや質感を参照しています。写実的な映像の再現ではなく、複数の技術と表現を一つの場面にまとめています。

ソースコード

デモとトップページを含むサイト全体の実装は、GitHub リポジトリで確認できます。