​

function setup() {

  createCanvas(400, 200);

  myButton = new DistanceBasedButton(200,10);

}

​

function draw() {

  background(220);

  myButton.update();

  myButton.display();

}

​

​

​

​

​

​

​

​

​

​

​

​

​

class DistanceBasedButton{

  constructor(x,y){

    this.position = createVector(x,y);

    this.shouldDisplay = false;

    this.button = createButton('hello');

    this.button.hide();

    // this.button.show();

  }

  update(){

    let mousePosition = createVector(mouseX,mouseY);

    let d = this.position.dist(mousePosition);

    if (d < 100){

      this.shouldDisplay = true;

      this.button.show();

      setTimeout(()=>{this.button.hide()},5000);

    } else {

      this.shouldDisplay = false;

      // this.button.hide();

    }

  }

  display(){

    if (this.shouldDisplay){

      ellipse(this.position.x,this.position.y,20,20);

    }

  }

}