ボールがビリヤードのように跳ね回るアニメーションライブラリ

ボールがビリヤードのように跳ね回るアニメーションライブラリ:

Web ページ上で「ボールがビリヤードのように跳ね回るアニメーション」を簡単に実装できる JavaScript ライブラリを作りました。
作ったものの、どこにも紹介せずに放置していたのでちょっと記憶がアレですが…。

• デモ
• GitHub

概要

単純な Canvas アニメーションです。

ライブラリを読み込んだら new して終わり。 API は停止／再開くらいです。

使用例

詳しくは GitHub かデモの HTML を覗いてみてください。

• デフォルト
  
  自動生成された canvas 要素が document.body に追加されます。

<script src="./billiards.min.js"></script> 
<script> 
new Billiards({}); 
</script> 

• 既存の canvas 要素を指定する

<canvas class="canvas"></canvas> 
<script> 
new Billiards({ 
  'canvas': document.querySelector('.canvas') 
}); 
</script> 

• 親要素を指定して canvas 要素を自動生成する

<div class="canvas-container"></div> 
<script> 
new Billiards({ 
  'parent': document.querySelector('.canvas-container') 
}); 
</script> 

• Canvas のサイズと背景色を指定する

new Billiards({ 
  'width': '640', 
  'height': '480', 
  'fillStyle': 'rgba(0, 0, 0, 0.25)' 
}); 

• Canvas を自動的にウィンドウサイズに合わせる

new Billiards({ 
  'fitToWindow': true 
}); 

自動的に親要素のサイズに合わせる fitToParentW と fitToParentH もあります。

• スプライトの詳細設定
  
  詳しくは こちら。 RGBA 値・半径・速度は [ 最小値, 最大値 ] の範囲でランダムに決定されます。
  
  なお、半径 r はピクセル指定ではなく、 Canvas のサイズに対する割合を指定します。

new Billiards({ 
  'number': 8, 
  'r': [ 0.1, 0.2 ], 
  'color': { 
    'r': [ 192, 255 ], 
    'g': [ 128, 255 ], 
    'b': [ 0, 255 ], 
    'a': [ 1.0, 1.0 ] 
  }, 
  'composite': 'lighter', 
  'velocity': [ 1.0, 2.0 ] 
}); 

• 跳ね返らせない

new Billiards({ 
  'rebound': false 
}); 

• 衝突させない（すり抜ける）

new Billiards({ 
  'collide': false 
}); 

• アニメーションループの手動設定
  
  既存の requestAnimationFrame に組み込みたい時に。

const billiards = new Billiards({ 
  'autoPlay': false 
}); 
const update = () => { 
  requestAnimationFrame(() => { 
    billiards.update(); 
    update(); 
  }); 
}; 

• 手動レンダリング
  
  画像を描画したい時に。 billiards がインスタンス、 billiards._ が設定、 sprite が現在のスプライトです。

new Billiards({ 
  'render': (billiards, sprite) => { 
    billiards.context.fillStyle = sprite.color; 
    billiards._.composite && (billiards.context.globalCompositeOperation = billiards._.composite); 
    billiards.context.beginPath(); 
    billiards.context.arc(sprite.x, sprite.y, sprite.r, 0, Math.PI * 2); 
    billiards.context.closePath(); 
    billiards.context.fill(); 
  } 
}); 

ところで

なんで私ドキュメントとかエセ英語で書いたんでしょうね。