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

大きさや色が変化する

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

大きさを変える

リストT1-1-1(円をひとつ描く例)を変更して、直径がだんだん大きくなり、一定の値まで大きくなったら小さくなるようにします。
円の直径を指定する変数dを用意し、dの値をdraw()の中で変化させます。円の位置(35, 35)はこの例では変化しないので、それぞれ定数変数xとyに入れておきます。 draw()の中で次のように書けば、円の直径は1ずつ増え、描かれる円の大きさが大きくなります。

d = d + 1; // dに1を加える
ellipse(x, y, d);

ただ、これでは大きくなる一方向です。直径dが一定の大きさ(max)になったら、変化量をマイナス１にして、円が小さくなるようにします。また、円の直径がゼロ未満になったら、今度は変化量をプラス１に変えます。つまり、変化量を入れる変数henkaの値を条件によって、切り替えます。

デフォルトではdraw()は1秒間に60回実行されます(フレームレート60)が、それでは動きが早くて目まぐるしいので、frameRate(10)としてゆっくり変化させています。

【リストT1-3-1】
const x = 35;
const y = 35;
const max = 30;
let d = 0;
let henka = 1;
function setup() {
  createCanvas(250, 250);
  noStroke();
  fill(0);
  frameRate(10);  //ゆっくり変化させるためフレームレートを10にする
}
function draw() {
  background(220);
  if (d>=max || d<0) {  //直径がmax以上になった時、または負になった時
    henka = -henka;     //変化量の正負を入れ替える
  }
  d = d + henka;
  ellipse(x, y, d);
}

右側の四角の中に示される実行例では、四角内をクリックすると動きが止まり、もう一度クリックするとスタートするように作ってあります。

塗り(透明度)を変える

リストT1-3-1では円の大きさを変更しましたが、今度は円の塗りを徐々に変えてみよう。透明度を0から255まで変化させます。
大きさを変えた例と同様に、最小値0と最大値255の間を繰り返し変化させるため、変化量の正負を条件に応じて、反転させます。

【リストT1-3-2】
const x = 35;
const y = 35;
let d = 20;
let alpha = 255;
let henka = 2;
function setup() {
  ..... // リストT1-3-1と同じ
}
function draw() {
  background(220);
  //透明度が255以上になった時、または負になった時
  if(alpha >= 255 || alpha < 0){
     henka = -henka;  //変化量の正負を入れ替える
  }
  alpha = alpha + henka;
  fill(0, alpha);
  ellipse(x, y, d);
}

演習問題

【問題T1-3-1】練習問題T1-1-2の10行10列に整列した100個の円の大きさが、リストT1-3-1のように繰り返し変化するようにしてみよう。

【問題T1-3-2】練習問題T1-1-2の10行10列に整列した100個の円の透明度が、リストT1-3-2のように繰り返し変化するようにしてみよう。

【問題T1-3-3】リストT1-2-3を変更し、2つのデータを表す円の大きさが交互に変化するようにしてみよう。まず、赤の円の大きさだけを変化させてみて、その後黒い円も変化させるように考えよう。

【問題T1-3-4】リストT1-2-3を変更し、円がひとつずつ順番に大きくなるようにしてみよう。100個の円の大きさが全部最大になったら、円の大きさを0に戻し、繰り返すようにしよう。
円の大きさが個別に違うので100個分の円の大きさを覚えておく必要があります。要素の数が100個の配列を用意し、そこに個々の円の直径を入れておきます。まず、setup()関数の前で、配列の変数を定義します。

let diameter = [];

そして、setup()関数の中で、配列の100個の要素を0にします。

for (let i = 0; i < 100; i++) {
   diameter[i] = 0;  // 0 で初期化
}