processing #5 マウスの動きに合わせるpart2

こんにちは、kazumaです。前回書いたマウスに合わせた動きをするコードを改善と改造していこうかなと思います。

課題

前回のコードの改善と改造

とりあえずマス目の変数化から

rect(5,5,size,size);

マス目の部分もsizeという変数を置いて一般化

次はもっとも難所のマウスの動きに合わせてタイルが黄色になるプログラム
とりあえずdeconbatchさんのアドバイスでif文の簡略化と読みやすさが増しました。

if(mouseX>5 && mouseX<55){
    if(mouseY>5 && mouseY<55){
      fill(#fde47f);
      rect(5,5,size,size);
    }
    else if(mouseY>60 && mouseY<110){
      fill(#fde47f);
      rect(5,60,size,size);
    }
    else if(mouseY>115 && mouseY<165){
      fill(#fde47f);
      rect(5,115,size,size);
    }
  }
  else if(mouseX>60 && mouseX<110){
    if(mouseY>5 && mouseY<55){
      fill(#fde47f);
      rect(60,5,size,size);
    }
    else if(mouseY>60 && mouseY<110){
      fill(#fde47f);
      rect(60,60,size,size);
    }
    else if(mouseY>115 && mouseY<165){
      fill(#fde47f);
      rect(60,115,size,size);
    }
  }
  else if(mouseX>115 && mouseX<165){
    if(mouseY>5 && mouseY<55){
      fill(#fde47f);
      rect(115,5,size,size);
    }
    else if(mouseY>60 && mouseY<110){
      fill(#fde47f);
      rect(115,60,size,size);
    }
    else if(mouseY>115 && mouseY<165){
      fill(#fde47f);
      rect(115,115,size,size);
    }
}

ですが、これだとマス目を増やしたいときに対してのめんどくささは変化ないので、思考中....

int x = 5;
int y = 5;
int size = 50;
 
void setup(){
 size(170,170);
 pixelDensity(1);
 background(0);
 
}

void draw(){
  background(0);
  fill(255);
  for(int i=5;i<116;i+=55){
    for(int j=5;j<116;j+=55){
      rect(i,j,size,size);
  }
 }
 setx();
 sety();
 fill(#fde47f);
 rect(x,y,50,50);
}

void setx(){
  if(mouseX>5 && mouseX<55){
    x = 5;
  }
  else if(mouseX>60 && mouseX<110){
    x = 60;
  }
  else if(mouseX>115 && mouseX<165){
    x = 115;
  }
}

void sety(){
  if(mouseY>5 && mouseY<55){
    y = 5;
  }
  else if(mouseY>60 && mouseY<110){
    y = 60;
  }
  else if(mouseY>115 && mouseY<165){
    y = 115;
  }
}

rectのx座標とy座標を、変数で置きつつ独立if文で組んでみたのですが、着想はよかった気がするんですが、rectが絶対に動いてしまいマウスがマス目以外でも近くのタイルを塗ってしまう結果に,,,惜しい

もうちょい頑張ってみようかなと思います。

Happy Creating!!