フレームループを行うために必要な関数
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にすることで、円が重なっているところが白くなります。特にこの場合は中心が白くなります。