トレイルトップに戻る    印刷する

図形を動かす

描いた図形の大きさあるいは位置を画面上で変化させてみます。 少しずつ変化させながら、描画を繰り返すことで、アニメーションのように図形が動きます。動きのあるプログラムとなるので、Activeモードでプログラムを書きます。

大きさを変える

リスト1-1(円をひとつ描く例)を変更して、だんだん円の直径が大きくなるようにします。 画面の大きさを250X250とし、その中央に円を描きます。 setup()関数内に画面の大きさ設定など1度だけ実行する処理を書き、draw()関数内に、円を描く命令を書きます。 円を画面の中央に描く関数は次の通りですが、このままでは円の大きさは定数(固定)なので、変化しません。
ellipse(width/2, height/2, 10, 10);
widthとheightはprocessingがあらかじめ定義している変数で、それぞれ画面の幅と高さが格納されています。ここで、width/2の代わりに125としても同じですが、 定数を使っていると、画面の大きさが変わった時にここも変更する必要があります。width/2と書いておくと常に幅の中央の位置に描画されるので、便利です。

変化させる円の大きさを定数ではなく、変数を使って指定します。例えば変数名をdとすると、次のように整数の変数dとして宣言します。
int d = 10;  // 初期値は10
変数の宣言はdraw()関数の前に書きます。 そして、draw()関数の中で、その値を少しずつ増やします。
d = d + 1; // dに1を加える
ellipse(width/2, height/2, d, d);
draw()関数は1分間に60回(デフォルトのフレームレート)実行され、そのたびにdの値が1ずつ増え、結果、円がだんだん膨らんで見えます。ただ、このままだと、円の大きさが画面いっぱいとなると、円が見えなくなるので、dの値が幅の大きさを越えたら、最初の大きさ10に戻るようにしておきます。
if (d >= width) { d = 10; }
ある条件となったら(dの値がwidth以上になったら)、ある処理(dを10にする)のような処理を書くには、条件分岐のためのif文を使います。ここはその条件になった時だけ処理をするので、書き方1を使っています。

Your browser does not support the canvas tag.

クリックで開始⇔停止
【リスト2-1】
int d = 10;

void setup() {
  size(200, 200);
}
void draw() {
  background(255);
  d = d + 1;
  ellipse(width/2, height/2, d, d);
  if (d >= width) { d = 10; }
}

右側の四角の中に示される実行例では、四角内をクリックするとスタートし、もう一度クリックすると止まるように作ってあります。デフォルトでの色(線が黒、塗りが白)で円が描かれますが、重なって描かないように、1回円を描くごとに、画面を白く塗っています。それをしているのが、background(255)です。255はグレースケールでの最大値で、白を表します。

位置を変える

円を描く位置を変更して、円が画面の左から右へ動くようにしてみまよう。円のx座標の位置を変えるように、リスト2-1を書きなおします。 x座標の位置を格納する変数として、xを宣言します。変数名はその変数の意味が分かりやすいものにします。リスト2-2では、変数の宣言の時に、初期値を設定していませんが、その場合デフォルトでゼロとなります。
xはゼロから1ずつ増加し、if文によって、250以上になったら0が代入され、左から再び現れるように見えます。

Your browser does not support the canvas tag.

クリックで開始⇔停止
【リスト2-2】
int x;

void setup() {
  size(250, 125);
}
void draw() {
  background(255);
  x = x + 1;
  ellipse(x, height/2, 10, 10);
  if (x >= width) { x = 0; }
}

セクション[線を描く・動かす…Processing入門]で示した線が左から右へ動くプログラム と同じですが、こちらは線を右から再び出すのに、if文ではなく、250で割った余りを計算することで、xの値が0から249の間の数字を循環するようにしています。このように、プログラムでは、やりたいことに対しての書き方は一つではなく、複数あり、その時々に合わせて適切な方法を選択します。

演習問題


Your browser does not support the canvas tag.

クリックで開始⇔停止
【問題2-1】練習問題1-2の10行10列に整列した100個の円の大きさが徐々に大きくなっていくようにしてみましょう。

重なる円の線がよくわかるように、円の塗りつぶしをなくして(noFill())、線だけを描きます。円が膨張していく線の重なりを楽しむためにフレームレートを10とし(frameRate(10))、また円の大きさの最大値を画面の幅の2倍とし、それを超えたら円の大きさを10に戻します。


Your browser does not support the canvas tag.

クリックで開始⇔停止
【問題2-2】練習問題2-1で、100個の円の大きさが徐々に大きなり、最大値を画面の幅の2倍を超えたら、徐々に小さくなっていくように変更してください。小さくなり大きさがゼロになったら、徐々に大きくなり、それを繰り返します。


Your browser does not support the canvas tag.

クリックで開始⇔停止
【問題2-3】リスト2-2は円のy座標は変化せず、x座標だけが一定の大きさずつ増え、結果として水平線上を移動しました。x、y座標それぞれを計算によって指定すれば、どの位置への移動もできます。例えば円周上を移動する場合にはx、y座標を三角関数を使って計算します。【リスト 三角関数:円周上を移動】にその例があります。

半径rの円周上を円が移動し、その軌跡を残すプログラムです。aは時計の3時の位置を0度とした時計回りの角度(度単位)です。
  x = r * cos(radians(a));
  y = r * sin(radians(a)); 
このプログラムを変更し、左図のようならせん上を円が移動するプログラムを作ってください。rの値も角度の変化に伴い、 r = 3.0 * radians(a); のように変化させます。3.0は係数で、この値を大きくすると、らせんの広がりが大きくなります。

arigat アットマーク acm.org / copyright © info