Drip 'n' Snip

ドリップン・スニップ

あなたの生活役立つWEB情報イッパイお届け
p5js

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それから連想配列という新しい要素が出てきています。

まずは配列

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

var n = 1;

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

配列の場合は、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を使った時に、1つの配列の中に入っている要素を順番に見て行ったり、途中で要素を足したり、減らしたり出来る事です。

例えば、

var x = ["apple"];

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

x.push("banana");

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

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

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

それからそれから

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

NEXT
p5.jsでwebページにアニメーションを作ろう - 07 function

  関連記事

p5js
p5.jsでwebページにアニメーションを作ろう - 02 webサイトで公開しよう

さて、前回にご紹介したp5.jsですが(おや、まだご覧になっていない?では1つ前 ...

p5js
p5.jsでwebページにアニメーションを作ろう - 05 何度も繰り返そう

かなり間が空いてしまいました、僕です。 前回までの記事を並べておきますので、ざっ ...

p5js
p5.jsでwebページにアニメーションを作ろう - 07 function

前回は完成目標と配列について書きました。 今回はfunctionという仕組みと ...

p5js
p5.jsでwebページにアニメーションを作ろう - 01

P5.jsでインタラクティブなページを作ろう こんにちは、僕です。 普段はメディ ...

artboard
文字と色を指定するだけ!ファビコンジェネレーター

はい、こんにちは!僕です。 最近faviconを作る機会が多かったのですが、大抵 ...

-p5.js