図形が描画できるようになったので、次は動く図形に挑戦です。パラパラ漫画の原理でdraw関数が１回呼び出されるごとに１コマ分の絵を描きます。
ボール（円）が画面の左端から右端へ移動する絵を描くプログラムを書いてみました。
float x = 0;
// セットアップ
void setup()
{
// 画面のサイズ
size( 320, 240 );
}
// 描画
void draw()
{
// x座標が画面幅に到達するまで
if( x <= width){
x++; // x座標をインクリメント
}
// 円を描く
ellipse(x, 100, 50, 50);
}実行結果
なんか残像がたくさん残ります(^-^;
実はdraw関数で描画する際、前回の描画結果が残っている為、このような表示になります。このため、パラパラ漫画として１コマずつ円の位置をずらして描くには、前回の描画内容を消す必要があります。
というわけで、background関数で前回の描画を消去するよう改善。
float x = 0;
// セットアップ
void setup()
{
// 画面のサイズ
size( 320, 240 );
}
// 描画
void draw()
{
// 背景を白で塗る
background( 255, 255, 255 );
// x座標が画面幅に到達するまで
if( x <= width){
x++; // x座標をインクリメント
}
// 円を描く
ellipse(x, 100, 50, 50);
}実行結果
丸が右に動いているパラパラ漫画が作れました。でも背景も丸も白いので味気ないですね。
次のプログラムでは丸に色を付けてみました。
float x = 0;
// セットアップ
void setup()
{
// 画面のサイズ
size( 320, 240 );
}
// 描画
void draw()
{
// 背景を白で塗る
background( 255, 255, 255 );
// x座標が画面幅に到達するまで
if( x <= width){
x++; // x座標をインクリメント
}
// 塗りつぶしの色を指定
fill( 0, 255, 0, 255 );
// 円を描く
ellipse(x, 100, 50, 50);
}実行結果
なんかボールが動いているように見えますね。これで良しとしましょう。
なお、背景色や塗りつぶしの色は、RGB値で指定します。
たとえば、
background( 255, 100, 0 );
の場合、赤255、緑100、青0 を混ぜて色を作ります。
つぎは塗りつぶしについて。
今回のサンプルプログラムでは円の中を塗りつぶす色の指定にfill関数を使いました。
fill( 0, 255, 0, 255 ); // 赤0、緑255、青0、？255
関数の引数をみると、background関数より一つ多いです。実はfill関数はRGB以外にアルファ値も指定できます。アルファ値は透明度で、255なら不透明、0なら透明、中間の値なら度合いに合わせて半透明になります。
サンプルプログラムを改造して色々遊んでみてくださいね。