float eSize = 40;  //オブジェクトのサイズ
float x = 0;  //オブジェクトのx座標
float y = 0;  //オブジェクトのy座標

void setup(){
  size(400, 400);
}

float frame = 0;  //フレームを数えるための変数
float direction = 1;  //動きの方向

void draw(){
  
  background(255);
  
  //軌跡を残す場合は、下の3行をON、backgoundをOFFにする
  /*
  fill(255, 50);  //透明度のあるrectを描画
  rect(0, 0, width, height);
  fill(0);      //オブジェクトは黒
  */
  
  
  //フレームを動かす。 60を越えるときは方向を変え、0に戻るようにする。
  frame += direction;
  if(frame > 60){
    frame = 60;
    direction = -1;
  }
  if(frame <= 0){
    frame = 0;
    direction = 1;
  }
  
  
  // 塗り黒、線なし。
  noStroke();
  fill(0);
  
  x = width / 2.0;  //xは画面中央で固定
  
  if(frame < 30){
    
    float progress = (frame / 30.0); //frameが0-30になるときに、0-1.0に変化するようにする。
    float progressInverted = 1.0 - progress; //0-1.0と1.0-0をひっくり返す。
    float curve = progress * progress;  //progressを掛け合わせて、加速度を作る。
    float curveInverted = progressInverted * progressInverted;  //同上
    y = curve * 250 - 50;
    eSize = 50 + curveInverted * curveInverted * 1200;
  }else{
    float progress = ((frame - 30) / 30.0); //frameが31-60になるときに、0-1.0に変化するようにする。
    float progressInverted = 1.0 - progress; //0-1.0と1.0-0をひっくり返す。
    float curve = progress * progress;  //progressを掛け合わせて、加速度を作る。
    float curveInverted = progressInverted * progressInverted;  //同上
    
    y = (1 - curveInverted) * -250 + 200;
    eSize = 50 + (1 - curveInverted) * - 40;
  }
  
  ellipse(x, y, eSize, eSize);
  
}