2018プログラミング講座１６：乱数と生成的なグラフィック表現

生成される予測できない数列の要素を乱数と呼びます。Processingではrandom()関数を使って乱数を擬似的に生成することができます。

ランダムな線の描画
random()関数は呼び出すたびに異なる数値を返します。パラメータで値の上限あるいは値の範囲を指定することができます。たとえばrandom(10)とすると、0以上、10未満の乱数が生成されます。生成される数値は浮動小数点になるため、変数は float型を使います。
それでは、乱数を使って線を描画してみましょう。線の配色も乱数で生成しています。

void setup(){
   size(400, 400);
   background(255);
}

void draw(){
  for(int i = 0; i < 100; i++){
    stroke(random(255), random(255), random(255));
    line(random(width), random(height), random(width), random(height));
  }
}

ランダムな円の描画
次に円を乱数を使って描画してみましょう。

float speed = 5;
float x = 200;
float y = 200;

void setup(){
   size(400, 400);
   background(255);
}

void draw(){
    x += random(-speed, speed);
    y += random(-speed, speed);
    noStroke();
    fill(random(255), random(255), random(255));
    ellipse(x, y, 100, 100);
}

これらのグラフィックは、コードが実行されるたびに、その実行結果が異なることに気がついたでしょうか。
コードに規則を与えることで、予測は可能だが確定的ではないグラフィックスなどを生成することができます。

ジェネラティブなグラフィック表現
ここからは、参考書籍「ジェネラティブ・アート　Processingによる実践ガイド　マット・ピアソン著」を参考にコードを記述していきましょう。

円の描画
まずは、これまでどうりの方法で円を描いてみましょう。

float radius = 200;
int centerx = 400;
int centery = 400;

void setup(){
  size(800,800);
  background(255);
  strokeWeight(2);
  smooth();
}

void draw(){
  stroke(200, 200, 200);
  noFill();
  ellipse(centerx, centery, radius*2, radius*2);
}

円を描画する別の方法
次に三角関数を用いて点で円を描いてみましょう。

float radius = 200;
int centerx = 400;
int centery = 400;
float x, y;
float lastx = -999;
float lasty = -999;
float ang;
float rad; 

void setup(){
  size(800,800);
  background(255);
  strokeWeight(2);
  smooth();
}

void draw(){
  stroke(0, 0, 0);
  for(ang = 0; ang <= 360; ang += 2){
    rad = radians(ang);
    x = centerx + (radius * cos(rad));
    y = centery + (radius * sin(rad));
    point(x,y);
  }
}

円かららせんを描画する
円のコードをもとにして、らせんを描いてみましょう。

float radius = 10;
int centerx = 400;
int centery = 400;
float x, y;
float lastx = -999;
float lasty = -999;
float ang;
float rad; 

void setup(){
  size(800,800);
  background(255);
  strokeWeight(2);
  smooth();
}

void draw(){
  stroke(0, 0, 0);
  for(ang = 0; ang <= 1440; ang += 2){
    radius += 0.5;
    rad = radians(ang);
    x = centerx + (radius * cos(rad));
    y = centery + (radius * sin(rad));
    point(x,y);
  }
}

らせんを線で描画する
らせんを点ではなく線で描きましょう。

float radius = 10;
int centerx = 400;
int centery = 400;
float x, y;
float lastx = -999;
float lasty = -999;
float ang;
float rad; 

void setup(){
  size(800,800);
  background(255);
  strokeWeight(0.5);
  smooth();
}

void draw(){
  stroke(0, 0, 0);
  for(ang = 0; ang <= 1440; ang += 2){ radius += 0.5; rad = radians(ang); x = centerx + (radius * cos(rad)); y = centery + (radius * sin(rad)); if(lastx > -999){
      line(x, y, lastx, lasty);
    }
    lastx = x;
    lasty = y;
    lasty = y;
  }
}

らせんの線にノイズを加える
線にノイズを加えることで手書きの描線のようなゆらぎが現れます。

float radius = 10;
int centerx = 400;
int centery = 400;
float x, y;
float lastx = -999;
float lasty = -999;
float ang;
float rad; 
float radiusNoise;
float thisRadius;

void setup(){
  size(800,800);
  background(255);
  strokeWeight(0.5);
  smooth();
}

void draw(){
  stroke(0, 0, 0);
  radiusNoise = random(10);
  for(ang = 0; ang <= 1440; ang += 5){ radiusNoise += 0.05; radius += 0.5; thisRadius = radius + (noise(radiusNoise) * 200)-100; rad = radians(ang); x = centerx + (thisRadius * cos(rad)); y = centery + (thisRadius * sin(rad)); if(lastx > -999){
      line(x, y, lastx, lasty);
    }
    lastx = x;
    lasty = y;
  }
}

らせんに乱数を加え複数重ねて描画する
らせんの描線に乱数を加えながら複数のらせんを重ねて描いてみましょう。

float radius;
int centerx = 400;
int centery = 400;
float x, y;
float lastx;
float lasty;
float ang;
float rad; 
float radiusNoise;
float thisRadius;
int startangle;
int endangle;
int anglestep;

void setup(){
  size(800,800);
  background(255);
  strokeWeight(0.5);
  smooth();
}

void draw(){
  for(int i = 0; i < 100; i++){
    lastx=-999;
    lasty=-999;
    radius = 10;
    stroke(random(255), random(255), random(255),50);
    startangle = int(random(360));
    endangle = 1440 + int(random(1440));
    anglestep = 5 + int(random(3));
    radiusNoise = random(10);
    for(ang = startangle; ang <= endangle; ang += anglestep){ radiusNoise += 0.05; radius += 0.5; thisRadius = radius + (noise(radiusNoise) * 200)-100; rad = radians(ang); x = centerx + (thisRadius * cos(rad)); y = centery + (thisRadius * sin(rad)); if(lastx > -999){
        line(x, y, lastx, lasty);
      }
      lastx = x;
      lasty = y;
    }
  }
}

総合課題４：
乱数を用いたグラフィック作品を５点、作成する。