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

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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);
}
f:id:shiroyuki2020:20210427225933g:plain

色をランダムにする

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

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);
}
f:id:shiroyuki2020:20210427230015g:plain

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

まとめ

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

参考サイト