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

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

float frame = 0;

void draw(){
  
  background(255);
  
  //軌跡を残す場合は、下の3行をON、backgoundをOFFにする
  /*
  fill(255, 50);  //透明度のあるrectを描画
  rect(0, 0, width, height);
  fill(0);      //オブジェクトは黒
  */
  
  //フレームカウントを1上げる。60を越える場合は0に戻す。
  frame += 1.0;
  if(frame > 60){
    frame = 0;
  }
  
  
  //塗り黒、線なし。
  noStroke();
  fill(0);
  
  x = width / 2.0;  //xは画面中央で固定
  
  if(frame < 30){ //フレームが30以下の場合
    float progress = (frame / 30.0); //frameが0-30になるときに、0-1.0に変化するようにする。
    float curve = progress * progress;  //progressを掛け合わせて、加速度を作る。
    // [POINT] 0-1.0の値を何回掛け合わせても、最大値は1.0 * 1.0 = 1.0となって安定するので常用するテクニック。
                          
    y = curve * 250 - 50;  //画面外から中央(200)までyを移動させる。
  }else{
    float progress = ((frame - 30) / 30.0); //frameが31-60になるときに、0-1.0に変化するようにする。
    float curve = progress * progress;  //progressを掛け合わせて、加速度を作る。
    y = curve * curve * 250 + 200;  //画面中央から外までyを移動させる。
  }
  
  ellipse(x, y, eSize, eSize);
  
}