【Processing】random関数を使ったビジュアルの作成（音楽×プログラミング記事）

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

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

今回は、random関数を使って少し面白い円を描いていきます。

random関数の使い方

random関数は、名前から想像できる通り、乱数を生成する関数です。
パラメータが一つの時は、random(最大値)で０以上最大値未満の数値を返します。また、パラメータが二つの時は、random(最小値,最大値)で最小値以上最大値未満の数値を返します。戻り値はfloatで返されます。

実際に作る！

実際にコードを描いていきます。random関数を用いて、円の線が波打つようなアニメーションを作りました。
今回は、外部データを使わず、グラフィックの生成を目的に作っていきます。

float r = 50;
float radious = 200; 
float x = 0;
float y = 0;

void setup() {
 size(700, 700);
}

void draw() {
 translate(width/2, height/2); 
 float angle = TWO_PI / 45; //頂点を４５個にする
 beginShape();
 for (float i=0; i<TWO_PI; i+= angle) {
   float xs = x + radious*cos(i);
   float ys = y + radious*sin(i);

   float xsr = xs + random(-7,7); //x軸方向の頂点座標を乱数で生成
   float ysr = ys + random(-7,7); //y軸方向の頂点座標を乱数で生成
   stroke(255,0,255);
   noFill();
   vertex(xsr, ysr); //それぞれの頂点を結ぶ
   background(0);
 }
 endShape(CLOSE);

}

このようになります。円の線が波打っているように表現できたと思います。（動画を埋め込みたかったのですが、上手くできなかったので、時間を見てアップし直したいと思っています。）

ellipse関数で円を描くのではなく、円の頂点を指定してvertex関数で結ぶやり方で円を生成しました。頂点をランダムに指定すれば変形しやすそうだと思ったからです。頂点の数や、乱数の値を変えると、思いもよらぬ図形ができて面白いです。

本当は、ゆらゆらと水面がゆっくり揺れるように円の線を生成したかったのですが、上手くいかず、現在も進めております。また出来上がりましたら、記事にしたいと思います。

今回は以上になります。

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