[Processing]円状隣接グラフを描いてみた

カテゴリ: processing / author: uechoco / 2008年02月07日 12:22:00
この記事を読む時間：7分9秒くらい

さきほどFlickrの

※クリックしてLightboxで拡大
flickr: everyone knows everyone from flickr

http://flickr.com/photos/eskimoblood/2111672366/

の画像をみて、「描きたいっ」と思って、Processingで描いてみました。「Circular Adjacency Graph」。「円状隣接グラフ」って勝手に呼んでいます。プログラム的にそういうことをしているので。全く同じものを作ったわけではないですが、自分の中では同じようなものなので満足しています。

※カーブ率 = 1のグラフ（クリックで別ウィンドウに原寸表示）

processing_CircularAdjacencyGraph.jpg

※カーブ率 = 0.3のグラフ（クリックで別ウィンドウに原寸表示）

processing_CircularAdjacencyGraph2.jpg

PLAIN TEXT
Processing:
  1. size(600, 600);
  2. colorMode(HSB, 100);
  6.  
  7. // 定数定義
  8. int max = 30; // 最大数
  9. int radius = 220; // 半径
  10. int cx = width / 2; // 中心x座標
  11. int cy = height / 2; // 中心y座標
  12. float adjRate = 0.3; // 隣接する確率
  13. float curveRate = 0.3; // カーブ率
  14.  
  15. // 変数定義
  16. Point[] points = new Point[max]; // 円周上の点の集合の定義
  17. int[] hues = new int[max]; // 円周上の点のカラー(色相)
  18. int[] adj = new int[max * max]; // 隣接行列の定義
  19.  
  20. // 円周上に点を配置
  21. for (int i = 0; i <max; i++) {
  22.   float angle = random(360);
  23.   float x = cx + cos(radians(angle)) * radius;
  24.   float y = cy - sin(radians(angle)) * radius;
  25.   points[i] = new Point();
  26.   points[i].setLocation(x, y);
  27.   // 色をランダムに定義
  28.   hues[i] = (int)random(100);
  29. }
  30.  
  31. // 隣接行列を作成
  32. for (int i = 0; i <max; i++) {
  33.   for (int j = 0; j <max; j++) {
  34.     if (i>= j) {
  35.       adj[i * max + j] = 0;
  36.     } else {
  37.       adj[i * max + j] = (random(1) <adjRate ? 1 : 0);
  38.     }
  39.   }
  40. }
  41.  
  42. // 円
  44. stroke(70);
  45. ellipseMode(CENTER_RADIUS);
  46. ellipse(cx, cy, radius, radius);
  47. // 点の配置
  48. for (int i = 0; i <max; i++) {
  50.   stroke(hues[i], 60, 100, 60);
  51.   point(points[i].x, points[i].y);
  52.   // 隣接点を結ぶ
  54.   for (int j = 0; j <max; j++) {
  55.     // 隣接していなければ次へ
  56.     if (adj[i * max + j] == 0) continue;
  57.     // 点を再定義(利便性)
  58.     int x1 = points[i].x;
  59.     int y1 = points[i].y;
  60.     int x2 = points[j].x;
  61.     int y2 = points[j].y;
  62.     // 2点間の距離を求める(2倍にして補間点を増やす)
  63.     int x21 = x2 - x1;
  64.     int y21 = y2 - y1;
  65.     float r = sqrt(x21 * x21 + y21 * y21) * 2;
  66.     for (int k = 0; k <r; k++) {
  67.       // 進行度
  68.       float rate = k / r;
  69.       // 点の色を調整
  70.       stroke(hues[i] + (hues[j] - hues[i]) * rate, 60, 100, 60);
  71.       // まずは2点を直線で結んだときの現在点を求める
  72.       float x = x1 + (x21 * rate);
  73.       float y = y1 + (y21 * rate);
  74.       // 重心の設定をするための比率(値域は0?curveRateまで)
  75.       float cRate = sin(PI * rate) * curveRate;
  76.       // 円の中心と現在点に比率をかけて、描画点を求める
  77.       x = (x + cx * cRate) / (cRate + 1);
  78.       y = (y + cy * cRate) / (cRate + 1);
  79.       point(x, y);
  80.     }
  81.   }
  82. }
  83.  
  84. // 署名
  85. PFont font = loadFont("Impact-18.vlw");
  86. fill(0);
  87. textFont(font, 18);
  88. textAlign(RIGHT);
  89. text("Circular Adjacency Graph\n2008 uechoco", width - 20, height - 40);

円周上の点同士をline()命令を使って直線で結ぶのは簡単なのですが、上のFlickrの画像を見ると、中心に向かってカーブしています。これをどうやって再現するのかが悩みました。最初は円の中心と2点を結ぶ直線を漸近線とみたてて、双曲線を描こうとしたのですが、数式を調べたりそれを実装したりするのが面倒だと思って、即却下。代替案として、直線の個々の点と円の中心との重心をなぞる方法にしました。2点間の中心に近づくほど、円の中心に近づくようにサインカーブを調整しています。またカーブ率を低くすることで、重心を円周側に寄せられるので、なめらかなカーブになります。

いやぁーこんなのまで描けるんですね。楽しさ無限大！


コメントはまだありません »

コメントはまだありません。

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2013 うえちょこ＠ぼろぐ. WP Theme created by Web Top.