draw = function() {

Question

fill(0, 255, 68); // start color

if (mouseIsPressed) {
fill(33, 112, 52); // click color
}
rect(50, 150, 250, 100); // the button

// The button text
fill(0, 0, 0);
textSize(30);
text("PRESS ME!", 93, 193);
}; I want the button to change color when I press inside the button but when I press outside the button it changes color how can I use an if statement to help me do that

Answer 1

To change the color of the button only when it is pressed inside, you can use the `mouseX` and `mouseY` variables to check if the mouse coordinates are within the boundaries of the button. Here's an example of how you can modify the code to achieve this:

```javascript
draw = function() {
fill(0, 255, 68); // start color

if (mouseIsPressed && mouseX >= 50 && mouseX <= 300 && mouseY >= 150 && mouseY <= 250) {
fill(33, 112, 52); // click color
}
rect(50, 150, 250, 100); // the button

// The button text
fill(0, 0, 0);
textSize(30);
text("PRESS ME!", 93, 193);
};
```

In this modified code, the `if` statement checks if the `mouseIsPressed` is `true` and if the `mouseX` and `mouseY` variables fall within the boundaries of the button (`mouseX` is greater than or equal to 50, less than or equal to 300, `mouseY` is greater than or equal to 150, and less than or equal to 250). If both conditions are met, the button color will change to the click color. Otherwise, it will remain the start color.