せいほうけい育成日記

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

Transcript

1. ϋτωίΤ せいほうけい育成日記 @nekonenene
2. ࣗݾ঺հ ハトネコエ • Twitter: @nekonenene • Github : nekonenene • Job : none • 無職、曲作る、ミクさんかわいい • 次やりたいもの : Unity 今日の発表物のリポジトリ↓ https://github.com/nekonenene/Square_grows_up
3. ͖͔͚ͬ 中学生のときの先輩が ヒマな時にやっていた遊び
4. ͖͔͚ͬ 正方形の周りに半分の大きさの 正方形をくっつける。 これをシャーペンで がしがし書いてた。 こんなあそび
5. プログラミングでやったら 正確にきれいに大規模なものが?! ϓϩάϥϜ ͠Α͏
6. ϓϩάϥϜ͠Α͏ (さっきも書きましたが)リポジトリ↓ https://github.com/nekonenene/Square_grows_up できました！ ここから見られます↓ http://nekonenene.github.io/Square_grows_up
7. けっこう高校数学でした。 久しぶりに正弦定理とか使いました Ͳ͏ ࣮૷͔ͨ͠
8. Ͳ͏࣮૷͔ͨ͠ 前提： PATHで(SVGで)描きたかった。 よって、図形を作るためには順番に結ぶための座標が必要 ✔ ✗ [ [10, 10], [10, 20], [20, 20], [20, 10] ] [ [10, 10], [10, 20], [20, 10], [20, 20] ]
9. ਖ਼ଟ֯ܗΛඳ͘ 108° １本の直線を初めに引き、 頂点角度だけ回転させた同じ長さの線を描く。 それを繰り返せば正多角形はできるので、 これを利用して座標群を求める方法 アプローチA しかし…… 辺の長さを基準に描くために、頂点数の多い正多角形ほど 出来上がる図形が大きくなり、描画領域を超えてしまう （x, y 座標で言うマイナス部分は、ブラウザで描画されない）
10. ਖ਼ଟ֯ܗΛඳ͘ アプローチB 正多角形の作り方を思い出してみる。 正n角形は円を中心で n等分して、 円とぶつかった座標をつないでいく。 この基準の円より大きい図形はできないから 図形の大きさを限定できる！
11. ಺ଆͷ੒௕Λඳ͘ こっちはカンタン 作った正多角形の各頂点の中間点を結ぶと、 ひとまわり小さい正多角形ができる
12. ֎ଆͷ੒௕Λඳ͘ こっちはムズカシイ まじめに徹夜してスライド作りましたが、 これを説明するとLTの時間中に終わりませんので、 ご興味のある方は GitHub のリポジトリにあるリンクから飛んで ご覧くださいますようお願いいたします。 @nekonenene
13. 中心を点 c1 (cx1 , cy1 ) とする半径 r1 の円を用意する。 この中心から直線を引いて、円と交わった点が座標となっていく。 最初の直線は、x軸を水平としたとき θf 度とする。 その次の直線は 正n角形を作るとする。頂点の角度 θn は、 度となるといった具合である。 この θf は、θn / 2 とすると、底が x軸と水平な、見た目の良い図形になる。 さて、実際に図解したほうがわかりやすいので、 以降、正五角形（つまり n=5）を基に考えていく。 詳説 1/8
14. c1 : 円の中心点 r1 : 円の半径 θf : 最初の角度 p1 〜 p5 : 交点であり、 　正五角形の各頂点 p'1 : p1 と p2 の中間点 q1 〜 q5 : 次に作られる 　正五角形の各頂点 c2 : その正五角形を 　作るための円の中心点 詳説 2/8
15. では、まず p1 〜 p5 の座標を計算する。 中心点 (0, 0) で半径 1 の円に、 中心点からx軸を水平線とする θ 度の直線を引いたときの 円との交点 (x, y) は x = cosθ, y = sinθ で表せることを利用する。 今回は円の半径は r1 で、p1 のために引く直線の角度は θf だから、 詳説 3/8
16. 中心点は (0, 0) でなく c1 (cx1 , cy1 ) だが、その差はあとで各座標に プラスすればいいので、ひとまず中心点は (0, 0) としたまま続きを考える。 p1 〜 p5 の座標が求められたので、親となる正五角形の座標はわかった。 次は、子となる、一辺の長さが親の半分である正五角形を考える。 その正五角形を作るには、少なくとも 基準となる円の中心点の座標、円の半径の長さ、 最初の角度 θf を知りたい。 詳説 4/8
17. 先ほどの図を見つつ、(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
18. 最初の角度 θf については図を見るとわかりやすい。 (c1 , p1 , p2 ) を結ぶ三角形は二等辺三角形で (c1 , p1 , p'1 ) はそれを二等分する三角形だから、 求める θf は と求められる。 （※わかりにくいので、最初の θf を θf1 　今回求める θf を θf2 とした） 詳説 6/8
19. 以上で、新しい子の正五角形を作るための計算式は得られた。 これは正五角形で中心点 c1 (cx1 , cy1 ) を (0, 0) とおいた時のものなので、 正n角形について一般化させると次のようになる。 詳説 7/8
20. 子の正n角形の頂点 q1 〜 qn の座標を求めるのに必要な情報 （※なお、cos, sin の中の単位は「度」なので、必要であれば 2π で割って radian に変換する） あとは関数呼び出しを利用すれば、どんどん子供の正多角形が作れる！ 詳説 8/8
21. ·ͱΊ 図形ってかわいい！ 子育てたのしい！
22. ༨ஊ 苦労したこと • ウェブサイト作るの久しぶりだったから難しい。
 HTML も CSS も書きたくない！ • 当初思っていたより複雑になってコードが難解に。
 TypeScript を使うべきでした・・・ • SVG が大きくなっても IE 以外はスクロールバーが
 出てくれないから、対応したかったけど中途半端。
 SVG 描画に関しては IE が神ブラウザでした（意外！） • スライドのために図を描くのたいへん • スライドのために数式を描くのたいへん
23. ༨ஊ お世話になったツール • D3.js : Web で SVG を簡単に描くためのライブラリ • gulp : タスクランナー、強い • haml : jadeでも slimでもなく hamlの見た目が好き • SCSS : もう君のいない世界で生きていけない • TeXclip : 数式画像を生成してくれる Webサービス • Affinity Designer : このスライドの図を描くのに使用。
 買い切りのイラレみたいなものです、おすすめ（Mac専用） • GitHub : GitHub Pages の機能を初めて使いましたが
 超簡単でした。すてき