Simple sketch issue (mouse over sets color)

Processing Coding Questions
1

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);

}

2

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.

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)

3

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 :+1:t2:

1 Like
4

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

//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
    }
}
5

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?

6

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

Code 
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);
    }
}
7

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

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);
    
  }
8

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

9

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?

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);
    
  }
10

he said he wanted to do it that way : P

11

oh well okay my bad ^^

1 Like
12

good night! I’m going to sleep now.

13

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

14

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

1 Like