Proce55ing サンプル

Processing（検索する人のために Proce55ing とするのがいい、らしい）で、地味なサンプルを作ってみた。
イメージとしては、大規模な計算機環境で動いている処理を可視化するもの。今のところ箱を沢山書いているだけで内容は無い。

感想。簡単に「かっこいい」プログラムが書けるツールとしてなかなか良いなあ。
ひまなときに、TreeMap だとか平安京ビューだとかのより美しい可視化を試したい。Processing くらい描画が簡単だと、いろいろと楽しめそうだ。

// box coord
// sample to draw many boxes. 
// 

int W = 800;
int H = 200;
int D = 100; // size of middle box
int DD = 10; // size of small box
int maxSmallBox = (D/DD)*(D/DD); // max size of small box in middle box

void draw() {
  init_grid();
  
  int totalSmallBox = 0;
  pushMatrix();
    
  for (int i=0; i <= height/D; i++) {
    pushMatrix();
    for (int j=0; j <= width/D; j++) {
//      int n = maxSmallBox;
      int n = int(random(1, maxSmallBox));
      draw_box(n, DD);
      totalSmallBox+= n;
      translate(D, 0);
    }
    popMatrix();  
    translate(0, D);
  }
  popMatrix();
  
}

void setup() {
  size(W,H);
  background(0);
  colorMode(RGB,255,255,255,255);
  frameRate(1);
  init_grid();
}

void init_grid() {
  rect(0,0,width,height);
  fill(255);
  stroke(200);
  for (int i=0; i<= height/D; i++) {
    for (int j=0; j<= width/D; j++) {
        rect(j*D,i*D,D,D);
    }
  }
}

void draw_box(int n, int r) {
  // n: number of small box
  // r: size of middle box
  stroke(200);
  fill(255);

  int xmax, ymax;
  xmax = ceil(sqrt(n));  
  if (xmax * (xmax -1) >= n) {
    ymax = xmax - 1;
  } else {
    ymax = xmax;
  }
  
  // draw small boxes
  int cnt=0;

  for (int j=0; j< ymax; j++) {
    if (cnt == n) break;
    for (int i=0; i< xmax; i++) {
      if (cnt == n) break;
      fill(0, random(255), 0);
      stroke(0);
      rect(i*r, j*r, r, r);
      cnt++;
    }
  }
  
  // draw region includes small boxes
  stroke(0);
  noFill();
  rect(0, 0, xmax * r, ymax * r);
}