let mouseDiameter = 40;

​

let numObs = 16;

let allObstacles = [];

​

function overlap(x0, y0, diam0, x1, y1, diam1) {

  let d = sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);

  return d < diam0 / 2 + diam1 / 2;

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  for (let i = 0; i < numObs; i += 1) {

    let diameterDelta = random(0, maxDiameter / 2);

    let pctDiam = diameterDelta / (maxDiameter / 2);

​

    let anObstacle = {

      x: random(width),

      y: random(height),

      diameter: maxDiameter / 2 + diameterDelta,

      fColor: color(255 - 255 * pctDiam),

      oColor: color(255, 190, 90),

    };

​

    allObstacles.push(anObstacle);

  }

}

​

function draw() {

  background(220, 10, 120);

​

  for (let i = 0; i < allObstacles.length; i++) {

    let anObstacle = allObstacles[i];

​

    let mOverlap = overlap(

      mouseX,

      mouseY,

      mouseDiameter,

      anObstacle.x,

      anObstacle.y,

      anObstacle.diameter

    );

​

    if (mOverlap) {

      fill(anObstacle.oColor);

    } else {

      fill(anObstacle.fColor);

    }

    ellipse(anObstacle.x, anObstacle.y, anObstacle.diameter);

  }

​

  fill(255);

  ellipse(mouseX, mouseY, mouseDiameter);

}

​