let mouseDiameter = 40;

​

let numObs = 16;

let allObstacles = [];

​

class Obstacle {

  constructor() {

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

    let pctDiam = diameterDelta / (maxDiameter / 2);

​

    this.x = random(width);

    this.y = random(height);

    this.diameter = maxDiameter / 2 + diameterDelta;

    this.fColor = color(255 - 255 * pctDiam);

    this.oColor = color(255, 190, 90);

  }

​

  hovered() {

    let d = sqrt((mouseX - this.x) ** 2 + (mouseY - this.y) ** 2);

    return d < this.diameter / 2 + mouseDiameter / 2;

  }

​

  draw() {

    let mHover = this.hovered();

​

    if (mHover) {

      for (let i = 0; i < 4; i++) {

        let mAlpha = ((i + 1) / 4) * 256;

        let mDiameterMultiplier = 4 - i;

​

        this.oColor.setAlpha(mAlpha);

        fill(this.oColor);

        ellipse(this.x, this.y, mDiameterMultiplier * this.diameter);

      }

    } else {

      fill(this.fColor);

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

    }

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

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

    let anObstacle = new Obstacle();

    allObstacles.push(anObstacle);

  }

}

​

function draw() {

  background(220, 10, 120);

​

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

    let anObstacle = allObstacles[i];

    anObstacle.draw();

  }

​

  fill(255);

  ellipse(mouseX, mouseY, mouseDiameter);

}

​