let fr = 10;
let redCircleX = -99;
let redCircleY = -99;
let redCircleRadius = 5;
let redCircleDiameter = redCircleRadius;

function setup() {
  createCanvas(400, 400);
  background(220);

  frameRate(fr);
}

function draw() {
  background(220);
  const white = color(255, 255, 255);
  const black = color(0, 0, 0);
  const red = color(255, 0, 0);

  // NOTE: resume to 500
  for (var i = 0; i < 500; i++) {
    var circleX = random(400);
    var circleY = random(400);

    redCircleRadius = redCircleDiameter / 2;
    var radius_square = Math.pow(redCircleRadius, 2);
    var x_dist_square = Math.pow(circleX - redCircleX, 2);
    var y_dist_square = Math.pow(circleY - redCircleY, 2);

    if (x_dist_square + y_dist_square <= radius_square) {
      stroke(red);
      fill(white);
      circle(circleX, circleY, 5);
    } else {
      stroke(black);
      fill(white);
      circle(circleX, circleY, 5);
    }
  }

  if (redCircleDiameter < 200) {
    stroke(red);
    noFill();
    circle(redCircleX, redCircleY, redCircleDiameter);
    redCircleDiameter += 10;
  } else {
    // red circle enlarge done
    redCircleX = -99;
    redCircley = -99;
  }
}

function mousePressed() {
  redCircleX = mouseX;
  redCircleY = mouseY;

  redCircleDiameter = 5;
}