Les 10b - Knoppen aanklikken

---

let buttonX = 100;
let buttonY = 100;
let buttonSize = 50;

let buttonX2 = 200;
let buttonY2 = 100;
let buttonSize2 = 50;

function setup() {
    createCanvas(800, 600);

}

function draw() {
    background(255);

    // Stel the kleur van de knop in op basis van of de muis op de knop is.
    if (knop(buttonX, buttonY, buttonSize)) {
        if (mouseIsPressed) {
            // muis is boven de knop, en ingedrukt: fel groen
            fill(0, 255, 0);
        } else {
            // muis is boven de knop, alleen niet ingedrukt: licht groen
            fill(200, 255, 200);
        }
    } else {
        // muis is niet boven de knop: wit
        fill(255);
    }
    // teken de knop
    rect(buttonX, buttonY, buttonSize, buttonSize);

    // hetzelfde als hierboven, maar dan voor een tweede knop.
    if (knop(buttonX2, buttonY2, buttonSize2)) {
        if (mouseIsPressed) {
            fill(0, 255, 0);
        } else {
            fill(200, 255, 200);
        }

    } else {
        fill(255);
    }
    rect(buttonX2, buttonY2, buttonSize2, buttonSize2);
}

function mousePressed() {
    // check if de muis positie op een van de knoppen is
    if (knop(buttonX, buttonY, buttonSize)) {
        console.log('knop1');
    } else if (knop(buttonX2, buttonY2, buttonSize2)) {
        console.log('knop2');
    }
}

// check of de positie van de muis binnen dit vierkant is
function knop(x, y, size) {
    if (mouseX >= x && mouseX <= x+size && mouseY >= y && mouseY <= y+size) {
        return true;
    } else {
        return false;
    }
}