Matter.js で作る、投げられるアプリアイコン

ホームページには、当社のアプリアイコンを入れたボックスがあります。ページを開くとアイコンが落ちてきて、つかんで投げることもできます。ドラッグせずにタップすると、そのアプリのページが開きます。作るのにかかったのは午後いっぱいほどでしたが、思った以上に面白い工夫がいくつかありました。

なぜボックスなのか

最初は、ページ上部全体をアイコンが飛び回るようにしようと考えました。しかし、そこには見出しやボタンがあります。「Start a project」の上にアイコンが乗ってしまっては、ちょっとした遊び心と引き換えにするには損です。そこで、紹介文の横にラベル付きのボックスを置き、遊べる範囲を限定しました。ワイド画面で紹介文とボタンの右側にもともと空いていたスペースにも、うまく収まりました。スマートフォンでは、ボタンの下に表示されます。

Matter.js による本物の物理演算

円同士がぶつかり合う動きなら、自分で書くのは簡単です。ところがアプリアイコンは角丸の四角形で、四角形がコインのように転がると、すぐに不自然だとわかります。きちんと転がったり積み重なったりさせるには本格的な物理エンジンが必要なので、Matter.js を使いました。各アイコンは、アイコンの角丸 22% に合わせた角丸の長方形（chamfer）で、固定された四つの壁の中に入っています。

エンジンのサイズは 83KB です。そのため、ホームページでのみ、ページが表示された後に、さらに訪問者が視差などの動きの軽減を求めていない場合に限って読み込みます。

canvas ではなく DOM 要素

Matter.js は canvas に描画することもできますが、当社では計算にだけ使っています。アイコンは画像付きの通常のリンクで、毎フレーム CSS の transform で位置を決めています。

st.setProperty("--x", (b.position.x - size / 2) + "px");
st.setProperty("--y", (b.position.y - size / 2) + "px");
st.setProperty("--a", b.angle + "rad");

そのため、タップすれば本物のリンクとして動作し、どれだけ拡大しても画像は鮮明で、アイコンの枠線やスタイルもサイト内の他の部分と同じになります。

動かない影

当社のスタイルでは、あらゆる要素の右下にくっきりとした影を付けています。回転する要素にこれを付けると影も一緒に回転してしまい、回っているアイコンの影が時計の針のように振れてしまいます。そこで、毎フレーム、影のオフセットを逆方向に回転させて対処しました。

// keep the shadow at (3px, 3px) in screen space while the icon turns by a
st.setProperty("--shadow-x", 3 * (Math.cos(a) + Math.sin(a)) + "px");
st.setProperty("--shadow-y", 3 * (Math.cos(a) - Math.sin(a)) + "px");

つかんで投げる

ポインターを押した時点で、ポインターと、つかんだアイコン上のその位置（中心ではありません）との間にバネ（Matter.js の constraint）を取り付けます。そのため、角をつかんで持つと自然に揺れます。離すと速度はそのまま保たれますが、強く弾いても壁を突き抜けないよう上限を設けています。ポインターの移動が 6 ピクセル未満なら、タップとみなしてリンクを開きます。

アイコンが上から落ちてくる間はボックスの上部を開けておき、すべてが中に入ったら閉じます。これで、投げたアイコンが上から飛び出してしまうことはありません。

細かな工夫

強く着地すると、ページの点線の背景に波紋が広がります。
すべてが静止するとシミュレーションは停止し、ボックスが画面外にあるときも一時停止します。そのため、読んでいる間は負荷がかかりません。
アイコンが落ちてくるのは、ボックスが画面に表示されてからです。スマートフォンでは、スクロールしてボックスまで来たときに落ちてきます。
JavaScript が無効の場合や、動きの軽減が有効な場合は、アイコンはきれいな山の形で静止したままになりますが、リンクとしてはそのまま使えます。

ささやかな仕掛けですが、言葉で説明するよりも、当社が作るアプリの雰囲気をよく伝えられると考えています。お客様のウェブサイトでも同じようなことをしたい場合は、お気軽にご相談ください。

あわせてお読みください：サイトをエージェント対応にするために必要だったこと、または WordPress 7.2 が 12 月 8 日にリリース：当社のプラグインで確認していること。

ホームページの「投げられるアプリアイコン」