@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

【第10話】ここまで学んだことを組み合わせて壁紙をデザインしてみる

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第10話では、ここまで学んだことすべてを組み合わせて壁紙を完成させます。for命令、if命令、剰余計算、乱数などプログラミングの必修テクニックを使い、実際に使える壁紙画像を作る体験ができます。単に文法を覚えるのとは違う「使えるプログラミング」を感じていただければ幸いです。

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

【第9話】乱数を使ってランダムにドクロと薔薇を表示する

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第9話では、「乱数」をつかってドクロの大きさや位置をランダムに変化させデザインのバリエーションを作ります。ランダム性はプログラミングでデザインすることの大きな魅力です。乱数を使いこなすことで、想像もしていなかった新しく意外なデザインができあがる体験ができるかもしれません。

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

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

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

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

【第2話】最初のサンプルプログラムでドクロを表示、幅と高さを変えてみる

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第2話では用意されたjavascriptのサンプルプログラムを練習画面(jsfiddle)でさっそく実行し、早くも最初の「ドクロ」を表示してみます。続けてサンプルプログラムをほんの少し改良することによりドクロの幅と高さが変化することを体験します。

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

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

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

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