Processingで簡単なアニメーションを行う

フレームループを行うために必要な関数

setup()

最初に1度だけ呼び出される関数です。初期化の処理を行います。

draw()

フレームごとに繰り返される関数です。frameRate関数でフレームレートを任意の値に変えることができます。

アニメーションを行う

デモはProcessing.jsを使用

ブラウザ上で実行するにはProcessing.jsを用います。ProcessingをJSに変換し、Canvasに描画します。

Processing.jsについての詳しい解説記事です。
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記

グローバル変数

int diam = 10;
int speed = 5;
float centX,centY;

setup

void setup(){
  size(500,300);
  smooth();
  background(180);
  centX = width / 2;
  centY = height / 2;
  
  stroke(130,0,0);
  strokeWeight(5);
  
  fill(255,50);
}

draw

void draw(){
  if(diam < 0 || diam > 400){
    speed *= -1;
  }
  background(180);
  ellipse(centX,centY,diam,diam);
  diam += speed;
}

speedというフラグを用いて、diamの値を変えています。

軌跡を残す

void draw(){
  if(diam < 0 || diam > 400){
    speed *= -1;
  }
  //background(180);
  ellipse(centX,centY,diam,diam);
  diam += speed;
}

「background(180);」をコメントアウトすることによって、前のフレームレートにそのまま円を描くことにしています。それで軌跡が残るようになります。

fill(255,25);

fillの透明度を25にすることで、円が重なっているところが白くなります。特にこの場合は中心が白くなります。