jmotion - ジャグリング シミュレーター ライブラリ

jmotion はウェブでジャグリングシミュレーターを動かすための JavaScript ライブラリです。読み方は「ジェイモーション」。ジャグリングのパターンを表す数列である「サイトスワップ」を指定することで手軽にアニメーションを実行できる一方、道具などの座標を直接指定して制御することも可能です。

サンプルアプリ

使用方法

まず、HTMLファイルの <head> ブロックに次の1行を書きます。

<script src="https://app.7131.jp/jmotion/v10/jmotion.js"></script>

src 属性に指定されているのはオリジナルファイルのURLです。このファイルを ダウンロード して自分のパソコンやサーバーに設置することもできますが、そのときは設置した場所を src 属性に指定してください。

次に <body> ブロックに <svg> タグを置きます。

<svg id="board" width="300" height="300"></svg>

id 属性は任意の文字列で構いませんが、ここでは board としておきます。サイズも自由に設定可能です。通常はスタイルシートで設定することになると思います。環境によっては名前空間の属性 xmlns="http://www.w3.org/2000/svg" が必要になりますので、うまく表示されないときは指定してみてください。

以上で準備は終了です。<svg> が表示された後に <script> タグなどで Facade オブジェクトにそれを渡すことでシミュレーターを実行できます。例えばサイトスワップの 3 を投げる JavaScript は次のようになります。

<script>
const facade = new jmotion.Facade("#board");
facade.startJuggling("3");
</script>

オブジェクトの相関関係

jmotion 名前空間に定義された各オブジェクトと HTML の各タグの相関関係を以下の図に示します。

Facade Animator Core BasicCreator Siteswap <html> <svg> <script> draw create use
Facade
シミュレーターの窓口として、他のオブジェクトを制御します。
Animator
道具や腕の座標を少しずつ変えて Core に描画させることでアニメーションを実行します。
Core
道具や腕を <svg> タグに描画します。
BasicCreator
道具や腕の動きを表す座標一覧を生成します。
Siteswap
入力文字列を解析してプログラムで扱いやすいデータに変換します。

リファレンス

ライブラリを読み込むと、グローバル名前空間に jmotion 名前空間が追加されます。以下に示すオブジェクトは全てこの jmotion 名前空間に属しています。