Processing.jsによるHTML5 Canvasグラフィック (3/5)
作成:2010-04-26 19:00
更新:2010-12-12 21:30
更新:2010-12-12 21:30
■アニメーションして動かす
Processingの魅力は、単に「図形が簡単に描ける」ということではありません。単に表示するだけでなく、アニメーションを簡単に作成できる点にあります。Processingでは、「フレームレート」というものが設定でき、これにより一定時間ごとに表示を再描画させることができるのです。
フレームレートの設定は、「frameRate( 再描画数 )」という形で呼び出します。引数に数値を指定すると、１秒間に指定の回数だけグラフィックを再描画します。再描画は、Processingに用意された「draw」というメソッドによって行われます。すなわち、frameRateを指定すると、その回数だけdraw関数が呼び出され、描画が行われる、というわけです。
下に、簡単なアニメーションのサンプルを掲載しておきます。ページを表示すると、100個のランダムに配置された円が、それぞれ自由な方向に動きまわります。
ここでは、円の横位置・縦位置・横の移動幅・縦の移動幅・塗りつぶし色といった情報を保管するため、あらかじめ100個の要素を保管できる配列を用意しています。配列は、
また、ここでは色を設定するのにcolorというタイプの値を使っていますが、これは以下のようにして値を用意します。
フレームレートの設定は、「frameRate( 再描画数 )」という形で呼び出します。引数に数値を指定すると、１秒間に指定の回数だけグラフィックを再描画します。再描画は、Processingに用意された「draw」というメソッドによって行われます。すなわち、frameRateを指定すると、その回数だけdraw関数が呼び出され、描画が行われる、というわけです。
下に、簡単なアニメーションのサンプルを掲載しておきます。ページを表示すると、100個のランダムに配置された円が、それぞれ自由な方向に動きまわります。
ここでは、円の横位置・縦位置・横の移動幅・縦の移動幅・塗りつぶし色といった情報を保管するため、あらかじめ100個の要素を保管できる配列を用意しています。配列は、
タイプ[] 変数名 = new タイプ[ 要素数 ];このように実行して作成します。これらの配列は、関数外で宣言していますので、グローバル変数として扱われることになり、Processingのどの関数からも呼び出すことができるようになります。
また、ここでは色を設定するのにcolorというタイプの値を使っていますが、これは以下のようにして値を用意します。
color( 赤, 緑, 青 )透過度を指定したい場合は、第４引数にアルファチャンネルの値を指定することができます。このcolorの値は、そのままfillやstrokeで引数に使うことができます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※sample.pjsのスクリプト
float[] w = new float[100];
float[] h = new float[100];
float[] dw = new float[100];
float[] dh = new float[100];
color[] c = new color[100];
void setup(){
size(250,250);
frameRate(20);
strokeWeight(1);
stroke(0,0,0,50);
for(int i = 0;i < 100;i++){
w[i] = random(250);
h[i] = random(250);
dw[i] = random(11) - 5;
dh[i] = random(11) - 5;
c[i] = color(random(250),random(250),random(250),100);
}
}
void draw() {
background(255);
for(int i = 0;i < 100;i++){
w[i] += dw[i];
h[i] += dh[i];
if (w[i] < 0 | w[i] > 250) dw[i] *= -1;
if (h[i] < 0 | h[i] > 250) dh[i] *= -1;
fill(c[i]);
ellipse(w[i],h[i],25,25);
}
}
※関連コンテンツ