constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.l = random(-5, 5);

    this.ri = random(-5, 5);

    this.c1 = 255;

    this.c2 = 190;

    this.color = 200;

    this.on = false;

  }

​

  click(x, y) {

    let d = dist(this.x, this.y, x, y);

    if (d < this.r) {

      this.on = !this.on

      if (this.on) {

        this.color = 200;

        this.c1 = 255;

        this.c2 = 190;

      } else {

        this.color = 200;

        this.c1 = 190;

        this.c2 = 250;

      }

    }

  }

  hover(x, y) {

    let d = dist(this.x, this.y, x, y);

    if (d < this.r) {

      fill(0, 200, 180);

      // rectMode(CENTER);

      // rect(this.x, this.y, this.r * 2, this.r * 2);

    } else {

      fill(253, 253, 150);

    }

  }

  show() {

    strokeWeight(2);

    stroke(255, 105, 95);

    ellipse(this.x, this.y, this.r * 2);

​

  }

  bg() {

    background(this.color, this.c1, this.c2);

  }

  move() {

​

    if (this.x > width || this.x < 0) {

      this.l = this.l * -1;

    }

    if (this.y > height || this.y < 0) {

      this.ri = this.ri * -1;

    }

    this.x += this.l;

    this.y += this.ri;

  }

​

}