p5.jsでwebページにアニメーションを作ろう - 06 目標と配列

↑こういうのが作れるようになれば、もう後はアイデア次第で大抵のものが作れてしまいます。
何回かにわけて、これの作り方を解説していきます。

まずはソースコード

var balls = [];

function setup() {
  var canvas = createCanvas(400, 300);
  canvas.parent("p5Canvas");
  colorMode(HSB);
}

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);
    }
  }
  
}

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;
}

はい、突然長くてちょっと面食らうかも知れませんが、部分部分に分解して見てけばそれほど難しいことはしていません。
配列　という要素と　functionという要素、for loopそれから連想配列という新しい要素が出てきています。

まずは配列

今回は配列について見ていきます。
配列は、１つの変数の中に沢山のデータを入れておくことが出来る仕組みです。
以前に紹介した変数は、

var n = 1;

のように名前をつけた箱の中に数値を入れておける仕組みでした。

配列の場合は、１つの名前に数値をいくつも入れることが出来ます。

var n = [1,3,5,7];

var x = n[0]; //xには1が入る 
var y = n[1]; //yには3が入る
var g = n[2]; //gには5が入る
var j = n[3]; //jには7が入る

この仕組の何が便利かというと、後ほど紹介するloopを使った時に、１つの配列の中に入っている要素を順番に見て行ったり、途中で要素を足したり、減らしたり出来る事です。

例えば、

var x = ["apple"];

という、１つしか要素のないxという配列があったとして、後から

x.push("banana");

とすれば、xは
1と10の２つの要素が入っている配列になります。

そしてこのxに対してspliceという命令を実行すれば、指定した番号の要素を削除する事が出来ます。

x.splice(0,1);// appleとbananaの２つの要素が入っていたxの中からappleが削除された

それからそれから

オブジェクトと呼ばれる処理（function,振る舞い）やデータの塊を、この配列に入れたり捨てたりしながら、for loopでその配列に入っている要素の分だけなんども実行してやる、というのが全体の流れなので、次回はfunctionとfor loopについて書きたいと思います！

                           

  関連記事