前回の続きで、 DELAUNAY（ドロネー）のサイトの背景図形がどのように描かれているのかを見ていきたい。
前回の調査で、/js/top_canvas.jsにこの部分の実体が書かれていることが分かったので、そこを詳しく見てみた。
基本的には、Canvas、CreateJSを利用して、たくさんの三角形をparticlesとして画面を埋め尽くすように描画している。
このparticlesに対して、ロード時やスクロール時のアニメーションを、jQuery、CreateJSあたりで付けているという感じ。
問題の三角形での埋め尽くしパターンだが、調べていったところ「ドロネー三角形分割」という計算幾何学のアルゴリズムとしてよく知られたものだということが分かった。会社名はここから来ていたのかと納得。
ドロネー三角形分割はランダムな点の集合をうまく結んで、三角形の集合を作るアルゴリズムであり、一方、点同士の垂直二等分線で構成される図形が「ボロノイ図」である。ボロノイ図は知っていたが、ドロネー三角形分割の方は知らなかった。ドロネーとボロノイの関係は双対というらしい。
で、ドロネー図を描画するアルゴリズムについてはコードを読むだけではよく分からないが、いろいろな方が解説やソースコードを公開してくれている。
- ドロネー三角形分割を自前で実装してみる – Qiita
- Tercel::Diary: ProcessingでDelaunay分割（実装篇)
- Tercel::Diary: ProcessingでDelaunay分割（解説篇）
- 高速なドロネー三角形分割 – @hadashiA
これらの記事を参考に、一度P5.jsで実装してみたい。
particlesを動かす部分についても別の機会に確認する予定。
