回転の概要

前回物体を直線にアニメーションさせました。今回は物体を回転させてみましょう。 物体を回転させるのも移動と同じで、物体の位置を少しずつ加算して動かしているだけです。 前回は1ループごとにXとYを+1、-1していましたが、今回は角度を1ループごとに10度ずつ増加させます。 以下にプログラムを記述します。実行してみてください。

//グローバル変数
float X,Y;
float Cx=100, Cy=100;
float Angle = 0;
float R = 50;
int c = 0;


//初期化
void setup(){
   size(200,200);
   colorMode(HSB,100);
   background(99);
   frameRate(10);
}


void draw(){
   //関数呼び出し
   fade();

   //角度を10度ずつ増加させる
   Angle = Angle + 10;

   //角度を度からラジアンに変換させる
   X = Cx + ( R * cos(radians(Angle)) );
   Y = Cy + ( R * -sin(radians(Angle)) );

   //cが99になるとリセットする
   if(c >= 99){
      c = 0;
   }

   //色(HSB)
   c = c + 3;

   noStroke();
   //1周ごとに色変化
   fill(c,99,99);

   //図形を描く
   rectMode(CENTER);
   rect(X, Y, 10, 10);
}


//画面リセット用の関数
void fade(){
   noStroke();
   fill(99,30);
   rectMode(CORNER);
   rect(0, 0, 200, 200);
}

【結果】

それでは順番に説明していきます。 グローバル変数では7個の変数を宣言しています。 X、Yは物体の座標値、Cx、Cyは物体を回転させる基準となる円の中点、 Angleは角度、Rは半径になります。cは色を変更するための変数ですが、 これは必ずしも必要ではありません。それぞれの変数をわかりやすく図で説明します。

//グローバル変数
float X,Y;
float Cx=100, Cy=100;
float Angle = 0;
float R = 50;
int c = 0;

図のように物体は指定した円の中点から角度の位置に描かれます。 角度は度ではなく、ラジアンで表記します。以下がプログラム上で角度を決める部分になります。

//角度を10度ずつ増加させる
Angle = Angle + 10;

//角度を度からラジアンに変換させる
X = Cx + ( R * cos(radians(Angle)) );
Y = Cy + ( R * -sin(radians(Angle)) );

Angleでは1ループに0度から10度ずつ角度を傾けています。 それをラジアン変換するのが次の2つの命令です。 ここは三角関数の分野になりますので詳しい説明は省きますが、 ラジアン変換とは度をラジアンというProcessing内で角度を扱える単位に変換することをいいます。 この記述方法は円の回転の場合だと基本的は同じなので、よくわからない人はこのままの記述方法をそのまま覚えれば使えばいいでしょう。 ちなみに-sinをsinにすると物体は逆回転します。深く学びたければ高校の数学で三角関数を学びましょう。

//cが99になるとリセットする
if(c >= 99){
c = 0;
}
//cは色(HSB)
c = c + 3;

上記は色の設定になっています。毎ループHSBのHの値を+3ずつ上げています。 これを物体の塗り設定で使用します。 HSBは上限を100にしているため、cの値が100以上になるとずっと同じ色になってしまいます。 そのためcの値が99になるとif文を使い、一度色を0にリセットしているわけです。

//図形を描く
rectMode(CENTER);
rect(X, Y, 10, 10);

ラジアン変換した角度座標を示すXとYを四角形の座標にして、10×10の図形を描いています。
残りのプログラム及び説明していない部分については前回と全く同じです。 いかがでしたか?よくわからない点があっても大丈夫です。無理に全部覚えようとせず、作りながら少しずつ学んでいくのが理想的です。

次回内容

今回や前回のようなものは簡単なアニメーションの説明でしたが、 プログラムを追加することで物体の落下運動のような現実同様の運動法則を表現することも可能です。 これを物理シュミレーションといいます。 物理シュミレーションはプログラミングの知識よりも物理の知識が重要です。 大体高校レベルの物理の知識があれば、簡単なものなら作れると思います。 ただし、高度なものだと作成中にどうしても今まで学んだ内容だけだと応用が効かないものも存在します。 「〇〇みたいな処理したいのに、どうすればいいんだろう?」という願望が出てきます。 そういった、要望を答えるのがProcessingのAPIです。 次回はProcessingのリファレンスを読んで、自分で新しい機能を身につける方法を勉強します。

広告