draw = function() {
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
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.
To use an if statement to change the button's color only when the mouse is pressed inside the button, you can modify the existing code. Here's the updated code:
```javascript
draw = function() {
fill(0, 255, 68); // start color
if (mouseIsPressed) {
if (mouseX >= 50 && mouseX <= 300 && mouseY >= 150 && mouseY <= 250) {
fill(33, 112, 52); // click color
} else {
fill(0, 255, 68); // revert back to start color
}
}
rect(50, 150, 250, 100); // the button
// The button text
fill(0, 0, 0);
textSize(30);
text("PRESS ME!", 93, 193);
};
```
In the modified code, an additional check is added inside the `mouseIsPressed` block. The if statement checks if the `mouseX` and `mouseY` coordinates fall within the boundaries of the button (`50 <= mouseX <= 300` and `150 <= mouseY <= 250`). If the conditions are met, the fill color is set to the click color. Otherwise, it reverts back to the start color.
To change the button color only when you press inside the button and not when you press outside it, you can use the `mouseX` and `mouseY` variables along with an `if` statement to determine if the mouse is inside the button's boundaries.
Here's how you can modify your code to achieve that:
```javascript
draw = function() {
// Set the initial button color
fill(0, 255, 68); // start color
// Check if the mouse is inside the button
if (mouseIsPressed && mouseX > 50 && mouseX < 300 && mouseY > 150 && mouseY < 250) {
fill(33, 112, 52); // click color
}
// Draw the button
rect(50, 150, 250, 100);
// Draw the button text
fill(0, 0, 0);
textSize(30);
text("PRESS ME!", 93, 193);
};
```
In the modified code, we added the conditions `mouseX > 50 && mouseX < 300 && mouseY > 150 && mouseY < 250` inside the `if` statement. These conditions check if the `mouseX` is within the boundaries of the button horizontally (between 50 and 300) and if the `mouseY` is within the boundaries vertically (between 150 and 250). Only when both conditions are met will the button change color.
By adding these conditions, the button will now change color only when you press inside the button, and it will stay the same color when you press outside the button.