boolean isMoved = false;//マウスムーブを判定
float eWidth=10, eHeight = 10;//円の大きさ
float eWidth2=10, eHeight2 = 10;//円の大きさ

//円が拡縮するためのフラグ
int target = -1;
int target2 = -1;
int target3 = -1;
int target4 = -1;

void setup() {
  size(400, 400);
  noStroke();//輪郭なし
  fill(0);//オブジェクトは黒
}

void draw() {
  background(255);

  if (isMoved) {
    
    //100ピクセルごとのマウスの動きを円の拡縮に適用
    for (int i = 0; i <= width; i+=100) {

      if (mouseX >= i && mouseX <= i+100) {

        target = 400-i;
        target2 = 400 - (i+100);
        
        //マウスのX座標を50~0~50の値に変換
        eWidth = abs(map(mouseX, i, i+100, -50, 50))-50;
        eHeight = abs(map(mouseX, i, i+100, -50, 50))-50;
      }

      if (mouseY >= i && mouseY <= i+100) {

        target3 = 400-i;
        target4 = 400 - (i+100);
        
        //マウスのY座標を50~0~50の値に変換
        eWidth2 = abs(map(mouseY, i, i+100, -50, 50))-50;
        eHeight2 = abs(map(mouseY, i, i+100, -50, 50))-50;
        
      }
    }
  }


  //100ピクセル感覚で円を描画
  for (int i = 0; i <= width; i+=100) {
    for (int k = 0; k <= height; k+= 100) {
      
      //フラグごとに円を描画していく
      if (target == i) {
        ellipse(i, k, eWidth, eHeight);
        ellipse(i, k, eHeight, eWidth);
      } else {
        ellipse(i, k, 5, 5);
        ellipse(i, k, 5, 5);
      }

      if (target2 == i) {
        ellipse(i, k, eWidth, eHeight);
        ellipse(i, k, eHeight, eWidth);
      } else {
        ellipse(i, k, 5, 5);
        ellipse(i, k, 5, 5);
      }

      if (target3 == k) {
        ellipse(i, k, eWidth2, eHeight2);
        ellipse(i, k, eHeight2, eWidth2);
      } else {
        ellipse(i, k, 5, 5);
        ellipse(i, k, 5, 5);
      }
      if (target4 == k) {
        ellipse(i, k, eWidth2, eHeight2);
        ellipse(i, k, eHeight2, eWidth2);
      } else {
        ellipse(i, k, 5, 5);
        ellipse(i, k, 5, 5);
      }
    }
  }
}

void mouseMoved() {
  isMoved = true;
}