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

Community
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で始まるところ。

それぞれxとyに指定すればクルクルまわる円運動が作れる。

## JSで回転させたい

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

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);
``````

つまり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?