float x = 0;  //オブジェクトのx座標
float y = 0;  //オブジェクトのy座標
float xPressed = 0;  //マウスが押された時のマウスポインタのx座標
float yPressed = 0;  //マウスが押された時のマウスポインタのy座標
float xIncrement = 0;  //x座標の増加量
float yIncrement = 0;  //y座標の増加量

void setup() {
  size(400, 400);
  noStroke();   //線ナシ
  fill(0);      //塗り黒
}

void draw() {
  background(255);

  // 軌跡を残す場合は、下の3行をON、backgoundをOFFにする
  /*
  fill(255, 50);  //透明度のあるrectを描画
   rect(0, 0, width, height);
   fill(0);      //オブジェクトは黒
   */

  for (int i=-1; i<22; i++) {  //22回繰り返し
    for (int j=-1; j<22; j++) {  //22回繰り返し
       
      float ex = i*20 + x;  //円描画用xは、-20,0,20,40...にそれぞれxを足したもの
      float ey = j*20 + y;  //円描画用yは、-20,0,20,40...にそれぞれxを足したもの
      float es = ey/40.0 + 2;  //円のサイズは円のy位置に応じて大きくする　ただし最小サイズは2
      ellipse(ex, ey, es, es);
    }
  }

  x += xIncrement;  //xを増加させる
  y += yIncrement;  //yを増加させる
  
  //xが0-20の範囲からはみ出しそうになったらその範囲内に収める。
  if (x >= 20) {  
    x = x%20;  
    //例えば12->15->18時て21になってしまった場合そのまま0に戻すと
    //12-(3)->15->(3)->18-(2)->0となり、がくがくとなってしまう。
    //それを避けるためには、18に3を足し、20からはみ出た分だけを再び0から足すべき。
    //12-(3)->15->(3)->18-(3)->1　こうするため、
    //21%20にすれば、1をゲットすることができる。
  } else if (x <= 0) {
    x = 20 + x%20;
  }
  
  //xと同様
  if (y >= 20) {
    y = y%20;
  } else if (y <= 0) {
    y = 20 + y%20;
  }
}

void mousePressed() {
  xPressed = mouseX;  //マウスボタンが押された位置を記録
  yPressed = mouseY;
  xIncrement = 0;  //移動をストップ
  yIncrement = 0;
}

void mouseReleased() {
  xIncrement = (mouseX - xPressed)/40.0;  //現在のマウス位置からボタンが押された時のボタン位置を
  yIncrement = (mouseY - yPressed)/40.0;
}