Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
せいほうけい育成日記
Search
ハトネコエ
March 19, 2016
Programming
0
6.6k
せいほうけい育成日記
D3.js で正多角形を描きました
https://github.com/nekonenene/Square_grows_up
ハトネコエ
March 19, 2016
Tweet
Share
More Decks by ハトネコエ
See All by ハトネコエ
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
4
2.7k
今年こそ知るべきセキュリティー入門 / Security Basics 2025
nekonenene
0
51
Godot 4.3 と学ぶインタラクティブミュージック / Interactive Music Basics with Godot 4.3
nekonenene
0
140
Developer Consoleを使い倒そう / Use Web Browser DevTools
nekonenene
0
42
まだまだマイナー?! 未踏事業について教えます / Introduction of Mitou Project
nekonenene
1
130
Docker for Windows/macOS
nekonenene
0
30
技術的負債を防ぐには / What is the Technical Debt
nekonenene
0
330
画像処理の基礎の基礎 / Ultra Basic of Image Processing
nekonenene
0
49
伝わる文章を書こう講座 / Write the Kind Japanese Message
nekonenene
2
150
Other Decks in Programming
See All in Programming
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
760
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
740
VS Code Update for GitHub Copilot
74th
2
630
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
650
GraphRAGの仕組みまるわかり
tosuri13
8
530
LINEヤフー データグループ紹介
lycorp_recruit_jp
1
2.4k
Goで作る、開発・CI環境
sin392
0
230
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
4.8k
ニーリーにおけるプロダクトエンジニア
nealle
0
800
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
Six Lessons from altMBA
skipperchong
28
3.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Adaptive Systems
keathley
43
2.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Transcript
ϋτωίΤ せいほうけい育成日記 @nekonenene
ࣗݾհ ハトネコエ • Twitter: @nekonenene • Github : nekonenene •
Job : none • 無職、曲作る、ミクさんかわいい • 次やりたいもの : Unity 今日の発表物のリポジトリ↓ https://github.com/nekonenene/Square_grows_up
͖͔͚ͬ 中学生のときの先輩が ヒマな時にやっていた遊び
͖͔͚ͬ 正方形の周りに半分の大きさの 正方形をくっつける。 これをシャーペンで がしがし書いてた。 こんなあそび
プログラミングでやったら 正確にきれいに大規模なものが?! ϓϩάϥϜ ͠Α͏
ϓϩάϥϜ͠Α͏ (さっきも書きましたが)リポジトリ↓ https://github.com/nekonenene/Square_grows_up できました! ここから見られます↓ http://nekonenene.github.io/Square_grows_up
けっこう高校数学でした。 久しぶりに正弦定理とか使いました Ͳ͏ ࣮͔ͨ͠
Ͳ͏࣮͔ͨ͠ 前提: PATHで(SVGで)描きたかった。 よって、図形を作るためには順番に結ぶための座標が必要 ✔ ✗ [ [10, 10], [10,
20], [20, 20], [20, 10] ] [ [10, 10], [10, 20], [20, 10], [20, 20] ]
ਖ਼ଟ֯ܗΛඳ͘ 108° 1本の直線を初めに引き、 頂点角度だけ回転させた同じ長さの線を描く。 それを繰り返せば正多角形はできるので、 これを利用して座標群を求める方法 アプローチA しかし…… 辺の長さを基準に描くために、頂点数の多い正多角形ほど 出来上がる図形が大きくなり、描画領域を超えてしまう
(x, y 座標で言うマイナス部分は、ブラウザで描画されない)
ਖ਼ଟ֯ܗΛඳ͘ アプローチB 正多角形の作り方を思い出してみる。 正n角形は円を中心で n等分して、 円とぶつかった座標をつないでいく。 この基準の円より大きい図形はできないから 図形の大きさを限定できる!
ଆͷΛඳ͘ こっちはカンタン 作った正多角形の各頂点の中間点を結ぶと、 ひとまわり小さい正多角形ができる
֎ଆͷΛඳ͘ こっちはムズカシイ まじめに徹夜してスライド作りましたが、 これを説明するとLTの時間中に終わりませんので、 ご興味のある方は GitHub のリポジトリにあるリンクから飛んで ご覧くださいますようお願いいたします。 @nekonenene
中心を点 c1 (cx1 , cy1 ) とする半径 r1 の円を用意する。 この中心から直線を引いて、円と交わった点が座標となっていく。
最初の直線は、x軸を水平としたとき θf 度とする。 その次の直線は 正n角形を作るとする。頂点の角度 θn は、 度となるといった具合である。 この θf は、θn / 2 とすると、底が x軸と水平な、見た目の良い図形になる。 さて、実際に図解したほうがわかりやすいので、 以降、正五角形(つまり n=5)を基に考えていく。 詳説 1/8
c1 : 円の中心点 r1 : 円の半径 θf : 最初の角度 p1
〜 p5 : 交点であり、 正五角形の各頂点 p'1 : p1 と p2 の中間点 q1 〜 q5 : 次に作られる 正五角形の各頂点 c2 : その正五角形を 作るための円の中心点 詳説 2/8
では、まず p1 〜 p5 の座標を計算する。 中心点 (0, 0) で半径 1
の円に、 中心点からx軸を水平線とする θ 度の直線を引いたときの 円との交点 (x, y) は x = cosθ, y = sinθ で表せることを利用する。 今回は円の半径は r1 で、p1 のために引く直線の角度は θf だから、 詳説 3/8
中心点は (0, 0) でなく c1 (cx1 , cy1 ) だが、その差はあとで各座標に
プラスすればいいので、ひとまず中心点は (0, 0) としたまま続きを考える。 p1 〜 p5 の座標が求められたので、親となる正五角形の座標はわかった。 次は、子となる、一辺の長さが親の半分である正五角形を考える。 その正五角形を作るには、少なくとも 基準となる円の中心点の座標、円の半径の長さ、 最初の角度 θf を知りたい。 詳説 4/8
先ほどの図を見つつ、(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
最初の角度 θf については図を見るとわかりやすい。 (c1 , p1 , p2 ) を結ぶ三角形は二等辺三角形で
(c1 , p1 , p'1 ) はそれを二等分する三角形だから、 求める θf は と求められる。 (※わかりにくいので、最初の θf を θf1 今回求める θf を θf2 とした) 詳説 6/8
以上で、新しい子の正五角形を作るための計算式は得られた。 これは正五角形で中心点 c1 (cx1 , cy1 ) を (0, 0)
とおいた時のものなので、 正n角形について一般化させると次のようになる。 詳説 7/8
子の正n角形の頂点 q1 〜 qn の座標を求めるのに必要な情報 (※なお、cos, sin の中の単位は「度」なので、必要であれば 2π で割って
radian に変換する) あとは関数呼び出しを利用すれば、どんどん子供の正多角形が作れる! 詳説 8/8
·ͱΊ 図形ってかわいい! 子育てたのしい!
༨ஊ 苦労したこと • ウェブサイト作るの久しぶりだったから難しい。 HTML も CSS も書きたくない! • 当初思っていたより複雑になってコードが難解に。
TypeScript を使うべきでした・・・ • SVG が大きくなっても IE 以外はスクロールバーが 出てくれないから、対応したかったけど中途半端。 SVG 描画に関しては IE が神ブラウザでした(意外!) • スライドのために図を描くのたいへん • スライドのために数式を描くのたいへん
༨ஊ お世話になったツール • D3.js : Web で SVG を簡単に描くためのライブラリ •
gulp : タスクランナー、強い • haml : jadeでも slimでもなく hamlの見た目が好き • SCSS : もう君のいない世界で生きていけない • TeXclip : 数式画像を生成してくれる Webサービス • Affinity Designer : このスライドの図を描くのに使用。 買い切りのイラレみたいなものです、おすすめ(Mac専用) • GitHub : GitHub Pages の機能を初めて使いましたが 超簡単でした。すてき