円周上の座標を計算して 要素を配置する

    Math.cos( θdadian )        ある角度 θのときの x座標 を示す
    Math.sin( θdadian )        ある角度 θのときの Y座標 を示す

円周上の座標は上の関数を使うことで計算できる

角度が20度の時の x座標 => leftの値 , Y座標 => topの値
のようにcssで指定することで 円周上に要素を配置できる

このとき引数には角度をradianという単位で指定するので
radianが理解できないとよくわからない

ラジアンを理解する

    90deg === 0.5radian
    180deg === 1radian
    270deg === 1.5radian
    360deg === 2radian

半径r = 1 を基準にした時の円の 円周 の長さと角度を関連づけている
別の言い方をすると 円周の長さを 2つのr で切り取った長さを rの長さとの比率で表すもの

円周は 直径2r * π なので,ラジアンの基準になる円の円周は 2πとなる

    360degの時の円周　=== 2π   ===   360degの時のradian 2π/r === 2π radian

半径rは1なので 円周2πと同じ

円周とradiangが関連づいているのがわかる

なので 360/2 deg === 2π/2 となり

180 degの時に　1 radian　となる

比率の話なので、実際の円が大きくても小さくても

この関係は同じ

deg を radian に変換する

    n radian === Math.PI / 180 * 角度n

radianを考える上で πは 半円の円周を示す

これを180分割する( 1度にたいする円周の長さに変換する )

この円周の長さと半径rの比率が radian で

それを満たす角度θを示すことになる

要素を取得して、それぞれを円周上に配置する

    var l = $('elements').length;
    var theta = 360/l;
    var i = 0;


        $('elements').each(function(){

            $(this).css({

                position:"absolute",
                left:Math.cos( Math.PI / 180 * (theta * i) ),
                top:Math.sin( Math.PI / 180 * (theta * i) )

            });//css

            i++;

        });//each




要素の数を取得して、theta を自動で計算する
要素それぞれに対して 角度に thetaづつ足していったものを 設定する




例えば要素が10個あったとすると 360/10 で　36度づつ円を分割して
その円周上の座標を取得すればいい

つまり theta を 0からスタートして 36degづつ足していけばいい

ただし radian　に変換するので Math.PI / 180 * 36 が 36degとなる

あとは36づつ増えていくので,　考え方としては

    for (i=0; i>10; i++){

        //36 * 0 === 0 からスタートして均等に角度を計算する

            Math.PI / 180 * (36 * i)

    }

となる

参考サイト

東大生が教えるヴィジュアル数学
http://www24.atpages.jp/venvenkazuya/math1/trigonometric_ratio1.php
https://web.archive.org/web/20170228032130/http://www24.atpages.jp/venvenkazuya/