プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

ホーム
CG関連
プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

CG関連

2019.06.12

プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

今回のお題は『配列』。

『プログラミング』を始めたばかりの頃を思い出すと、

『配列』をどうもうまく使いこなせなかったのですが、

慣れてくるにつれ、こんなに便利なものはないなと実感します。

例えばボールを1個動かすだけなら『配列』の出番はないのですが、

ボールを10個、100個動かしたいと思ったら、

もし『配列』を使わないと、同じコードを100回書く必要がでてきます。

アオキ

『配列』使わないとめっちゃ効率わるい・・・

という事で、ボールを100個に増やす『配列』をつくってみたいと思います。

配列をわかりやすく『ゴディバ』に例えてみる 1次元配列

『配列』のわかりやすい説明の仕方がないかと考えていたら、

なぜか『ゴディバ』が頭によぎったので、『ゴディバ』で説明してみます。

ここに『ゴディバ』のクッキーがあります。

四角い箱から取り出すと、
『ゴディバ』のクッキーが４つ、きれいに一行に並んでいます。(あえて一行と書いています)

左から2番目のクッキーが食べたいとなれば、

ゴディバおじさん

2番目のクッキーをいただこうかな

となるし、

一番右のクッキーを食べたいなら、

ゴディバねえさん

4番目のクッキーをいただくわ

ってことになりますよね。

『ゴディバ』のクッキーが一列に並んでいれば、

1番目、2番目、3番目、4番目、と番号をつけさえすれば、どのクッキーかが指定できると。

これが『配列』になります。

アオキ

ところで『ゴディバ』最近食べてないなぁ・・

配列をわかりやすく『ゴディバ』に例えてみる 2次元配列

『配列』は、1行だけではなくて、2行でも3行でも、何行でもつくれます。

例えば2行だとこんな『ゴディバ』になります。

アオキ

上品な感じですなぁ・・

『数学』で大量計算をするときに使う『行列』という分野では、

横並びを『行(ぎょう)』
縦並びを『列(れつ)』

と表現するので、その呼び名にあわせると、

この『ゴディバ』は、

横に3つあるので3行
縦に2つあるので2列

ということになります。

例えば真ん中の下の方の赤い『チョコレート』が食べたいとなれば、

ゴディバ兄ちゃん

左から2番目の下から1番目の『チョコレート』が食べたい！

と言えばどの『チョコレート』なのかがわかります。

3行目の『チョコレート』を2つとも食べたいって事であれば、

ゴディバレディー

左から3番目の『チョコレート』は両方わたしのものよ！

と言えば伝わるかなと思います。

これもまた『行列』であり、

1行につき2つのチョコレートがあるので、『2次元配列』という事になります。

配列をわかりやすく『ゴディバ』に例えてみる『ベクトル』

1行につき2つの値がある、といえば、

複数の数値を持つ『ベクトル』もまた、配列を使って表す事ができます。

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

【ベクトル】をわかりやすくするコツ〜『ベクトル』はただの数値の組み合わせです(...

https://coinbaby8.com/how-to-use-vector.html

2020/6/5追記ベクトルに関する動画を追加しました。遊ぶようにプログラミングができて、デザインやアートをつくれる『クリエイティブコーディング』を、『P5.js(ProcessingのJavaScript版)』を使っていろいろ試しているうちに、もっと自然に、ボールや図形を動かしたいなと思うようになってきて。自然に動かすとなると『数学』や『物理』の知識が必要になってきます。今回のお題は『ベクトル』。できるだけわかりやすく、使えるこなせるようになるために、『ベクトル』についてまとめてみることにしました。『ベクトル』とは、ただの...

下のチョコレートの行をX
上のチョコレートの行をY

と見立てると、

左から2番目のX
左から3番目のY

などを指定する事ができます。

縦横きれいに並べられた『チョコレート』の中から、
1つなり2つなりを指定して取り出せる仕組みが『配列』になります。

※『プログラミング』では1からスタートではなく、0からスタートになるので注意してください。

ちなみに3Dの場合は X,Y,Z と3つの情報を持つことになるのでこんな『ゴディバ』になります。

アオキ

この『ゴディバ』結構いいお値段です。『ゴディバ』食べたいよ『ゴディバ』・・

配列を使ってボールを10個に増やしてみる

前回作成したコードを元に変更していきます。

参考：前回記事

もんプロ～問題発見と解決のためのプログラミング〜

プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

https://coinbaby8.com/acceleration.html

遊ぶようなプログラミングでおなじみの『クリエイティブコーディング』。スムーズな動きを実現しようと思うとどうしても『物理』や『数学』の知識が必要になってきます。今回のお題は『加速度』。だんだんスピードが速くなったり、だんだんスピードが遅くなったり、はたまた逆方向に加速していったり。そんな動きをできるだけわかりやすく作ってみたいと思います。今回は2D(2次元・平面)の動きを想定しています。加速度の前に『ベクトル』のざっくり解説平面(2次元・2D)の場合、横と縦の2つの情報が必要になります。横がX、縦がYになり...

前回のコードはこちら

let vecLocation;
let vecVelocity;
let vecAcceleration;
let topSpeed;

function setup() {
  createCanvas(400, 200);
  colorMode(HSL, 360, 100, 100, 100);
  vecLocation = createVector(width / 2, height / 2); //座標の位置
  vecVelocity = createVector(5, -5); // 速度 Xが5 Yが-5 (マイナスなので上方向)
  vecAcceleration = createVector(0, 9.8/60); // 9.8は重力加速度 フレームレート(60)で割ってる
}

function draw() {
  background(0);

  vecVelocity.add(vecAcceleration); //加速度を速度に追加
  vecLocation.add(vecVelocity); // 速度を位置に追加

  fill(160, 100, 50, 100);
  ellipse(vecLocation.x, vecLocation.y, 20, 20);
  if( vecLocation.y + 20 > height || vecLocation.y - 20 < 0 ){　//Yが端についたら-1をかけて反転させる
    vecVelocity.y = vecVelocity.y * -1;
  }
  if(vecLocation.x + 20 > width || vecLocation.x - 20 < 0 ){ // Xが端についたら -1をかけて反転させる
    vecVelocity.x = vecVelocity.x * -1;
  }
}

『配列』を使ってボールを10個に増やしてみます。

See the Pen
p5.js vector-array-test by aoki_monpro (@suica)
on CodePen.

コードはこちら。

let vecLocation = []; //空の配列
let vecVelocity = []; //空の配列
let vecAcceleration = []; //空の配列
let topSpeed;


function setup() {
  createCanvas(400, 200);
  colorMode(HSL, 360, 100, 100, 100);
  
  for ( let i = 0; i < 10; i++){  //0から10未満まで1ずつ増やす
  vecLocation[i] = createVector(width / 2, height / 2); //位置
  vecVelocity[i] = createVector(random(2,5), random(-8, -2)); //速度 (あえてランダムに
  vecAcceleration[i] = createVector(0, 9.8/60); //加速度
  }
}

function draw() {
  background(0);
  for (let i = 0; i < 10; i++){ // 0から10未満まで1ずつ増やす

    vecVelocity[i].add(vecAcceleration[i]); //速度に加速度を足す
    vecLocation[i].add(vecVelocity[i]); // 速度+加速度を 位置に足す

    fill(160, 100, 50, 100);
    ellipse(vecLocation[i].x, vecLocation[i].y, 20, 20);
    if( vecLocation[i].y + 20 > height || vecLocation[i].y - 20 < 0 ){
      vecVelocity[i].y = vecVelocity[i].y * -1;
    }
    if(vecLocation[i].x + 20 > width || vecLocation[i].x - 20 < 0 ){
      vecVelocity[i].x = vecVelocity[i].x * -1;
    }
  }
}

配列にする前と、配列にした後を見比べると、
座標位置、速度、加速度ともに、
カッコ [] がついている事がわかると思います。

vecLocation → vecLocation[]
vecVelocity → vecVelocity[]
vecAcceleration → vecAcceleration[]

カッコ [ ] の中に、何番目という情報が入ることになります。

繰り返しを指定する『for文』で、

変数 i を、 0 から 10未満の範囲で 1ずつ変える

としているので、カッコ [] の中には、 0〜9 の値が入ることになります。

『setup』関数の中の『for』文で、ベクトルのインスタンス(実態)を10つくって、
『draw』関数の中の『for』文で、それぞれ動かしています。

また、『ベクトル』は複数の値を持つので、

Xの値の場合はvecLocation[i].x
Yの値の場合はvecLocation[i].y

と最後にxまたはyと書くことで、何番目のX、何番目のY というのがわかることになります。

配列を使ってボールを100個に増やしてみる

もし箱の中身を増やそうとすると『ゴディバ』は有料ですが、

『配列』は無料で簡単に増やす事ができます。

10個から100個に増やすことも簡単です。(読み込みにちょっと時間かかります)

See the Pen
p5.js vector-array-test2 by aoki_monpro (@suica)
on CodePen.

コードはこちら。

let vecLocation = [];
let vecVelocity = [];
let vecAcceleration = [];

let topSpeed;


function setup() {
  createCanvas(400, 200);
  colorMode(HSL, 360, 100, 100, 100);
  
  for ( let i = 0; i < 100; i++){ // 10を100に変更
  vecLocation[i] = createVector(width / 2, height / 2);
  vecVelocity[i] = createVector(random(2,5), random(-8, -2));
  vecAcceleration[i] = createVector(0, 9.8/60);
  }
}

function draw() {
  background(0);
  for (let i = 0; i < 100; i++){ // 10を100に変更

    vecVelocity[i].add(vecAcceleration[i]);
    vecLocation[i].add(vecVelocity[i]);

    fill(160, 100, 50, 100);
    ellipse(vecLocation[i].x, vecLocation[i].y, 20, 20);
    if( vecLocation[i].y + 20 > height || vecLocation[i].y - 20 < 0 ){
      vecVelocity[i].y = vecVelocity[i].y * -1;
    }
    if(vecLocation[i].x + 20 > width || vecLocation[i].x - 20 < 0 ){
      vecVelocity[i].x = vecVelocity[i].x * -1;
    }
  }
}

繰り返しを表すfor文の中を、

0から 100まで 1ずつ繰り返す

と変更しただけです。

アオキ

簡単に100個のボールを動かせるとなんだか楽しくなってきますな。