こんにちは。
\n今回は、力学モデル (グラフ描画アルゴリズム) – Wikipediaというグラフを描画するための面白いアルゴリズムを見つけたので、
\nこいつをJavaScript(CoffeeScript)とcanvasで実装してみました。
まずはこちらを御覧ください。
\n\n５つの丸が、ふわふわ動いてバランス良い配置になると思います。
\nまず、グラフとは、折れ線グラフや円グラフのようなものではありません。
\n頂点と辺の集合で構成されている方のグラフです。
\n\n\n
グラフとは、↑のグラフのことで、
\nグラフの頂点のことをノード
\nノードの点と点を繋ぐ辺をエッジと呼びます。
力学モデルのWikiに書いてある通りですが、少し噛み砕いてみます。
\nまず、ノードの座標決定には
\n**クーロンの法則とフックの法則**という法則が絡んできます。
どちらの法則も、
\n要はノード同士が引き合う/反発する力は徐々に安定へ収束するというだけです。
この２つの法則を元に各ノード同士に働く力を計算し、
\nその力を元に座標を決定します。
早速実装に移ります。
\nコードはCoffeeScriptで書きます。
まず、ノードに最低限必要な物は、
\nx座標, y座標, 半径, x方向の速度, y方向の速度の５つです。
# 文字とつながりを持った点\nclass Node\n constructor: (@x, @y, @r = 20) ->\n @vx = 0\n @vy = 0\n\n connect: (node) ->\n @connections.push nodeごくシンプル。
\n今回はそれに加えて、
\nということで最終的に以下のような定義になりました。
\n# 文字とつながりを持った点\nclass Node\n @_lastID = 0;\n colorPalette = ['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58']\n\n constructor: (@value, @x, @y, @background, @r = 20) ->\n @id = Node._lastID++\n @connections = []\n @vx = 0\n @vy = 0\n\n idx = ~~(Math.random() * colorPalette.length)\n @background = colorPalette[idx] unless @background\n\n connect: (node) ->\n @connections.push node今回のキモ、力指向グラフです。
\nbalanceメソッドが、このグラフに属する各ノードの位置を計算します。
# 力指向アルゴリズム\nclass ForceDirectedGraph\n # バネ定数: 大きいとノードの間隔が詰まる、クーロン数：大きいとノードの間隔が広がる\n @BOUNCE = 0.1 # バネ定数(BOUNCE < 0.1[推奨])\n @ATTENUATION = 0.8 # 減衰定数(ATTENUATION < 1[必須])\n @COULOMB = 600 # クーロン数\n\n constructor: (@nodes) ->\n\n add: (node) ->\n @nodes.push node\n\n connect: (a, b) ->\n @nodes[a].connect(@nodes[b])\n @nodes[b].connect(@nodes[a])\n\n balance: ->\n for targetNode in @nodes\n continue if targetNode.isFocus\n\n # このノードに作用する力\n fx = 0\n fy = 0\n\n # 自分以外全てのノードから受ける力をクーロンの法則を用いて計算\n for n in @nodes\n continue if targetNode == n\n\n distX = targetNode.x - n.x\n distY = targetNode.y - n.y\n rsq = distX * distX + distY * distY\n\n fx += ForceDirectedGraph.COULOMB * distX / rsq\n fy += ForceDirectedGraph.COULOMB * distY / rsq\n\n # 接続したノードから受けるバネのちからをフックの法則を用いて計算\n for n in targetNode.connections\n distX = n.x - targetNode.x\n distY = n.y - targetNode.y\n\n fx += ForceDirectedGraph.BOUNCE * distX\n fy += ForceDirectedGraph.BOUNCE * distY\n\n # 収束させるため速度を減衰\n targetNode.vx = (targetNode.vx + fx) * ForceDirectedGraph.ATTENUATION\n targetNode.vy = (targetNode.vy + fy) * ForceDirectedGraph.ATTENUATION\n\n # xy座標の決定\n targetNode.x += targetNode.vx\n targetNode.y += targetNode.vyWikiに書いてある擬似コード、ほぼそのままだと思います。
\n今回はcanvasで実装するので、さくっとcanvasのユーティリティを作ります。
\n# canvasのユーティリティ\nclass Canvas\n constructor: (el) ->\n @ctx = el.getContext('2d')\n @width = el.width\n @height = el.height\n @elements = []\n\n # 描画する要素(今回は主にグラフ)を追加する\n add: (element) ->\n @elements.push element\n return @\n\n # キャンバスの状態を保ちつつ操作を行う\n keep: (fn) ->\n @ctx.save()\n @ctx.beginPath()\n fn()\n @ctx.closePath()\n @ctx.restore()\n\n # キャンバスをまっさらにする\n clear: ->\n @ctx.clearRect(0, 0, @width, @height)\n return @\n\n # キャンバスを塗りつぶす\n fill: (bg = '#000') ->\n @keep =>\n @ctx.fillStyle = bg\n @ctx.fillRect(0, 0, @width, @height)\n return @\n\n # 円の描画\n circle: (x, y, r, bg = '#000') ->\n @keep =>\n @ctx.fillStyle = bg\n @ctx.arc(x, y, r, 0, 2 * Math.PI)\n @ctx.fill()\n\n # 線分の描画\n line: (fromX, fromY, toX, toY, color = '#444', width = 2) ->\n @keep =>\n @ctx.strokeStyle = color\n @ctx.strokeWidth = width\n\n @ctx.moveTo(fromX, fromY)\n @ctx.lineTo(toX, toY)\n @ctx.stroke()\n\n # テキストを描画\n text: (txt, x, y, color = 'white', font = '14px bold') ->\n @keep =>\n @ctx.font = font\n @ctx.textAlign = 'center'\n @ctx.textBaseline = 'middle'\n @ctx.fillStyle = color\n @ctx.fillText(txt, x, y)\n\n # 追加した要素を描画\n draw: ->\n for el in @elements\n if el.constructor == ForceDirectedGraph\n @_drawGraph(el)\n\n # グラフを描画\n _drawGraph: (graph) ->\n connected = []\n for i in [0...graph.nodes.length]\n connected[i] = []\n\n for node, i in graph.nodes\n for n, j in node.connections\n continue if connected[i][j] || connected[j][i]\n\n connected[i][j] = true\n connected[j][i] = true\n @line(node.x, node.y, n.x, n.y)\n\n for node in graph.nodes\n @circle(node.x, node.y, node.r, node.background)\n @text(node.value, node.x, node.y)_drawGraph()では、
ということを行っています。
\n↑の３つだけではクラス定義でしかないので、初期化します。
\n最初の方はあまり意味がなく、canvasのサイズ調整をしているだけです。
\nいくつかノードを生成して、
\nそのノードのインデックスを渡して接続します。
そして、そのグラフのインスタンスをcanvasにadd（↑のCanvasクラスを参照）して、
\n50ミリ秒ごとに再描画をかけています。
# init\ndo ($ = jQuery) ->\n random = (max) ->\n ~~(Math.random() * max)\n\n WIN_W = window.innerWidth\n WIN_H = window.innerHeight\n\n $canvas = $('#canvas')\n\n # canvasの初期化\n $canvas.attr('width': WIN_W, 'height': WIN_H)\n\n canvas = new Canvas($canvas[0])\n center = x: canvas.width / 2, y: canvas.height / 2\n\n # ノードを生成\n nodes = [\n new Node(\"A\", center.x - 100 + random(200), center.y - 100 + random(200)),\n new Node(\"B\", center.x - 100 + random(200), center.y - 100 + random(200)),\n new Node(\"C\", center.x - 100 + random(200), center.y - 100 + random(200)),\n new Node(\"D\", center.x - 100 + random(200), center.y - 100 + random(200)),\n new Node(\"E\", center.x - 100 + random(200), center.y - 100 + random(200))\n ]\n\n # グラフを生成\n graph = new ForceDirectedGraph(nodes)\n\n # ノード同士を接続\n graph.connect(0, 4)\n graph.connect(0, 1)\n graph.connect(1, 4)\n graph.connect(1, 2)\n graph.connect(2, 4)\n graph.connect(2, 3)\n graph.connect(3, 4)\n graph.connect(3, 0)\n\n canvas.add graph\n\n # グラフを描画\n setInterval ->\n graph.balance()\n canvas.clear().fill('white')\n canvas.draw()\n , 50というコードになっております。 コードベースでの解説となってしまいましたが、これで説明は以上です。
\njsdo.itでも公開していますが、
\n一応zipのダウンロードリンクも貼っておきます。
ダウンロード
\n