Processingのテキストをそのままやるだけ④（3次元棒グラフ）

こちらは [ジャンルなしオンラインもくもく会 Advent Calendar 2024] (https://adventar.org/calendars/9975) 16日目の記事になります。

過去4回のアドカレ記事で格闘していた自由課題は無事に提出失敗したのですが...

https://zenn.dev/esusaki/articles/6808998d667e0f

（失敗の様子は上記の記事にあります）

なんと自由課題の後はチーム課題をやらなくてはならない、ということで、チーム課題に向けて引き続きProcessing精進するぞという記事になります。

チーム課題では3次元棒グラフを作成するということなので、3次元棒グラフの作り方について、1-2時間くらいで学べたらうれしいなぁと思っています。

今回の内容はすべて以下のテキストに沿って行います。

https://design-and-programming-inc.gitbook.io/data-visualization-for-beginner/creative-visualization-with-processing/5-dtano#id-4-3no

また10分ごとに進捗をメモしようと思います。

10分経過

さっそく2行目で意味のわからない部分がありChatGPTに聞いています。

特別なライブラリを用いなくてもProcessingの標準機能として3D描画モードがあるんですね。すげー

割と過去イチレベルで自分が何をしているかわからん！みたいなコードが多くて、大粒の汗をかいていますが、とりあえず途中まで写経できました

void setup(){
  size(400, 400, P3D);
}

void draw(){
  background(0);
  translate(width/2, height/2, 0);
  
  pushMatrix();
  translate(-100, 50, 0);
  box(40);
  popMatrix();
}

実行するとこのような感じです

box(40)の部分で大きさ40pxの立方体を配置している、ということだけはわかるけど、コードのほかの部分は、わかるようなわからんような...

20分経過

+ int counter = -300;

void setup(){
  size(400, 400, P3D);
  translate(width/2, height/2, 0);
}

void draw(){
  background(0);
  translate(width/2, height/2, 0);
  
  pushMatrix();
-  translate(-100, 50, 0);
+  translate(-100, -20 , 0 + counter);
  box(40);
  popMatrix();
  
+  pushMatrix();
+  translate(-40, 50 , 0 + counter);
+  box(40);
+  popMatrix();
  
+  pushMatrix();
+  translate(100, 0 , 0 + counter);
+  box(40);
+  popMatrix();
  
+  counter += 1;
  
+  if (counter > 400){
+    counter  = -300;
+  }
}

とりあえず立方体を3つに増やし、counterで時間経過をカウントして、時間経過すると立方体の奥行きの値を変化させて、手前に近づいてくるようにしてみました。

なんかゲームみたいでワクワクするかも！！！！！
あとひと頑張りしたらシンプルなシューティングとか作れそうな気配を感じる！！！！

というわけでProcessingの標準の機能を使った3Dは、20%くらい理解できた気がしてきたので、次はPeasyCamというライブラリを使った3Dデータ可視化をやってみたいと思います

30分経過

int counter = -300;
+ import peasy.*;

+ PeasyCam カメラ;

void setup(){
  size(400, 400, P3D);
  translate(width/2, height/2, 0);
  
+  カメラ = new PeasyCam(this, 400);
}

void draw(){
  background(0);
-  translate(width/2, height/2, 0);
  
  pushMatrix();
  translate(-100, -20 , 0 + counter);
  box(40);
  popMatrix();
  
  pushMatrix();
  translate(-40, 50 , 0 + counter);
  box(40);
  popMatrix();
  
  pushMatrix();
  translate(100, 0 , 0 + counter);
  box(40);
  popMatrix();
  
  counter += 1;
  
  if (counter > 400){
    counter  = -300;
  }
}

ライブラリPeasyCamをインポートし、カメラを追加しました。
さっきのコードに数行加えるだけで、視点を操作できるようになった...すごすぎ......

人口密度の3D棒グラフも描いてみようと思います。

40分経過

一応途中まで出来た（コード丸写ししてるだけなので理解は不十分）なのですが、なんか地図から棒グラフが浮いてる気がするなぁ。どこか写し間違いしてる気がしてきました。あとグラフの線が細い!

50分経過

これで「棒グラフが生え始める位置がなんかおかしい問題」が解決しました。
棒の中央の高さを指定するべきところで、棒の最上部の高さを指定してしまっていた

- translate(x, y, barHeight);
+ translate(x, y, barHeight / 2);
box(2, 2, barHeight);

ちゃんと接地しました。

棒グラフの太さは全体的に太くしました。
テキストのコードでは人口密度に棒グラフの高さを比例させていました。
少しアレンジとして、棒グラフの幅や高さを、人口密度の3乗根に比例させてみました。

     float x = map(経度, 122, 148, 0, 822);
     float y = map(緯度, 24, 46, 850, 0);
     
     float 倍率 = pow(人口密度, 1.0/3.0); //3乗根の計算
     float 高さ = 倍率 * 10;
     
     pushMatrix();
     
     translate(x, y, 高さ / 2);
     box(倍率, 倍率, 高さ);

     popMatrix();

3Dグラフ、基本的に分かる情報としては2Dのグラフと大きく変わらないですが、2Dの地図上のグラフだと人口が集中している地域の円が重なりすぎてグチャッとなってしまってよく分からなくなる、みたいな所が、少し見やすくなっている気がしないでもないです。

まとめ

この作業をしている間にチーム課題のグループLINEに「大体コードできた」という旨の連絡があり、マジかとなっています。一応Pythonでのデータ下処理を少し自分も担ってはいたのですが、Processingを1行も書くことなくチーム課題を終えることになりそうです。 ほんまゴメンやで。

最後までお読みいただき、ありがとうございました！