Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした