Upgrade to Pro — share decks privately, control downloads, hide ads and more …

せいほうけい育成日記

 せいほうけい育成日記

D3.js で正多角形を描きました
https://github.com/nekonenene/Square_grows_up

ハトネコエ

March 19, 2016
Tweet

More Decks by ハトネコエ

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ ハトネコエ • Twitter: @nekonenene • Github : nekonenene •

    Job : none • 無職、曲作る、ミクさんかわいい • 次やりたいもの : Unity 今日の発表物のリポジトリ↓ https://github.com/nekonenene/Square_grows_up
  2. 中心を点 c1 (cx1 , cy1 ) とする半径 r1 の円を用意する。 この中心から直線を引いて、円と交わった点が座標となっていく。

    最初の直線は、x軸を水平としたとき θf 度とする。 その次の直線は 正n角形を作るとする。頂点の角度 θn は、 度となるといった具合である。 この θf は、θn / 2 とすると、底が x軸と水平な、見た目の良い図形になる。 さて、実際に図解したほうがわかりやすいので、 以降、正五角形(つまり n=5)を基に考えていく。 詳説 1/8
  3. c1 : 円の中心点 r1 : 円の半径 θf : 最初の角度 p1

    〜 p5 : 交点であり、  正五角形の各頂点 p'1 : p1 と p2 の中間点 q1 〜 q5 : 次に作られる  正五角形の各頂点 c2 : その正五角形を  作るための円の中心点 詳説 2/8
  4. では、まず p1 〜 p5 の座標を計算する。 中心点 (0, 0) で半径 1

    の円に、 中心点からx軸を水平線とする θ 度の直線を引いたときの 円との交点 (x, y) は x = cosθ, y = sinθ で表せることを利用する。 今回は円の半径は r1 で、p1 のために引く直線の角度は θf だから、 詳説 3/8
  5. 中心点は (0, 0) でなく c1 (cx1 , cy1 ) だが、その差はあとで各座標に

    プラスすればいいので、ひとまず中心点は (0, 0) としたまま続きを考える。 p1 〜 p5 の座標が求められたので、親となる正五角形の座標はわかった。 次は、子となる、一辺の長さが親の半分である正五角形を考える。 その正五角形を作るには、少なくとも 基準となる円の中心点の座標、円の半径の長さ、 最初の角度 θf を知りたい。 詳説 4/8
  6. 先ほどの図を見つつ、(c1 , p1 , p2 ) を結ぶ三角形と (c2 , q4

    , q3 ) を結ぶ三角形を比べてみてほしい。 これはすべての角度が同じだから 合同の関係にある。 線分q3 q4 は線分p2 p1 の半分の長さだから、 線分c2 q4 は線分c1 p1 の半分の長さ。 よって r2 = r1 ÷ 2 そして、線分c1 c2 は線分c1 p1 の 倍の長さ。 c1 の座標を (0, 0) とすると、 c2 の座標は、p1 , p2 の中間点 p'1 のxy座標を それぞれ 倍すればよいだけ。 詳説 5/8
  7. 最初の角度 θf については図を見るとわかりやすい。 (c1 , p1 , p2 ) を結ぶ三角形は二等辺三角形で

    (c1 , p1 , p'1 ) はそれを二等分する三角形だから、 求める θf は と求められる。 (※わかりにくいので、最初の θf を θf1  今回求める θf を θf2 とした) 詳説 6/8
  8. 以上で、新しい子の正五角形を作るための計算式は得られた。 これは正五角形で中心点 c1 (cx1 , cy1 ) を (0, 0)

    とおいた時のものなので、 正n角形について一般化させると次のようになる。 詳説 7/8
  9. 子の正n角形の頂点 q1 〜 qn の座標を求めるのに必要な情報 (※なお、cos, sin の中の単位は「度」なので、必要であれば 2π で割って

    radian に変換する) あとは関数呼び出しを利用すれば、どんどん子供の正多角形が作れる! 詳説 8/8
  10. ༨ஊ 苦労したこと • ウェブサイト作るの久しぶりだったから難しい。
 HTML も CSS も書きたくない! • 当初思っていたより複雑になってコードが難解に。


    TypeScript を使うべきでした・・・ • SVG が大きくなっても IE 以外はスクロールバーが
 出てくれないから、対応したかったけど中途半端。
 SVG 描画に関しては IE が神ブラウザでした(意外!) • スライドのために図を描くのたいへん • スライドのために数式を描くのたいへん
  11. ༨ஊ お世話になったツール • D3.js : Web で SVG を簡単に描くためのライブラリ •

    gulp : タスクランナー、強い • haml : jadeでも slimでもなく hamlの見た目が好き • SCSS : もう君のいない世界で生きていけない • TeXclip : 数式画像を生成してくれる Webサービス • Affinity Designer : このスライドの図を描くのに使用。
 買い切りのイラレみたいなものです、おすすめ(Mac専用) • GitHub : GitHub Pages の機能を初めて使いましたが
 超簡単でした。すてき