@bigakubu アートとプログラミングがあればいい。

【第5話】<for命令>による2重ループで縦横に並べ画面をドクロで埋め尽くす


前回の学習【第4話】<for命令>でループ!たくさんのドクロを簡単に並べるで、for命令を使ってドクロを縦並びもしくは横並びにする方法とその仕組みの大まかな理解ができたと思います。次にやってみたいのは縦・横どちらにも並べるという作業です。新しいサンプルプログラムを用意しました。(練習用画面: https://jsfiddle.net/dokubara/e8w6jy29/20/

javascript


実行結果は次のようになります。(約50%に縮小して掲載しています)

サンプルプログラムの実行結果(画像全体)

壮観ですね。ある意味、ようやくスマホの壁紙らしくなってきました。また、これを手作業で描くもしくはコピペして配置することを考えるとなかなか手ごわいはずです。第1回で述べたプログラミングによるデザインの必要性の1番目(反復作業が楽にできること)を実感してもらえると思います。



プログラムのポイント解説

今回のサンプルプログラムの要点を解説します。ポイントになるのはここです。

javascript

for (var j = 0; j < 13; j++) {
  for (var i = 0; i < 8; i++) {
    context.drawImage(skull, i * 100, j * 100, 100, 100);
  }
}

前回も登場したiをカウンターとしたfor命令のループが、別の変数jをカウンターとするfor命令に囲まれている(いわゆる入れ子になっている)ことがわかります。

ループの中身(ドクロを表示する部分)を見るとi*100がx座標に、j*100がy座標に使われていますね。



<for命令>による2重ループの詳しい解説

この2重ループがどのように進んでいくか、丁寧に説明してみます。プログラムは上から順に処理されるので、まずはjループがj=0からスタートします。j=0の状態で、iループに突入します。もちろんi=0から始まります。この状態で最初の「ドクロ表示」が行われます。x座標はi*100なので0×100=0(左端スレスレ)、y座標はj*100なので同様に0×100=0(上端スレスレ)となり画面左上隅に最初のドクロが表示されます。

その後、iループを閉じる } に出会い、iループのはじめに戻ります。iは1増加し、i=1になります、この状態で2番めのドクロ表示が行われます。x座標はi*100なので1×100=100(左端から右に100)、jは0のままなのでy座標は今回も0、2番めのドクロは1番目より100右に表示されます。

同様なことが繰り返され、8番目のドクロまでは横並びに少しずつ右に表示されます。この段階でようやくiループは一旦完了し、jループを閉じる } によりjループのはじめに戻る(ずいぶん待たせた感じですね)。ようやくjが1増えてj=1になります。その状態でまたiループに突入するわけです。j=1の状態でi=0,1,2...と進みます。

ドクロがどのように表示されるかはもうわかりますね。x座標は先ほどと同じく左端から100ずつ右にずれていきますが、y座標はこんどはj=1なので常にj*100つまり1×100=100(上端から下に100の位置)になります。そう、2行目のドクロが表示されるのです。

これが繰り返されることにより、横に8列縦に13行、ドクロが敷き詰められます。

この2重ループはプログラミングの基本テクニックなので、上の説明をよく読み、さらに自分なりに数字を変えるなど実験をしながら習得してほしいと思います。



せっかくなので極端なサンプルを作ってみる

2重ループの練習もかねて、もっと数を増やしたサンプルを作ってみよう。すでに画面いっぱいになってしまっているのでドクロのサイズを小さくし、間隔も狭めてみます。コードは次の通り。難しいことはやっていません。ループの回数とドクロのサイズを変更しただけです。

javascript


表示結果は次のようになります。

極端にたくさんドクロを並べたサンプル



<for命令>による2重ループのまとめ

これがデザインとして良いかどうかは疑問ですが、このようなレイアウトを瞬時に実現できることがプログラミングによるデザインの一つの強みです。for命令を2重(入れ子)にし、またカウンターの変数を座標やサイズの指定など処理の中で利用することによりさまざまなバリエーションを一瞬で作り出すことができるのです。



Google Ad

Google Ad

Recommend

【第6話】<if命令>で条件分岐!ドクロと薔薇を巧みに出し分ける

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第6話では、2つ目のモチーフ「薔薇」を使います。2つのモチーフが出てくることでその出し分けという発想が生まれます。プログラミングでいう「条件分岐」javascriptをはじめとして多くのプログラミング言語で「if命令」を使います。ドクロと薔薇を組み合わせてデザインの可能性を広げます。

アート系プログラミング入門講座

【第8話】「剰余(割り算のあまり)」を活用したデザインパターン

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第8話では、割り算の「あまり」を活用して新しいデザインパターンを作ります。剰余計算は日常あまり使わないかもしれませんがプログラミングでは非常に有用です。javascriptでは%記号で剰余を計算できます。例えば7%2=1となります。さあこれをどうデザインに活かすのでしょうか。

アート系プログラミング入門講座

【第1話】プログラミングで「ドクロと薔薇の壁紙」をデザインしたい!

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第1話では、この講座のテーマを紹介しています。スマホの壁紙のデザインはもちろん手作業でもできますが、手作業には2つの限界がありそうです。一つは「大量の反復作業ができない」もう一つは「自分の思いつくものしか作れない」ということです。プログラミングでこの限界を越えてみましょう。

アート系プログラミング入門講座

【第3話】x座標とy座標を書き換えてドクロの表示位置をコントロールする

アート系プログラミング入門講座「ドクロと薔薇の壁紙」前回に続いてサンプルプログラムを少しずつ改良しながら必要な知識を学びます。第3話のテーマは、デザインをする上で欠かせない「座標」これを理解することでドクロを自分の思い通りの位置に表示できるようになります。ここまでのまとめとしてちょっとした「作品」を作ってみます。

アート系プログラミング入門講座

【第4話】<for命令>でループ!たくさんのドクロを簡単に並べる

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第4話では、javascriptでも重要度の高い「for命令」を使ってループ(反復)処理をする方法を学びます。これにより手作業ではなくプログラミングで思い通りの数だけ作業を繰り返すことができるようになります。前回学んだ「座標」と組み合わせてたくさんのドクロを正確に並べてみます。

アート系プログラミング入門講座