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

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


新しいサンプルプログラムを用意しました。

javascript


前回 【第3話】x座標とy座標を書き換えてドクロの表示位置をコントロールする では「手作業」で4つのドクロを並べて表示させてみましたが、今回はいよいよプログラミングによる反復作業をやってみます。プログラミング学習の基礎における重要ポイントの一つです。

練習用の画面は https://jsfiddle.net/dokubara/tx8m209c/23/ 
すでに上記コードを入力してあるので例によってこれを少しずつ変更して実行結果がどう変化するか確認してみましょう。


ループ処理をするには<for命令>

前半(初期設定の部分)は前回までと全く同じです。後半(ドクロの表示部分)に何か追加されています。ここが今回の主役、ループ処理をする「for命令」です。

javascript

for (var i = 0; i < 7; i++) {
  context.drawImage(skull, i * 110, 50, 100, 100);
}


まずはこのままで実行結果を確認。ドクロが7つ横並びで表示されています。コードはたった3行なのに。これがループ処理です。

実行結果/javascript


次に、13行目 i<7となっている部分をi<3 に変えて実行(Run)してみましょう。

実行結果/javascript


もう予想がついていたかもしれませんがドクロの数が3つに変わりました。
for命令について大まかにまとめると次のようになります。

for (var i = 0; i < ★; i++) {
  --- 反復したい処理 ---
}

・for命令は、{ }内の処理を★回だけ反復してくれるループ命令。

・i(変数という)はaでもpでも何でもよい。

本来は、varとは何か、++とは何か、そもそも「変数」とは何かを説明する必要があります(ほぼすべての解説書ではそこからレクチャーするもの)が、ここでは勇気を持ってそれを省略します。まずは「好きな回数ループできる」手段を手に入れたと理解し、これを活用してドクロと薔薇の壁紙デザインに熱中してください。


なぜ「横並び」になっているのか?

さて、先ほどの事例ではドクロが横並びになっていたがなぜ縦並びではないのでしょうか。言い方を変えると「反復」するだけでは同じ位置に同じ大きさのドクロが重なって表示されるだけで並んだ状態にはならないはずではないでしょうか?

その答えはここにあります。

javascript

context.drawImage(skull, i * 110, 50, 100, 100);


for命令で反復の対象になる{ }の中の1行。おなじみのドクロを表示する部分です。前回までの学習から4つの数値(x座標、y座標、ドクロの幅、ドクロの高さ)を指定してドクロを表示することがわかっています。後ろの3つ(50,100,100)については理解できると思いますが、x座標の部分「i * 110」に注目してみてください。

アスタリスク記号(*)は「かけ算」を表す。

例えば、i * 110と書けば「i × 110」の意味。

「たし算」は普通に+

「ひき算」は-

「わり算」は少し変わっていてスラッシュ(/)を使用する。

反復の手順を詳しく考えてみましょう。最初はi=0にセットされます(これを指示しているのがvar i=0の部分)。その状態で1回めの「反復」処理に突入します。となるとi*110は、0×110なので0という値になります。つまり最初に表示されるドクロのx座標には0(左端スレスレ)がセットされることになります。

ループ2回目のときはどうでしょう、ループを1回完了するごとにiは1増加する(これを指示しているのがi++の部分)ので、i=1になった状態で「反復」処理に入ります。つまり2回目にドクロを表示する際はi*110は、1×110なので110という値がx座標にセットされます。そのためドクロは1回目とちがい左端から110右にずれた位置に表示されることになります。

ループのカウント(i)が1増えるとx座標が110増えるしかけ


3回目はi=2なのでi*110は2×110つまり220となり、ドクロはさらに右へずれた位置に表示されます。まとめるとループのカウンターであるiの値(0から始まり1ずつ増える)をx座標のセットに流用することで、ループするたびにx座標を一定量(ここでは110)増やす、つまり横に並べて表示することを実現しているわけです。


それならば縦並びも簡単だ

ループごとにx座標を増やすことで横並びさせるのであれば、縦並びも簡単そうです。そう、y座標を増やすようにコードを変更すればよいのです。実際にやってみたものが次の例です。※コードを確認したい場合は例によって[Javascript]タブを押してコード表示に切り替えてください。

実行結果/javascript



大きさも変化させてみようか

さらに応用してループごとに(iの値に応じて)x座標とドクロのサイズ(幅、高さ)を同時に変化させてみたサンプルがこれです。

実行結果/javascript


なかなかダイナミックな変化ですよね。このように、ほんの少しの思いつきをプログラムに反映することで、できあがるデザインの印象を大幅に変えることができるのです。


<for命令>でループのまとめ

以上がプログラミングによる反復作業の基本です。考え方がつかめるまで今回のサンプルコードを自分なりに好きにいじってみてください。エラーになる(何も表示されず真っ黒)こともあると思いますががそうなったら一つ前のコードに戻せばよいのです。大いにチャレンジしてみてください。



Google Ad

Google Ad

Recommend

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

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

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

【第7話】少し複雑な条件分岐の「練習問題」

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第7話は、練習問題形式です。出題された実行結果になるようにif命令の条件式部分を書き換える問題です。条件式を少し変えるだけで実行結果が大きく変わります。エラーをおそれず何度でも試行錯誤を繰り返すことでプログラミングが上達します。ぜひ挑戦してみてください。

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

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

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第5話では、前回学んだfor命令を2重ループにすることでドクロを縦横にずらっと並べてみます。for命令の2重ループはjavascriptに限らずプログラミングで非常によく使う必修パターンでデザイン作業にも欠かせない手法ですので、色々試しながら身につけておきましょう。

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

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

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

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

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

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

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