円周上に点を配置

3年前を思い出しながら、Sassで円周上に点を配置してみる。

• 円周上に点を配置 | JSFiddle

まずは関数定義。「Trigonometry In Sass | Unindented」に書かれているコードを書き写した。関数は全部で7つある（けど tan() は使ってないな）。

• pow()
• fact()
• pi()
• rad()
• sin()
• cos()
• tan()

その下のコードで肝になるのは以下の部分。

li {
  $r: 40;

  @for $t from 1 through 100 {
    &:nth-child(#{$t}) {
      // 円周上に点を配置
      $angle: (360 / 100) * (pi() / 180) * $t;
      $x: $r * cos($angle) + vmin;
      $y: $r * sin($angle) + vmin;
      transform: translate($x, $y);
    }
  }
}

1. 円の半径を40と決めて、
2. $angle: (360 / 100) * (pi() / 180) * $t で角度を割り出し、
3. この角度を使って $x: $r * cos($angle) + vmin でX座標、$y: $r * sin($angle) + vmin でY座標を割り出し、
4. 最後に transform: translate($x, $y) で実際に点を配置

これでは面白くないと思って、点に色を付けた。

• 円周上に点を配置（点ごとに色を変える） | JSFiddle

うーん、もうちょい遊べそう。今度はアニメーションさせてみる。

参考

いくつか参考にした記事がある。

• 点を配置する方法 ... SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
• 三角関数を使うためのコード ... Trigonometry In Sass | Unindented
• 三角関数の概念 ... WebGL開発に役立つ重要な三角関数の数式・概念まとめ (Three.js編) - ICS MEDIA

今回は使わなかったけど、今後使ってみたいと思うものもあった。

• MathSass · terkel.jp