float eSize = 0;  //オブジェクトのサイズ(スムーズに変化させるためにfloatを使用)
float eSizeTarget = 0;  //オブジェクトのサイズとして目指す数値
float x = 0;  //オブジェクトのx座標
float xPrev = 0;  //1フレーム前のマウスのx座標
float xTarget = 0;  //オブジェクトのx座標として目指す数値
float y = 0;  //オブジェクトのy座標
float yPrev = 0;  //1フレーム前のマウスのy座標
float yTarget = 0;  //オブジェクトのy座標として目指す数値
float slider = 1.0;  //オブジェクトの反転座標と現在のマウス座標との差(0.0-1.0)

float progress = 0;

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);      //オブジェクトは黒
   */

  float cx = width/2;  //画面中央のx
  float cy = height/2;  //画面中央のy

  float sideLength = 100;  //一辺の長さ

  float x = 0;  //x指定用変数
  float y = 0;  //y指定用変数
  float size = 50;  //円のサイズ
  
  //画面中央から一辺の長さの1/2戻ったところから、progress変数を一辺の長さで剰余した値をたす
  x = progress%sideLength + cx - sideLength/2;  
  //yは固定
  y = cy - sideLength/2;
  ellipse(x, y, size, size);

  //以下、上記の展開
  x = cx + sideLength/2;
  y = progress%sideLength + cy - sideLength/2;
  ellipse(x, y, size, size);

  x = cx + sideLength/2 - progress%sideLength;
  y = cy + sideLength/2;
  ellipse(x, y, size, size);

  x = cx - sideLength/2;
  y = cy + sideLength/2 -progress%sideLength;
  ellipse(x, y, size, size);
}

void mouseMoved() {
  progress += 6.0;
}