p5.jsでwebページにアニメーションを作ろう - 08 オブジェクト

2016/09/12 2016/09/15

こんにちは、人間の僕です。（"株式会社人間"様とは無関係です）
前回に引き続きp5.jsでアニメーションを作る方法について解説してきます。
今回は"オブジェクト"です。

オブジェクト？

p5.jsでは（そしてjavascriptでは）オブジェクトとは、いわゆる連想配列のことです。
連想配列という言葉をご存じの方は「へぇ、連想配列なんだ」と思っておいていただければよいですし、そうでない方にはこれから解説しますので気にしなくても大丈夫です。

オブジェクト（連想配列）というのは、１つの変数の中に"キーワード"と"値"をペアでセットにして格納しておける形式のことです。
例えば、FruitColorというオブジェクトがあったとして、その中にappleというキーでredという値と、bananaというキーでyellowという値を格納したいとします。その場合には

FruitColor = { apple: red, banana: yellow };

のようにしてやります。
そして、取り出す時には

var a = FruitColor.apple;
としてやればOKです。

また、この値の部分には前回ご紹介しましたfunctionを格納する事も出来ます。

 FruitColor = {
    apple: red,
    banana: yellow,
    getAppleColor: function(){
      return this.apple;
    }
  }

こんな風にして、getAppleColorというキーの値に function(){ }が入っています。すると、

var n = FruitColor.getAppleColor();

というような形で、そのオブジェクトの中のfunctionを使うことが出来ます。
もちろんこのfunctionにも引数や返り値を持たせることも出来ますし、
this.キー名
とする事でそのオブジェクト自身が持っているキーの値にもアクセスすることが出来ます。

なんとなく便利そうなのはわかったけど、何に使うの？

オブジェクトにオブジェクト（物体）という名前が付いているのは偶然ではありません。

今回作りたいもの（カラフルな円が上から右に向かって沢山落ちてくる）の、この円１つ１つをオブジェクトとして扱います！

ここ、今回の記事の最も重要なところなのでちょっと集中してくださいね。
第6回の時にお見せしたコードの中の、オブジェクトを作っている部分がこちら。


function Ball(_x, _y, _xSpeed, _ySpeed) {
  
  var b = {
    x: _x,
    y: _y,
    xSpeed: _xSpeed,
    ySpeed: _ySpeed,
    h: random(255),
    
    disp: function() {
      fill(this.h,255,255);
      noStroke(0);
      ellipse(this.x,this.y,25,25);
    },
    move: function(){
      this.x += this.xSpeed;
      this.y += this.ySpeed;
    },
    end: function(){
      var e = false;
      if(this.x > width | this.x < 0 | this.y > height | this.y < 0){
        this.e = true;
      }
      return this.e;
    }
  }
  return b;
}

Ballというfunctionを作って、その中でbという変数にオブジェクトを格納して、ガシガシキーと値を追加していっています。
第6回で見た時にはさっぱりわからなかったと思いますが、多分今見ればそこそこ何をやっているのかわかるのではないでしょうか？

上から順番に、
var bでbという名前の変数を宣言し、{ から先はオブジェクトの内容。
xというキーに、Ballという名前のfunctionで受け取った値を格納、
y、xSpeed、ySpeedも同様です。hだけはランダムな値を格納しています。

そして、dispは、色を指定して円を書くためのfunctionです。
moveは移動するための、そしてendは円が画面の外側に出たかどうかを判定するためのfunctionです。

オブジェクトはわかった。で、それをどうやって使ってるの？

では、第6回の時の例の、draw(){ }の中身を今一度御覧ください。

function draw() {
  background(0);
  if(frameCount % 10 == 0){
    balls.push(Ball(random(width),0,random(3),random(4)));
  }
  
  for(var i = balls.length - 1; i > 0; i--){
    balls[i].disp();
    balls[i].move();
    if(balls[i].end()){
      balls.splice(i, 1);
    }
  }
  
}

まだ出てきていない要素のforがありますが気にしないでください。
第1回の時にお伝えした通り、p5.jsでは draw(){ }の中が高速で1秒間に何度も実行されます。（60回を目指しています）
background(0);は画面を黒く塗っているだけです。
その次のif文で、frameCountという予約語が出てきています。
このframeCountは、今drawの中を何回実行したか、という数が格納されています。
秒間60回実行されるとすると、frameCountの数も60ずつ増えるので、1分で360、10分で3600になります。
で、そのframeCountを % 10（10で割った余りを出す）してやると、10の倍数の時だけ0になります。
そこで、
if(frameCount % 10 == 0){ }
としてやることによって、{ }の中が10フレームに1回、つまり約1秒に3回実行されます。
{ }の中で何が起こっているかというと、前回ご紹介した配列に「.push」を使って、Ballを実行した時に返ってくるオブジェクトを代入していっています。
つまり、1秒に3個ずつ、オブジェクトが配列に突っ込まれていっているのです。
それで、円がどんどん上から降ってくる、というわけです。