物体を移動させる

左下から右上に移動するアニメーションを作成してみます。 前回学んだ関数、ローカル変数、グローバル変数を使います。 以下にプログラムを記述します。入力して実行してみましょう。

//グローバル変数
float X, Y;

void setup(){
   size(200,200);
   colorMode(HSB,100);
   background(99);
   frameRate(30);

   //位置の初期設定
   X = 0;
   Y = 200;
}


void draw(){
   //画面をリセットする関数を呼び出す
   fade();

   //物体の位置
   X = X + 1;
   Y = Y - 1;

   //描画
   fill(0);
   rectMode(CENTER);
   rect(X, Y, 10, 10);
}


//画面をリセットするオリジナルの関数
void fade(){
   fill(99,30);
   rectMode(CORNER);
   rect(0, 0, 200, 200);
}

最初にグローバル変数でXとYを宣言しておきます。これが物体のXとY座標になります。 そして最初に自動で実行されるsetupで画面サイズや座標値などの設定をしています。 見慣れないframeRateというものがありますが、これは画面の描画速度を設定するものです。 frameRateのカッコの中にある数値を上げると描画速度が速くなります。 もう少し具体的に言うとdraw内のループ速度が速くなります。 メインとなるdrawでは先頭で自分で作成したfadeという関数を呼び出しています。 この関数がどういう役目をになっているかは後述します。

次にXを毎度+1、Yを-1しています。drawは処理下までいくと先頭までいきループします。 これでXとYの値を常時変化させています。このXとYはこの後に描く図形のXとYの座標値になります。 最初は(0、200)に四角形を描き、2回目のループでは(1、199)というように図形は右肩上がりに描かれていきます。

そしてここで先ほど少し説明したfade()関数の説明をします。fadeという関数の中を見てください。

//画面をリセットするオリジナルの関数
void fade(){
   fill(99,30);
   rectMode(CORNER);
   rect(0, 0, 200, 200);
}

fadeでは白色の縦200×横200サイズの四角形を画面全体に描いています。 これで画面をリセットしているわけです。 移動する図形が描かれ、画面をリセットし、再度移動する図形を描く…とループします。 こうすることにより図形が右上に上がっていくように見えます。 透明度を30にしているのは一気に画面を真っ白にして画面をリセットすると移動が不自然に見えるので、 少しずつフェードアウトしているように見せているのです。 よくわからなければ半透明の紙で図形をパラパラ漫画させていると考えればいいでしょう。

広告