​

let buttons = [];

​

function setup() {

    createCanvas(400, 400);

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

        x = i * (100) + 50

        buttons[i] = new Button(x, 200)

    }

}

​

function draw() {

    background(220);

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

        buttons[i].position();

        buttons[i].hover(mouseX, mouseY);

    }

}

​

function mousePressed() {

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

        buttons[i].insideTheButton(mouseX, mouseY);

    }

}

​

class Button {

    constructor(x, y) {

        this.x = x

        this.y = y

        this.r = 50

        this.clicked = false

        this.grown = 60

    }

​

    insideTheButton(px, py) {

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

        if (this.r > d) {

            this.clicked = !this.clicked;

        }

    }

​

    hover(dx, dy) {

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

        if (this.r / 2 > d) {

            this.r = this.grown;

        } else {

            this.r = 50

        }

    }

​

    position() {

        noStroke();

        if (this.clicked == false) {

            fill(0);

        } else {

            fill(255)

        }

​

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

    }

​

}