【p5.js】乱数で模様を描く:random()

乱数を使うとランダムな数字を生成することができます。色々と試すと面白いことができて、表現の幅が広がると思います。乱数を使ったサンプルコードを掲載します。私も色々な値を乱数にして、試してみようと思います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

乱数:random()

• random():0.0～1.0の間でランダムな数値を生成
• random(n):0～nの間でランダムな数値を生成
• random(n, m):n～mの間でランダムな数値を生成

ランダムな円を生成するアニメーション

半径と不透明度がランダムな円を生成するアニメーション。

let x, y, r;

function setup(){
  createCanvas(200, 200);
  noStroke();
  background(127);
}

function draw(){
  //x座標、y座標をランダムにする
  x = random(width);
  y = random(height);

  //半径をランダムにする
  if(random() > 0.9){
    r = random(60, 80);
  }else{
    r = random(10, 30);
  }

  //塗りが白で、不透明度が30～250の間の乱数
  fill(255, 255, 255, random(30, 250));
  ellipse(x, y, r);
}

色をランダムにする

上記のランダムな円のアニメーションに、円の色もランダムにする処理を追記する。

let x, y, r;
let red, green, blue;

function setup(){
  createCanvas(200, 200);
  noStroke();
  background(127);
}

function draw(){
  x = random(width);
  y = random(height);

  if(random() > 0.9){
    r = random(50, 80);
  }else{
    r = random(10, 30);
  }

  //色をランダムにする
  red = random(0, 255);
  green = random(0, 255);
  blue = random(0, 255);

  //塗りが白で、不透明度が30～250の間の乱数
  //fill(255, 255, 255, random(30, 250));
  //塗りの色がランダムで、不透明度が30～250の間の乱数
  fill(red, green, blue, random(30, 250));
  ellipse(x, y, r);
}

色もランダムにすることができた。しかし、色に統一感がないので若干汚くも見える。トーンを合わせると、より綺麗な配色になると考える。

まとめ

• random()で乱数を生成する
• パラメータに乱数を使う

参考サイト

• p5.js入門 (全14回) - プログラミングならドットインストール