円周上に要素を配置したい、配置はできたが傾いているのでバランスを整えたい

Question

プログラム初心者です。
円周上に要素を配置するページを作成しています。
円周上に要素は配置できたのですが、バランスが悪く傾いているのでそれを直したいです。
（綺麗な５角形になるように）「はじめ」の文字は無視してください！

js
$(function(){
var item_num = $('div.item').length;
var deg = 360.0/item_num;
var red = (deg*Math.PI/180.0);
var circle_r = $("div.item").width() * 1.3;
$('div.item').each(function(i, elem) {
var x = Math.cos(red * i) * circle_r + circle_r;
var y = Math.sin(red * i) * circle_r + circle_r;
$(elem).css('left', x);
$(elem).css('top', y);
});
});

ネットから拾ってきたのは良いものの、初心者でこのjs自体の意味が理解できていません、どこを編集したら位置を直せるか教えてください。

Comments

[babu_babu_baboo]

x には sin を、y には -cos を。そもそも位相が90度ずれた関係なのだから。

Answer 1

以下のような感じでどうでしょうか？「Math.PI/2」は 90 度回転させることを意味しています。

■ 変更箇所

//var x = Math.cos(red * i) * circle_r + circle_r;
//var y = Math.sin(red * i) * circle_r + circle_r;
var x = Math.cos(red * i - Math.PI/2) * circle_r + circle_r;
var y = Math.sin(red * i - Math.PI/2) * circle_r + circle_r;

■ 実行結果
https://jsfiddle.net/cx20/ntocm35x

■ 解説
説明の為、色を付けてみました。
このソースの場合、円が描画される順番は赤丸の位置（３時の短針の位置）から時計回り（「赤」→「緑」→「青」→「黄」→「水色」）の順番に描画されます。
「-Math.PI/2」は、回転の開始位置を反時計回りに90度戻すイメージになります。

＜参考＞
■ 三角関数
https://qiita.com/rakusan/items/2f60f2ae6af208dda40f
■ ループ関数とvertexについて質問
https://teratail.com/questions/371143

Comments

[jjwi]

ご丁寧に説明も加えてくださり、ありがとうございます！
大変助かりました、できました！意味も理解できるよう勉強します。