Fill not overwriting the last fill

p5.js Coding Questions
1

so im trying to make a code for a school project where the german empire flag turns into the german flag when i drag on it.

until the second ellipse(mouseX,mouseY,50,50); part, everything works fine, but in the if(200 <= mouseY <= 300){ part, instead of coloring the ellipses 255,206,0 , it colors the ellipses. 221,0,0 .
pls help

スクリーンショット 2022-03-01 15.14.56
スクリーンショット 2022-03-01 15.14.561004×602 3.45 KB 

function setup(){
  createCanvas(500,300);
  frameRate(30);
   noStroke();
  fill(0,0,0)
  rect(0,0,500,100)
  fill(255,255,255);
  rect(0,100,500,100);
  fill(222,0,0);
  rect(0,200,500,100);
}
function draw(){
  if(mouseIsPressed == true){
    if(mouseY < 100){
      fill(0,0,0);
      ellipse(mouseX,mouseY,50,50);
    }else{
      if(100 <= mouseY <= 200){
        fill(221,0,0);
        ellipse(mouseX,mouseY,50,50);
      }else{
        if(200 <= mouseY <= 300);{
          fill(255,206,0);
          ellipse(mouseX,mouseY,50,50);
        }
      }
    }}
 
}
2

Your if statements’ conditions are not right.

Try:

100 <= mouseY && mouseY <= 200
4 Likes
3

Thanks for the response
What does that mean btw

4
1 Like
5

You can’t write a condition this way.

Instead you need to check both numbers separately and connect both checks with AND which is && in Java processing.

Like here

if (100 <= mouseY && mouseY <= 200)

same as

(but better readable)

 if ( mouseY >= 100 && 
      mouseY <= 200 )
1 Like