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

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


前回 【第5話】<for命令>による2重ループで縦横に並べる、画面をドクロで埋め尽くすまでの学習でループ処理を使って画像を並べて繰り返し表示することができるようになりました。ここでいよいよ2つ目のモチーフである「薔薇」を出します。その上で「条件分岐」という重要なテクニックを身に着け、ドクロと薔薇という2つのモチーフを出し分け、新しいデザインづくりに挑戦してみたいと思います。さっそく新しいサンプルプログラムを用意しました。(練習用画面: https://jsfiddle.net/dokubara/oazwLf08/49

javascript


実行結果はこのようになるはずです。

ドクロがすべて薔薇になった


ドクロや薔薇を表示している仕掛けを少しだけ解説

今回のポイントではないのですが一応補足します。これまで次のようなコードを使ってドクロを表示してきました。

javascript

context.drawImage(skull, i * 100, j * 100, 100, 100);

今回のプログラムでは、skullをroseに書き換えることで薔薇を表示させています。

javascript

context.drawImage(rose, i * 100, j * 100, 100, 100);


しかし、もちろんプログラム言語に「ドクロや薔薇を表示される命令」などというものが用意されているはずはありません。プログラムの前半でskullやroseという名前の「変数」にそれぞれの画像をセッティングし、それを上記のようなコードで呼び出しているだけです。今の段階ではここは深く考えず、2つのモチーフをどうやって組み合わせてレイアウトして自分らしいデザインを作り出せるか、それだけに集中してほしいと思います。


条件によって処理を変える<if命令>

いよいよ条件分岐を使ってみましょう。条件分岐とは特定の条件によって処理を変える(分岐させる)処理のことです。次のプログラムはif命令を使った新しいサンプルです。

javascript

実行結果は次のようになります。

左3列はドクロ、それ以外は薔薇と「出し分け」



冒頭のサンプルプログラムと比較すると、画像を表示する部分が

javascript

    if (i < 3) {
      context.drawImage(skull, i * 100, j * 100,  100, 100);
    } else {
      context.drawImage(rose, i * 100, j * 100,  100, 100);
    }


という記述に変わっています。if命令を使った構文の基本は次の通りです。

if (条件式) {

  条件が合ったときの処理内容

} else {

  条件が合わなかったときの処理内容

}


※ 条件が合ったときはelse{ }内の処理はスキップされる(実行されない)


上のプログラムに沿って解説すると、8回(8列)繰り返すiループにおいて、ループをカウントする変数iが3未満(0,1,2まで)のときはドクロを表示して、それ以外(i=3以降)は薔薇を表示せよということです。※前回までもそうでしたがforを使ったループは慣習的に0からカウントを始める(1回目が0、2回目が1・・・)ので少し分かりづらいかもしれませんが慣れておいてください。


比較演算子について

条件式で変数の値を比較することが多いですが、その際には「比較演算子」と呼ばれるものを使います。数学で出てくる統合・不等号と少し使い方が異なるので解説しておきます。

比較演算子説明
A > BAがBより大きい(同じ場合は含まず)
A >= BAがB以上(同じ場合を含む)
A < BAがBより小さい(同じ場合は含まず)
A <= BAがB以下(同じ場合を含む)
A == BAとBが等しい
A != BAとBが等しくない


①と③は数学の不等号と同じなので問題なし。②と④も数学の≧,≦からイメージできると思います。

⑤は普通に考えると「A=B」と書くと思いますが、多くのプログラミングではA=Bは変数AにBという値をセットする(代入)意味を持つので、それと区別するためにイコールを2回重ねて「A==B」と表します。※ここは厳密には非常に難しく、A===Bという比較演算子もあるのですが、一旦は割愛します。とりあえずはA==Bを使ってください。

最後に⑥は「!」記号が「NOT」を意味すると理解しておいてください。「!=」でノットイコール、「等しくない場合」を条件にしたい場合によく使用するのでぜひ覚えておきましょう。


比較演算子の意味をドクロと薔薇で見てみる

教科書的に覚えるのも退屈だと思いますので、先ほどのプログラムのi<3の部分を①〜⑥それぞれの比較演算子に置き換え、実行結果(ドクロと薔薇の並び方)にどのように反映されるかを確かめてみましょう。尚、③は前述のi<3と同じなので省略します。また、スペースの都合で完全なスクリーンショット(スマホ壁紙サイズ)ではなく上5行分のみをトリミングして例示します。

① i>3 の場合。iが3より大きい(iが3,4,5,6,7)ときドクロ。
それ以外(iが0,1,2,3)のときは薔薇。
② i>=3 の場合。iが3以上(iが3,4,5,6,7)のときドクロ。
それ以外(iが0,1,2)のときは薔薇。
④ i<=3 の場合。iが3以下(iが0,1,2,3)のときドクロ。
それ以外(iが4,5,6,7)のときは薔薇。
⑤ i==3 の場合。iが3のときだけドクロ。
それ以外(iが0,1,2,4,5,6,7)のときは薔薇。
⑥ i!=3 の場合。iが3でない(0,1,2,4,5,6,7)のときドクロ。
それ以外(iが3)のときは薔薇。


例によって練習用画面(https://jsfiddle.net/dokubara/oazwLf08/51)を使って自分自身で様々な数値や比較演算子を使って実験してみてください。今回の例ではiの値を条件に使ったが、jの値を使ってみるのも面白いかもしれません。どういう結果になるかは実際に試して確認しましょう。


<if命令>を使った条件分岐のまとめ

if命令を使った条件分岐はループ(反復処理)とともにプログラミングの重要なテクニックです。また私たちの目的である「ドクロと薔薇の壁紙づくり」などデザインという作業においても、一定の条件で画像の種類や位置、サイズなどを出し分けることはデザインにバリエーションを生み出すための重要な手段になります。

次回 【第7話】少し複雑な条件分岐の「練習問題」 では同じif命令を使ってさらに複雑な条件分岐、すなわちより斬新なデザインづくりに挑戦してみたいと思います。



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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