元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

Processing:グレースケールで乱数を比較する

これまでにグラフや2次元ノイズで乱数を見てきました。今回は、グレースケールで乱数を比較します。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。

一様にランダムなグレースケール

100個の楕円を生成します。その塗りの色を乱数で決めます。乱数の生成には、ランダム関数、正規分布、パーリンノイズを使います。関数の種類によって生成される値が変わるので、グレーの濃淡の違いを見られます。

まず、ランダム関数で乱数を生成した場合です。

//ランダム関数でグレースケール
void setup(){
  size(300, 300);
  background(255);
  stroke(0);
}

color grayScale = 0;
int x = 0;
int y = 0;

void draw(){
  for(int i = 0; i < 100; i++){
    grayScale = parseInt(map(random(1), 0, 1, 0, 255));
    fill(grayScale);
    x = parseInt(random(width));
    y = parseInt(random(height));
    ellipse(x, y, 32, 32);
  }
  noLoop();
}

ランダム関数では、様々な濃淡のグレースケールになりました。

正規分布でグレースケール

//正規分布でグレースケール
import java.util.Random;

void setup(){
  size(300, 300);
  background(255);
  stroke(0);
  generator = new Random();
}

Random generator;
int grayScale = 0;
float num = 0;
float sd = 30;
float mean = 128;
int x = 0;
int y = 0;

void draw(){
  for(int i = 0; i < 100; i++){
    num = (float)generator.nextGaussian();
    grayScale = parseInt(sd * num + mean);
    fill(grayScale);
    x = parseInt(random(width));
    y = parseInt(random(height));
    ellipse(x, y, 32, 32);
  }
  noLoop();
}

正規分布では、似た濃淡のグレースケールになりました。

パーリンノイズでグレースケール

//パーリンノイズでグレースケール
void setup(){
  size(300, 300);
  background(255);
  stroke(0);
}

float t = 0;
int grayScale = 0;
int x = 0;
int y = 0;

void draw(){
  for(int i = 0; i < 100; i++){
    grayScale = parseInt(map(noise(t), 0, 1, 0, 255));
    fill(grayScale);
    x = parseInt(random(width));
    y = parseInt(random(height));
    ellipse(x, y, 32, 32);
    //tの増加量を変えて試す
    //t += 1.0;
    //t += 0.1;
    //t += 0.01;
    t += 0.001;
  }
  noLoop();
}

tの増加量が1.0のとき

tの増加量が0.1のとき

tの増加量が0.01のとき

tの増加量が0.001のとき

tの増加量が多いとグレースケールの濃淡に差があり、少ないとあまり濃淡の差がありません。

まとめ

今回は、グレースケールで乱数を比較しました。関数によって生成される値が変わるので、グレーの濃淡の違いを見られたと思います。引き続き、The Nature of Code(PDF版)の内容を勉強します。

参考サイト

» HTML入門のまとめはこちらです。