見た目はとっても地味だけど…… WebGL を用いたボロノイ図生成デモが面白い！ - WebGL 総本山
ちょっと地味だけど面白いボロノイ図 今回ご紹介するのは、ボロノイ図(Voronoi Diagrams)を描画する WebGL のデモです。 恐らく、結構古いものなのかなと思いますが、シンプルな実装なのであんまり古臭いとかそういう感じはしません。かなり……シンプルすぎるくらいシンプルではありますけども。 いろいろとインタラクティブに操作できるのでなかなか面白いです。 派手さはゼロ！ でもなかなか楽しい！ まず最初に断っておきますが、このデモはあまり WebGL のメリットを活用しているとは言えないデモです。 シェーダを見る限り、単純に描画にしか WebGL を利用していないので、実際の作図計算には javascript が動いて CPU で処理しているだけです。 これはあくまでも想像ですが、Canvas2D で同じようなことをやったとしても、よほど点の数が増えない限り体感速度にそれほど差は出
MAPCOM WORLD [PC-MAPPING ヒント集]
■ボロノイ図について 平面上に複数のポイントが配置されている時、その平面内の点を、どの点に最も近いかによって分割してできる図を「ボロノイ図」と言います。 配置された点を「母点」と呼び、一般的なボロノイ図では、母点数とボロノイ領域数は一致します。 ボロノイ領域の境目の線を「ボロノイ境界」と呼び(ボロノイ境界は二つの母点の垂直二等分線の一部)、また、ボロノイ境界の交点を「ボロノイ点」と呼びます。 任意の三母点の外接円を描いた時、その円の内部に他の母点が存在しない場合、その円の中心がボロノイ点となります。 具体的な使用例としては、例えば、以下のようなものがあります。 最も近いPHSの基地局を探す ある施設における最適配置位置の決定をする ■操作方法 母点となるポイントを持つレイヤーをアクティブにし、[ツール]-[空間統計解析]-[ボロノイ分割図生成]を実行します。 [ボロノイ図の生成]ダイアログ
![MAPCOM WORLD [PC-MAPPING ヒント集]](https://cdn-ak-scissors.b.st-hatena.com/image/square/34d381aea8e1b9dc1ffc9d9e5f226b7dc5ba4ec1/height=288;version=1;width=512/https%3A%2F%2Fwww.mapcom.co.jp%2Fsupport%2Fhint%2Fvector%2Fgif%2F61-3.gif)
株式会社パスコ
では、実際にどのようにエリアを分割しているのか、その手法を具体的に見てみましょう。 まず、図②を点どうしを線で結びます（図③）。ここで出来た三角形の各辺の垂直ニ等分線をつなぎます。（図④）最初に引いた線を消すと、ボロノイ図形のできあがりです（図⑤）。 このようにしてできるボロノイ（ティーセン）分割は、環境調査の分野でも良く利用されます。例えば、ある河川の流域の降雨量などを調べる際に、２、３地点の降雨量（点雨量）から、流域内の降雨量（面雨量）を求めたりする際に利用されます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルな実装のボロノイ図 - jsdo.it - Share JavaScript, HTML5 and CSS
Experience the Power of AI with Windows 11 OS, Computers, & Apps | Microsoft Windows
