こんにちは。 今回は、力学モデル (グラフ描画アルゴリズム) – Wikipediaというグラフを描画するための面白いアルゴリズムを見つけたので、 こいつをJavaScript(CoffeeScript)とcanvasで実装してみました。 動作デモ まずはこちらを御覧ください。 5つの丸が、ふわふわ動いてバランス良い配置になると思います。 用語の整理 まず、グラフとは、折れ線グラフや円グラフのようなものではありません。 頂点と辺の集合で構成されている方のグラフです。 グラフ理論 – Wikipedia グラフとは、↑のグラフのことで、 グラフの頂点のことをノード ノードの点と点を繋ぐ辺をエッジと呼びます。 基本的な理論のおさらい 力学モデルのWikiに書いてある通りですが、少し噛み砕いてみます。 まず、ノードの座標決定には **クーロンの法則とフックの法則**という法則が絡んできます。 ど
![jsとcanvasでグラフの描画(力学モデル)を実装した](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbc94947b285d01a4bae9903d5917b7941cb9c62/height=288;version=1;width=512/https%3A%2F%2Fblog.leko.jp%2Fstatic%2F7eb1cf8d830fdff37571497eaba549bf%2F7f4a1%2Ffeatured-image.png)