p5.js random()

ランダム関数で座標軸や円の半径を決めていきます。。

/*
*/

var x, y, r;

function setup(){
    createCanvas(480, 240);
    background(255, 0, 0, 10);
    noStroke();
    background('skyblue')

}

function draw(){
  x = random(width);
  y = random(height);
  if (random()> 0.9) {
    r = random (50, 60);
  } else {
    r = random(10, 30);
  }
  fill(255, 255, 255, random(30, 250));
  ellipse(x, y, r, r);
}

sin(),cos()

var angle = 0;
var r = 50;

function setup(){
    createCanvas(480, 240);
    noStroke();

      background('skyblue')

    slider = createSlider(0, 100, 30)
    slider.position(10, 20);

    button = createButton("clear!");
    button.position(10, 40);
    button.mousePressed(function(){
      background('skyblue');
    });
}

function draw(){
  r = slider.value();
  push();
  translate(width/2, height/2);
  x = sin(radians(angle)) * r;
  y = cos(radians(angle)) * r;
  ellipse(x, y, 10, 10);
  pop();
  angle += 2;
  r += 0.1;
}