# Simple sketch issue (mouse over sets color)

**URL:** <https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806>\
**Category:** Coding Questions\
**Created:** [January 5, 2021, 8:02pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806 "2021-01-05T20:02:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![DamoBailey](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@DamoBailey](https://discourse.processing.org/u/DamoBailey)\
**Post date:** [January 5, 2021, 8:02pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/1 "2021-01-05T20:02:32Z")

</div>

Hi

I am a complete beginner and am working on the following project:

Create a 500x500 grey area split into 4 equal quadrants. Show one quadrant as blue when the mouse is in that quadrant (all other quadrants shown as gray), when the mouse moves to another quadrant, that quadrant shows as a different colour with the other three as grey etc. same for the other two quadrants. Poor explanation of a very simple sketch! Sorry!

i can make three quadrants work (rd, blue and yellow) but not the fourth (green). What am I doing wrong?? I can’t see for looking now and it’s driving me mad! Hope someone can help…

thanks in advance

Damian

here is my code:

void setup() {  
size(500,500);  
}

void draw() {  
background(50);

//BOTTOM RIGHT: RED

if (mouseX \> 250)  
if (mouseY \> 250)  
{  
fill(255,0,0);  
rect(250,250,250,250);  
} else {  
fill(50);  
rect(0,0,500,500);  
}

//TOP RIGHT: BLUE

if (mouseX \> 250)  
if (mouseY \< 250)  
{  
fill(0,0,250);  
rect(250,0,250,250);  
} else if (mouseX \< 250){  
fill(50);  
rect(0,0,500,500);  
}

//TOP LEFT: GREEN

if (mouseX \< 250)  
if (mouseY \< 250)  
{  
fill(0,250,0);  
rect(0,0,250,250);  
} else if (mouseX \< 250){  
fill(50);  
rect(0,0,500,500);  
}

//BOTTOM LEFT: YELLOW

if (mouseX \< 250)  
if (mouseY \> 250)  
{  
fill(255,255,0);  
rect(0,250,250,250);  
} else {  
fill(50);  
rect(0,0,500,500);  
}

stroke(255);  
line(250,0,250,height);  
line(width,250,0,250);

}

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 5, 2021, 8:15pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/2 "2021-01-05T20:15:05Z")

</div>

I found the issue. You are basically drawing the green square however you are drawing a gray square over it, therefore making it not visible.  
The answer is hidden, if you are fine with this much of a hint

> **Answer**
>
> Just remove the `} else {` statements from your code.
> 
> ```auto
> void setup() {
> size(500, 500);
> }
> 
> void draw() {
> background(50);
> 
> //BOTTOM RIGHT: RED
> 
> if (mouseX > 250)
> if (mouseY > 250)
> {
> fill(255, 0, 0);
> rect(250, 250, 250, 250);
> }
> 
> //TOP RIGHT: BLUE
> 
> if (mouseX > 250)
> if (mouseY < 250)
> {
> fill(0, 0, 250);
> rect(250, 0, 250, 250);
> } else if (mouseX < 250) {
> fill(50);
> rect(0, 0, 500, 500);
> }
> 
> //TOP LEFT: GREEN
> 
> if (mouseX < 250)
> if (mouseY < 250)
> {
> fill(0, 250, 0);
> rect(0, 0, 250, 250);
> } else if (mouseX < 250) {
> fill(50);
> rect(0, 0, 500, 500);
> }
> 
> //BOTTOM LEFT: YELLOW
> 
> if (mouseX < 250)
> if (mouseY > 250)
> {
> fill(255, 255, 0);
> rect(0, 250, 250, 250);
> }
> 
> stroke(255);
> line(250, 0, 250, height);
> line(width, 250, 0, 250);
> }
> 
> ```

Here is some advice to make the project shorter. Read if you want : )

> **Advice**
>
> I recommend you first set the background color to gray `background(100)`. After that draw the + shaped lines over the screen. After that just check mouse positions. Check for `>>`, `><`, `<>`, `<<` (first is for mouseX, second for mouseY so basically `if(mouseX > 250 && mouseY > 250) { }` //bottom right)

---

<div class="post-metadata">

**Author:** ![DamoBailey](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@DamoBailey](https://discourse.processing.org/u/DamoBailey)\
**Post date:** [January 5, 2021, 8:27pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/3 "2021-01-05T20:27:38Z")

</div>

Thanks so much. The idea was to use conditionals to make this work so I’d like to keep the ‘else’ in. I’ll take a look at the ‘grey over green’ thing you mention and see if I can fix it 👍🏻

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 5, 2021, 9:02pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/4 "2021-01-05T21:02:17Z")

</div>

IF you want to keep the ` } else {` in you should change to something like

```auto
//replacing mouseX with x (same for Y)
if(x < 250) {
   if(y < 250) {
       //top right
   } else {
       //top left
   }
} else {
    if(x < 250) {
         //bottom left
    } else {
        //bottom right
    }
}

```

---

<div class="post-metadata">

**Author:** ![DamoBailey](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@DamoBailey](https://discourse.processing.org/u/DamoBailey)\
**Post date:** [January 5, 2021, 9:13pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/5 "2021-01-05T21:13:33Z")

</div>

thanks again - in your inital suggestion to top left quadrant is green at the very beginning. how do i make all four quadrants grey when the sketch is run with the colour only changing when the mouse is in each quadrant?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 5, 2021, 9:20pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/6 "2021-01-05T21:20:01Z")

</div>

set the background to gray  
`background(100);`  
check for mousePosition

> **Code**
>
> ```auto
> if(x < 250) {
> if(y < 250) {
> //top left
> fill(0,255,0);
> rect(0,0,250,250);
> } else {
> //top right
> fill(0,255,0);
> rect(250,0,250,250);
> }
> } else {
> if(x < 250) {
> //bottom left
> fill(255,255,0);
> rect(0,255,255,255);
> } else {
> //bottom right
> fill(255,0,0);
> rect(250,250,250,250);
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![DamoBailey](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@DamoBailey](https://discourse.processing.org/u/DamoBailey)\
**Post date:** [January 5, 2021, 10:46pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/7 "2021-01-05T22:46:01Z")

</div>

ok - just so i’m clear can you show me/highlight in my original code where the grey overwrites the green?

```auto
void setup() {
  size(500,500);
}

void draw() {
  background(50);

//BOTTOM RIGHT: RED 

  if (mouseX > 250)
  if (mouseY > 250)
  {
    fill(255,0,0);
    rect(250,250,250,250);
  } else {
    fill(50);
    rect(0,0,500,500);
  }

//TOP RIGHT: BLUE
  
  if (mouseX > 250)
  if (mouseY < 250)
  {
    fill(0,0,250);
    rect(250,0,250,250);
  } else if (mouseX < 250){
    fill(50);
    rect(0,0,500,500);
  }

//TOP LEFT: GREEN
  
  if (mouseX < 250)
  if (mouseY < 250)
  {
    fill(0,250,0);
    rect(0,0,250,250);
  } else if (mouseX < 250){
    fill(50);
    rect(0,0,500,500);
  }
  
//BOTTOM LEFT: YELLOW
  
  if (mouseX < 250)
  if (mouseY > 250)
  {
    fill(255,255,0);
    rect(0,250,250,250);
  } else {
    fill(50);
    rect(0,0,500,500);
  }
  
  stroke(255);
  line(250,0,250,height);
  line(width,250,0,250);
    
  }

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 5, 2021, 10:57pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/8 "2021-01-05T22:57:39Z")

</div>

> [@DamoBailey](#):
>
> ```auto
> else {
> fill(50);
> rect(0,0,500,500);
> }
> 
> ```

here it is  
(remove the else { for it to work)

---

<div class="post-metadata">

**Author:** ![YumKlarc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yumklarc/32/11689_2.png) [@YumKlarc](https://discourse.processing.org/u/YumKlarc)\
**Post date:** [January 5, 2021, 11:01pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/9 "2021-01-05T23:01:27Z")

</div>

Hi Damo!

Why don’t you simply draw your background in grey, and then depending on your mouse location, display a rectangle with different color?

```auto
void setup() {
  size(500,500);
}

void draw() {
  
  background(50);

  
  if (mouseY >= 250 && mouseX >= 250){//BOTTOM RIGHT: RED 
    fill(255,0,0);
    rect(250,250,250,250);
  }
  else if (mouseY < 250 && mouseX >= 250){//TOP RIGHT: BLUE
    fill(0,0,255);
    rect(250,0,250,250);
  }
  else if (mouseY < 250 && mouseX < 250){//TOP LEFT: GREEN
    fill(0,255,0);
    rect(0,0,250,250);
  }
  else if (mouseY >= 250 && mouseX < 250){//BOTTOM LEFT: YELLOW
    fill(255,255,0);
    rect(0,250,250,250);
  }
  
  stroke(255);
  line(250,0,250,height);
  line(width,250,0,250);
    
  }

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 5, 2021, 11:01pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/10 "2021-01-05T23:01:55Z")

</div>

he said he wanted to do it that way : P

---

<div class="post-metadata">

**Author:** ![YumKlarc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yumklarc/32/11689_2.png) [@YumKlarc](https://discourse.processing.org/u/YumKlarc)\
**Post date:** [January 5, 2021, 11:02pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/11 "2021-01-05T23:02:22Z")

</div>

oh well okay my bad ^^

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 5, 2021, 11:03pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/12 "2021-01-05T23:03:11Z")

</div>

good night! I’m going to sleep now.

---

<div class="post-metadata">

**Author:** ![YumKlarc](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yumklarc/32/11689_2.png) [@YumKlarc](https://discourse.processing.org/u/YumKlarc)\
**Post date:** [January 5, 2021, 11:03pm UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/13 "2021-01-05T23:03:52Z")

</div>

Good night (we need 20 chars to post so here they are :p)

---

<div class="post-metadata">

**Author:** ![DamoBailey](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@DamoBailey](https://discourse.processing.org/u/DamoBailey)\
**Post date:** [January 6, 2021, 7:28am UTC](https://discourse.processing.org/t/simple-sketch-issue-mouse-over-sets-color/26806/14 "2021-01-06T07:28:32Z")

</div>

thanks you guys - i really appreciate your help. interesting to see other ways of doing this too