Processingのテキストをそのままやるだけ③（GUI挫折編）
こちらはジャンルなしオンラインもくもく会 Advent Calendar 2024 8日目の記事になります。
最近大学の授業でProcessingというグラフィックプログラミング言語？を使っています。なんと1日後までに自由課題を出さないといけないのですが、まだProcessingが全然わからなくてまずいので、1日後までに完全に理解したいと思っています。
もくもく会の管理人のuaaaaaaaaさんに心配していただいたように、自由課題の締め切りまでにProcessingの完全理解が間に合わない説がかなり濃厚であり、たぶんこれまで出てきた部分を組み合わせて出来る範囲でクオリティ低めで提出する感じになりそうです。ぼーっと授業を受けていて何も理解していなかった過去の自分、もっとちゃんとやれ（泣）
前回の記事は以下になります。
今回は以下のテキストを参考にしつつ、「スライダーでデータの年を操作し、時間変化を見る」ところをゴールに作業しようと思います。
（この章は特にボリュームが大きくコードも長いため、いったんこの機能だけ取り組もうと思います。）
10分経過
まずは世界地図の画像を表示させるために、以下のコードを実行しようとしたら、WEBP画像ファイルは読み込めないようでエラーがでてしまった...。
PImage 世界地図の画像;
Table 表;
void setup(){
size(1080, 540);
世界地図の画像 = loadImage("world_map.webp");
表 = loadTable("population-growth.csv");
}
void draw(){
image(世界地図の画像, 0, 0);
}
- 世界地図の画像 = loadImage("world_map.webp");
+ 世界地図の画像 = loadImage("world_map_v2.png");
PNG形式に変換してから読み込むとうまくいきました。
20分経過
とりあえず2020年の都市ごとの人口サイズを表示してみたら、明らかに大バグりした結果がでてきてしまいました。
お手本コードとよく見比べてみたら、Latitude=緯度、Longitude=経度なのに逆にしていたせいで、おかしなことになっていました。この基本的なミスを実は何回もやってしまっている...（どっちがどっちか一生覚えられない）
- float 緯度 = 表.getRow(i).getFloat("Lon");
- float 経度 = 表.getRow(i).getFloat("Lat");
+ float 緯度 = 表.getRow(i).getFloat("Lat");
+ float 経度 = 表.getRow(i).getFloat("Lon");
30分経過
少し優しい感じにしたくて、緑にしてみました。植物？
ProcessingでスライダーなどのGUIを扱うためにはControlP5というライブラリを使用します。
わけもわからず、テキストを参考にしつつスライダーを追加しようとしているのですが、ControlP5オブジェクト（←これが何なのかもよくわかっていない）を初期化するときにエラーが起きてしまいます。
+ import controlP5.*;
+ ControlP5 CP5オブジェクト;
+ Slider スライダー;
PImage 世界地図の画像;
Table 表;
int 行数;
void setup(){
size(1080, 540);
世界地図の画像 = loadImage("world_map_v2.png");
image(世界地図の画像, 0, 0);
表 = loadTable("population-growth.csv", "header");
行数 = 表.getRowCount();
noStroke();
fill(100, 255, 100, 100);
for (int i = 0; i < 行数; i++){
float 緯度 = 表.getRow(i).getFloat("Lat");
float 経度 = 表.getRow(i).getFloat("Lon");
int 人口2020 = 表.getRow(i).getInt("2020");
float x = map(経度, -180, 180, 0, width);
float y = map(緯度, -90, 90, height, 0);
float 円の大きさ = sqrt(人口2020 * 0.05);
ellipse(x, y, 円の大きさ, 円の大きさ);
}
+ CP5オブジェクト = new ControlP5(this); //この行でエラー
}
void draw(){
}
エラー文
ProcessingでのGUI操作については、授業で教わったときに少し触れたのですが、そのときにも同じようなエラーが出て苦しんだ記憶があります。（でも、必死にググって、わけもわからず突破したような気もする）過去の記憶を必死に取り戻すぞ...
40分経過
テキストのスライダーのサンプルコードをそのまま動かしてみたのですが、やはり同じエラーが出てしまいます。また、過去に動いた気がする自分のコードを改めて動かしてみると、動かなくなっていました。
コードの問題というより、なんらかの理由で、過去にインストールしたはずのControlP5パッケージがうまく動かなくなった（orうまくアクセスできなくなった）気配があります。
もう一粘りして無理だったら一旦あきらめようかな...
50分経過
ChatGPTにいろいろ聞いてみたところ、もしControlP5のインストールができていたら、プロジェクトのフォルダーの中にlibrariesというフォルダーが存在してそこにライブラリが入るはず、と言っているのですが...
自分の作業中のプロジェクトフォルダーを確認してみると、librariesというフォルダーはありませんでした。
そして、ネット記事などでProcessingのパッケージの追加ができない場合についての情報をいろいろ見ていた中で気づいたこととして...
このインストール画面で、自分はControlP5のパッケージの追加が「できている、完了しているはずだ」と思っていたのですが、よく見ると...
めちゃくちゃエラーっぽいやつ出てた...
まさに同じ問題で困っている方がいて、記事があったので、その教えにしたがい、一旦PC再起動してみます。
60分経過
再起動して改めてライブラリインストールを実行してみたのですが...
あーーーーっ！（癇癪）
そこで、以下の教えに従い...かつてインポートした残骸を消してからインストールを改めて試してみると...
Documents\Processing\librariesで、一回インポートしようとしたやつを（あれば）消す
例のエラーがでなくなった！！！！インストールできた！！！！
そこで、あらためて、書きかけのコードも実行してみたところ...
なんかいろいろこねくり回した末に、30分前の状況に戻ってきちゃったよ～～（泣）
なぜこうなったか？考えてみると、めちゃくちゃ心当たりはあって、少し前にProcessingのコードを保存する場所をいじって、Processingのコードを保存するフォルダをデスクトップに作成したんですよね...
コードの場所とライブラリの場所を切り分けて、すっきり管理♪を目指してしまったんですよね...
そのせいで、ライブラリへのアクセスに何か異常をきたしてしまったとしか思えないんですよね...とほほ...
Processingでは、画像やCSVファイルなどは絶対にdataフォルダーに入れないといけないとか、フォルダー周りのルールが細かい気がするので、何かしら（あるいは複数）のルールに違反している気しかしないんですよね...とほほ.....
70分経過
心がボロボロのズタズタになってしまい、あと1回この画面↓を見たらパソコンを逆向きに折ってしまう気がしてきました。寝ます。
GUIを使ったインタラクティブな可視化がしたい！と言いつつ、GUIのためのライブラリの読み込みに挫折して終わるという情けない結果ではありましたが、最後までお読みいただき、ありがとうございました（泣）
Discussion