Processingで花を作る②～JSONファイルの連携～（音楽×プログラミング記事）

こんにちは。Evening Music Recordsの鶴留です。

本記事では、音楽情報バイラルメディア「EVENING」の運営スタッフにより、テック関連情報をブログ形式でお届けさせていただきます。

今回も前回に引き続き、Processingで作る「花」についてです。

この開発の最終的な目標は、個人のツイートに含まれる単語の使用頻度を利用して、個人個人違ったビジュアルを生成することです。花びらの長さや色が、単語の使用頻度によって変わるという仕組みを取り入れたいと考えています。

その前段階として、前回制作したprocessingで作った花の花びらの部分に、データファイルの値を反映して長さを変えていきます。

前回記事： https://note.com/eveningmusic/n/n6f7f04c0bf0a

JSONファイルとは？

今回は、JSONファイル形式を用います。
JSONは、JavaScript Object Notionの略称で、テキストベースのデータです。軽量かつ単純なデータであるため、様々な言語間での共有ができます。拡張子は「.json」です。

実際に作る！

このようなJSONファイルを用意しました。

[
{"word":"楽しい","number":189},
{"word":"processing","number":162},
{"word":"データ","number":198},
{"word":"音楽","number":149},
{"word":"フレーズ","number":179},
{"word":"初めて","number":134},
{"word":"JSON","number":173},
{"word":"パソコン","number":143},
{"word":"コード","number":172}
]

個人のツイートに含まれる単語と、その使用頻度を模したデータです。

「test_data.json」という名前で保存し、Processingのテキスト画面にドラックするか、Processingのpdeファイルと同じ階層に「data」というファイルを作り、その中に入れてください。

こちらが実際に作ったものです。

以下がProcessingのコードになります。

float a = 0;
float x ;
float y ;
float r = 255;
float g = 0;
float b = 255;

float[] number;

void setup() {
 size(500, 500);
 background(0);
 frameRate(10);
}

void draw() {

 JSONArray json = loadJSONArray("test_data.json");//JSONファイルの配列の読み込み
 number = new float[json.size()];//配列の長さを求める

 for (int i=0; i<json.size(); i++) {

   JSONObject job = json.getJSONObject(i);
   number[i] = job.getFloat("number");

   strokeWeight(40);
   stroke(r, g, b);

   x = 250 + number[i]*cos(radians(a));
   y = 250 - number[i]*sin(radians(a));

   for (int c=1; c<9; c++) { if (number[i]>=110+c*10 && number[i]<120+c*10) {
       stroke(r-30*(c), g+30*(c), b);
     }
   }

   line(width/2, height/2, x, y);
   a += 40;//40°ずつ角度を増やしていく

 }

 noStroke();
 fill(0); 
 ellipse(width/2, height/2, 90, 90);
 fill(255);
 ellipse(width/2, height/2, 50, 50);
}

実行できましたでしょうか。

まず、JSONファイルの読み込みです。読み込みは、loadJSONArray関数を用います。

次に配列の長さを求めます。.lengthではなく.size()により求めることができます。

getJSONObjectにより、ファイル内のオブジェクトを読み込みます。JSONファイル内の{}に当たる部分です。取り出したい情報は、その中のnumber配列に含まれる値ですので、.getFloat関数を使って取り出すことができます。
その値を、line関数による直線の終点の座標x、yの中でcos、sinに掛ければ、描画できます。

また、取得したデータの長さを色に反映しています。その値が大きくなるにつれ水色に、小さくなるにつれピンクになるように作りました。
用意したJSONファイルに含まれる値は、120～200の間のいずれかにしてあります。120から数えて、10増えると、stroke(r,g,b)におけるrの値が30ずつ小さくなり、gの値が30ずつ増えていきます。

今回は以上になります。

音楽情報バイラルメディアEVENING： https://evening-mashup.com/