JavaScriptのsinとcosを使ってみる

JavaScriptのsinとcosを使って、円周上を移動する処理を記述してみます。

サンプルコード

以下のようなコードで、.circleを円周上に移動させてみます。

<div class="box">
  <div class="circle"></div>
</div>

.circleのtopとleftを変更させる想定でCSSを設定します。

.circle {
  position: absolute;
  background: red;
}

最後にJavaScriptです。

const rotate = (ts) => {
  const count = ts / 1000;
  // 円周上のX座標とY座標を取得
  const xPos = 100 * Math.sin(count);
  const yPos = 100 * Math.cos(count);
  console.log(count, xPos, yPos);
  document.querySelector('.circle').style.left = `${xPos}px`;
  document.querySelector('.circle').style.top = `${yPos}px`;

  window.requestAnimationFrame(rotate);
}
window.requestAnimationFrame(rotate);

円の中心が(0, 0)で半径がrの円周上の座標(x, y)は、x = r × sinθ、y = r × cosθの数式で求められます。
上記のコードでいうと4～5行目で、半径rが100の円周上の座標を取得していることになります。

これで.circleが円周上を移動するようになりました。
円周上を移動するデモページ

上記の例だと円周の最下部からスタートしていますが、開始地点を変える場合は以下のようにします。

const rotate = (ts) => {
  const count = ts / 1000;
  // 円周上のX座標とY座標を取得
  const xPos = 100 * Math.sin(count + Math.PI);
  const yPos = 100 * Math.cos(count + Math.PI);
  console.log(count, xPos, yPos);
  document.querySelector('.circle').style.left = `${xPos}px`;
  document.querySelector('.circle').style.top = `${yPos}px`;

  window.requestAnimationFrame(rotate);
}
window.requestAnimationFrame(rotate);

これで円周の最上部からスタートするようになりました。
円周上を移動するデモページ2
同じように、円周の右端から開始する場合は「(Math.PI * 0.5)」、左は時から開始する場合は「(Math.PI * 1.5)」のようにすると変更できます。

円の中心位置をずらしたい場合、以下のように変更します。

const rotate = (ts) => {
  const count = ts / 1000;
  // 円周上のX座標とY座標を取得
  const xPos = 100 * Math.sin(count) + 50;
  const yPos = 100 * Math.cos(count) + 50;
  console.log(count, xPos, yPos);
  document.querySelector('.circle').style.left = `${xPos}px`;
  document.querySelector('.circle').style.top = `${yPos}px`;

  window.requestAnimationFrame(rotate);
}
window.requestAnimationFrame(rotate);

この場合、円の中心が右に50px、下に50px移動しました。
円周上を移動するデモページ3