[Processing]3次元の棒グラフを鳥瞰図的に表示する

Written by uechoco 3 月 02

ProcessingのBlogラインを追ってたら、Processing: The Beginning at JAMES HAYってのがあって、3次元空間にデータを棒グラフで表示して、斜め上から見下ろしている感じのFlashがあったので、これならすぐにつくれるかなっと思って、作りました。

あくまで似せて作りたかった（笑）ので、少し見づらいかもしれないです。3次元の棒グラフはデータの表現方法（視覚化方法）としてはオーソドックスなので是非とも覚えておきたいサンプルじゃないでしょうか。

processing_birdsEye.jpg

PLAIN TEXT
Processing:
  1. int FIELD_X1 = -150; // 地平の左上
  2. int FIELD_Y1 = -150; // 地平の左上
  3. int FIELD_WIDTH = 300; // 地平の幅
  4. int FIELD_HEIGHT = 300; // 地平の高さ
  5. int FIELD_SCALE = 20; // 地平のメモリの幅
  6.  
  7. float DATA_MAX_VALUE = 100; // データの最大値
  8. float DATA_MIN_VALUE = 0;   // データの最小値
  9. int DATA_BLOCK_SIZE = 5; // データブロックの描画サイズ
  10. int DATA_FIX = -12; // データ番号の始まり
  11. int DATA_SIZE = 25; // データ番号の終わり
  12. int DATA_NUM = DATA_SIZE * DATA_SIZE; // データ数
  13. float data[] = new float[DATA_NUM];
  14.  
  16.   size (400, 400, P3D);
  17.   colorMode(HSB, 100);
  18.   background(90);
  19.   frameRate(5);
  20.  
  21.   initData();
  22. }
  23.  
  24. // データのランダム初期化
  25. void initData() {
  26.   for (int i = 0; i <DATA_NUM; ++i) {
  27.     data[i] = random(DATA_MIN_VALUE, DATA_MAX_VALUE);
  28.     if (random(1) <0.6) data[i] = 0; // 6割は0にセット
  29.   }
  30. }
  31.  
  32. // 描画部
  34.   // ライティング
  35.   lights();
  36.   // 背景を塗りつぶし
  37.   background(90);
  38.  
  39.   // カメラワーク
  40.   // cameraPos, targetPos, upVector
  41.   camera(0, 200, 180, 0, 0, 0, 0, 1, 0);
  42.  
  43.   // 地平を描画
  44.   drawHorizon();
  45.  
  46.   // データタワーを描画
  47.   drawData();
  48. }
  49.  
  50. // 地平を描画
  51. void drawHorizon() {
  52.  
  53.   // 平面を描画
  54.   noStroke();
  55.   fill(80);
  56.   rectMode(CORNER);
  57.   rect(FIELD_X1, FIELD_Y1, FIELD_WIDTH, FIELD_HEIGHT);
  58.  
  59.   // 縦線
  60.   stroke(50);
  61.   for (int i = FIELD_X1; i <= FIELD_X1 + FIELD_WIDTH; i += FIELD_SCALE) {
  62.     line(i, FIELD_Y1, 0.3, i, FIELD_Y1 + FIELD_HEIGHT, 0.3);
  63.   }
  64.  
  65.   // 横線
  66.   stroke(70);
  67.   for (int j = FIELD_Y1; j <= FIELD_Y1 + FIELD_HEIGHT; j += FIELD_SCALE) {
  68.     line(FIELD_X1, j, 0.3, FIELD_X1 + FIELD_WIDTH, j, 0.3);
  69.   }
  70. }
  71.  
  72. // データタワーを描画
  73. void drawData() {
  74.   rectMode(CENTER);
  75.   float c;
  76.   for (int i = 0; i <DATA_NUM; ++i) {
  77.     if (data[i] == 0) continue;
  78.     int x = i % DATA_SIZE + DATA_FIX; // ブロック座標
  79.     int y = i / DATA_SIZE + DATA_FIX; // ブロック座標
  80.    
  81.     // 座標変換、描画
  82.     pushMatrix();
  83.     // 高さで色を決定
  84.     c = map(data[i], DATA_MIN_VALUE, DATA_MAX_VALUE, 0, 66);
  85.     stroke(60, c, 90);
  86.     fill(60, c, 100);
  87.     translate(x * DATA_BLOCK_SIZE, y * DATA_BLOCK_SIZE, 0);
  88.     box(DATA_BLOCK_SIZE, DATA_BLOCK_SIZE, data[i]);
  89.     popMatrix();
  90.   }
  91. }
  92.  
  93. // 3D線
  94. void line(float x1, float y1, float z1, float x2, float y2, float z2) {
  95.   beginShape(LINES);
  96.   vertex(x1, y1, z1);
  97.   vertex(x2, y2, z2);
  98.   endShape();
  99. }
  100.  
  102.   save("processing_birdsEye.jpg");
  103. }

Filed Under: processing 
Tags: ,

No Responses to “[Processing]3次元の棒グラフを鳥瞰図的に表示する”

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

Comments RSS rss うえちょこ＠ぼろぐ TrackBack Identifier URI rss うえちょこ＠ぼろぐ

コメントをどうぞ