Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@narikei

sin・cosを使って円運動を作成する

三角関数なんて忘れてしまったのでメモ。

sin・cosとは

sinもcosも数値(角度)を与えてあげると、数値に応じて-1 〜 +1 までの数値を返してくれる便利なやつ。

sinとcosの違いは
sin 0 が 0で、
cos 0 が 1で始まるところ。

alt

周期は同じなので、これを利用して半径(radius)をかけると振幅する値が作れ、
それぞれxとyに指定すればクルクルまわる円運動が作れる。

初期位置だと回転してるときにマイナスにも行ってしまうので、
中心点(center)をさらに足して場所を調整する。

JSで回転させたい

const el = document.querySelector('div');
const center = 100;
const radius = 50;

setInterval(() => {
  const t = new Date().getTime() / 500;

  const x = center + (Math.cos(t) * radius);
  const y = center + (Math.sin(t) * radius);

  el.setAttribute('style', `top: ${x}px; left: ${y}px;`)
}, 10);

今回与えている数値は時間を元に作成していて、new Date().getTime()で取得できるのはミリ秒、これを500で割っている。
つまり0.5秒で1度変化する。

See the Pen create circular motion using sin & cos by なりたけいすけ (@narikei) on CodePen.

逆回転させたい

sinとcosを反対にすると、逆回転できる

See the Pen create circular motion using sin & cos (reverse) by なりたけいすけ (@narikei) on CodePen.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What are the problem?