p5jsトップに戻る    印刷する

図形を動かす

描いた図形の大きさあるいは位置を描画領域上で変化させてみます。 少しずつ変化させながら、描画を繰り返すことで、アニメーションのように図形が動きます。変化する部分は、draw関数の中に書きます。

大きさを変える

リスト1-1(円をひとつ描く例)を変更して、だんだん円の直径が大きくなるようにします。 画面の大きさを250X250とし、その中央に円を描きます。 setup()関数内に画面の大きさ設定など1度だけ実行する処理を書き、draw()関数内に、円を描く命令を書きます。 円を画面の中央に描く関数は次の通りですが、このままでは円の大きさは定数(固定)なので、変化しません。

ellipse(width/2, height/2, 10, 10);

widthとheightはp5.jsがあらかじめ定義している変数で、それぞれ画面の幅と高さが格納されています。ここで、width/2の代わりに125としても同じですが、 定数を使っていると、画面の大きさが変わった時にここも変更する必要があります。width/2と書いておくと常に幅の中央の位置に描画されるので、便利です。

変化させる円の大きさを定数ではなく、変数を使って指定します。例えば変数名をdとすると、次のように整数の変数dとして宣言します。

var d = 10;  // 初期値は10

変数の宣言はdraw()関数の前に書きます。 そして、draw()関数の中で、その値を少しずつ増やします。

d = d + 1;  // dに1を加える
ellipse(width/2, height/2, d, d);

draw()関数は1分間に60回(デフォルトのフレームレート)実行され、そのたびにdの値が１ずつ増え、結果、円がだんだん膨らんで見えます。ただ、このままだと、円の大きさが画面いっぱいとなると、円が見えなくなるので、dの値が幅の大きさを越えたら、最初の大きさ10に戻るようにしておきます。

if (d >= width) { d = 10; }

ある条件となったら(dの値がwidth以上になったら)、ある処理(dを10にする)のような処理を書くには、条件分岐のためのif文を使います。

【リスト2-1】
var d = 0; 

function setup() {
  createCanvas(250, 250);
}

function 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では、変数の宣言の時に、初期値を0とし、左端から円が現れます。
xはゼロから１ずつ増加し、if文によって、250以上になったら0が代入され、左から再び現れるように見えます。

【リスト2-2】
var x = 0;

function setup() {
  createCanvas(250, 125);
}

function draw() {
  background(255);
  x = x + 1;
  ellipse(x, height/2, 10, 10);
  if (x >= width) { x = 0; }
}

xの値が描画域の幅250以上になったら、再びxを0として、左端に円を移動しています。

演習問題

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

重なる円の線がよくわかるように、円の塗りつぶしをなくして(noFill())、線だけを描きます。円が膨張していくスピードはフレームレートを指定することで、調整できます。デフォルトでは1秒に60回描画されるので、これをframeRate(30)とするとゆっくりになります。また円の大きさの最大値を画面の幅の2倍とし、それを超えたら円の大きさを10に戻します。

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

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

半径rの円周上を円が移動し、その軌跡を残すプログラムです。aは時計の3時の位置を0度とした時計回りの角度(度単位)です。

  x = r * cos(radians(a));
  y = r * sin(radians(a)); 

このプログラムを変更し、左図のようならせん上を円が移動するプログラムを作ってください。らせんの場合、半径rの値が角度の変化に伴い、変化します。この式 r = 3.0 * radians(a); でrの値を計算します。3.0は係数で、この値を大きくすると、らせんの広がりが大きくなります。試してみてください。