공이 당구처럼 튀는 애니메이션 라이브러리

웹 페이지에서 "볼이 당구처럼 튀는 애니메이션"을 쉽게 구현할 수 있는 JavaScript 라이브러리를 만들었습니다.
만들었지만, 어디에도 소개하지 않고 방치하고 있었기 때문에 조금 기억이 그렇습니다만…

데모

GitHub

개요

간단한 Canvas 애니메이션입니다.
라이브러리를 읽으면 new 끝납니다. API는 중지/다시 열립니다.

사용 예

자세한 내용은 GitHub 또는 데모 HTML을 살펴보십시오.

기본
자동 생성된 canvas 요소가 document.body에 추가됩니다.

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

기존 캔버스 요소 지정

<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();
  }
});

그건 그렇고

왜 내 문서라든지 에세 영어로 썼을까요.