p5.jsでランダムな円を描く

自動でランダムな円を描く

マウスでクリックするたびに円が増えていく

let x, y, r;

function setup(){
  createCanvas(600, 600);
  noStroke();
  background(000);
}

function mousePressed() {
  //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);
}

カラフルな円

マウス１回クリックするだけで30個のランダムな円を一気に描く

let x, y, r;

function setup(){
  createCanvas(600, 600);
  noStroke();
  background(255);
}

function mousePressed() {
  for (let i = 0; i < 30; i++) {
  //x座標、y座標をランダムにする
  x = random(width);
  y = random(height);

  if(random() > 0.9){
    r = random(60, 80);
  }else{
    r = random(10, 30);
  }
  //塗りが白で、不透明度が30～250の間の乱数
  fill(random(255), random(100,255), 255, random(50,180));
  ellipse(x, y, r);
  }
}