P5.js (Processing)

配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり【P5.js】(6)

今回のお題は『配列』

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

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

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

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

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

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

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

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

Sponsored link

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

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

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

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

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

左から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つの値がある、といえば、

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

参考記事

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

と見立てると、

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

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

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

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

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

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

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

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

参考:前回記事

前回のコードはこちら

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

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

コードはこちら。

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

  • 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.

コードはこちら。

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

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

と変更しただけです。

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

配列をわかりやすく『ゴディバ』で例えてみる まとめ

『配列』を使いこなすことで、

1つだったボールを10個にも100個にも増やすことができました。

『配列』は、『P5.js(ProcessingのJavaScript版)』に限らず、

あらゆるプログラミング言語で使われる超有名機能なので、

ぜひさくっと使いこなせるようになりたいですね。

アオキ
さぁ、みんなで『ゴディバ』を食べよう!

補足

『配列』にはいくつか種類があり、

『連想配列』や『多次元配列』について、
学校にたとえて説明した記事もあるので
参考にしてみてもらえればと思います。

 

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい【P5.js】(3)

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり【P5.js】(6)

7. プログラミングの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜【P5.js】(7)

8. プログラミングで色や大きさをランダムにして遊んでみる【P5.js】(8)

9. プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

10. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Sponsored link

関連記事

  1. クリエイティブコーディング

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

    2020年から小学校でもプログラミング教育が義務化になり、子ども向…

  2. Javascript

    プログラミングの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜【P5.js】(7)

    プログラミングを始めた頃に、よくわからないと思っていたものの一つに『…

  3. P5.js (Processing)

    『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

    遊ぶようにプログラミングができて、デザインやアートをつくれる『クリエ…

  4. クリエイティブコーディング

    プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

    前回の記事で、プログラミングを使って数学がわかるという『コー…

  5. P5.js (Processing)

    移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

    遊ぶようにプログラミングができる『クリエイティブコーディング』の中でも…

  6. P5.js (Processing)

    プログラミングで色や大きさをランダムにして遊んでみる【P5.js】(8)

    遊ぶようにプログラミングができる『クリエイティブコーディング』。『…

Sponsored link

最近の記事

Sponsored link
  1. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  2. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  3. 検索システム

    新しいホテルを探すサービスをつくってみました【楽天トラベルAPI】【条件付】
  4. P5.js (Processing)

    配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり【P5.…
  5. docker初心者向けdocker-composeからやったほうがいいかもよ

    ツール

    【Docker】初心者はdocker-composeから始めた方がいいかもしれな…
PAGE TOP