CG関連

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

今回のお題は『配列』

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

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

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

例えばボールを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』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

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

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

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

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

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

9. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

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

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

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

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

CAPTCHA


最近の記事

  1. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  2. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  3. 音楽

    コードの転回形の練習方法をまとめてみた【大人のピアノ】
  4. CG関連

    【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】
  5. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラムの覚え方
PAGE TOP