配列を使って多くの図形を動かしてみよう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター21つのボールが反射させよう

2. 1 このレッスンの目標

前のレッスンでは、配列を使った場合と使わなかった場合を比較しながら、配列の基本を学びました。このレッスンでは、配列を使って、100個のボールを配列を使って学ぶことを目標とします。

2. 2 写してみよう

//ボールの半径と位置
var col;
var radius;
var bx;
var by;

//ボールのスピード
var bvx;
var bvy;

function setup() {
  createCanvas(400, 400);
  noStroke();
  
  //ボールの初期値
  col = color(random(255), random(255), random(255));
  radius = int(random(20,40));
  bx = random(radius, width - radius);
  by = random(radius, height - radius);
  bvx = random(-5,5);
  bvy = random(-5,5);
}

function draw() {
  background(220);
  fill(col);
  
  //ボールの描画
  ellipse(bx, by, radius, radius);
  bx += bvx;
  by += bvy;
  
  //ボールの左右反射
  if(bx<=radius || bx >= width - radius){
    bvx *= -1
  }
  
  //ボールの上下反射
  if(by<=radius || by >= height - radius){
    bvy *= -1
  }

}

コードが書けたら実行してみましょう。次のように、ボールが反射しているアニメーションになっていればOKです。

2. 3 コードの解説

これまでと同じように、位置に速度を足して1フレームごとのアニメーションをつくっています。
反射の処理で注意すべきことは、height-widthやheight-radiusのように、右や下の反射条件の端を半径分引いていることです。

チャプター3配列に書き換えて100個のボールを反射させよう

3. 1 変更しよう

使われている変数を配列に変えて、それぞれの配列に100個の変数を持たせます。基本的には、変数の後ろに[i]を書き換えていくだけです。（宣言するときは[]でOKです）。さらに、配列に変数を100個代入するためのfor文を書き加えてください。

//ボールの半径と位置
+ var col = [];
+ var radius = [];
+ var bx = [];
+ var by = [];

//ボールのスピード
+ var bvx = [];
+ var bvy = [];

function setup() {
  createCanvas(400, 400);
  noStroke();
  
  //ボールの初期値
+   for(i=0;i<100;i++){
+   col[i] = color(random(255), random(255), random(255));
+   radius[i] = int(random(20,40));
+   bx[i] = random(radius[i], width - radius[i]);
+   by[i] = random(radius[i], height - radius[i]);
+   bvx[i] = random(-5,5);
+   bvy[i] = random(-5,5);
  }
}

function draw() {
  background(220);
  
+   for(i=0;i<100;i++){
+   fill(col[i]);
  
  //ボールの描画
+   ellipse(bx[i], by[i], radius[i], radius[i]);
+   bx[i] += bvx[i];
+   by[i] += bvy[i];
  
  //ボールの左右反射
+   if(bx[i]<=radius[i] || bx[i] >= width - radius[i]){
+     bvx[i] *= -1
  }
  
  //ボールの上下反射
+   if(by[i]<=radius[i] || by[i] >= height - radius[i]){
+     bvy[i] *= -1
+  }
    
  }

}

コードが変更できたら実行してみよう。100個のボールが反射する次のようなアニメーションになっていればOKだよ。

チャプター4チャレンジしよう

配列を使った、大量の図形を少ない記述で動作させよう。前回つくった円の拡大縮小のアニメーションを100個の円で実現してみましょう。

4. 1 完成形

次の見本を参考に、自分でコードを書いてみよう。

ヒント

• 使っている配列は次の通りです

//円の最小サイズと最大サイズ
var minSize = 30;
var maxSize = 60;

//円のサイズと位置、拡縮のスピード配列
var eSize = [];
var ePx = [];
var ePy = [];
var esp = [];

• 円の拡大縮小の処理は、minSizeとmaxSizeになった場合にespをマイナス1倍させることで実現できます

• 色分けの方法は配列のi番目のiを3で割ったあまりi%3を活用して分けています。