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

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


例えば1行ごとにドクロと薔薇を交互に表示したいとき、どうしたらよいか?ここまで学習した事例では実現が難しいと思います。さてどうするか。今回はプログラミングでは非常に使いどころの多い「剰余」計算を使ったテクニックとそれをどのようにデザインに活かせるかを紹介します。

javascript


(練習用画面: https://jsfiddle.net/dokubara/kb7xen5y/19
今回も画像のサイズやキャンバスの縦横比を少し変更していますが基本的な構造は今までと同じプログラムです。実行結果は次のようになります。

ドクロと薔薇が1行おきに交互に並ぶ




サンプルプログラムの解説

ポイントは一点のみ。if命令で使っている条件式にある奇妙な記号「%」です。

javascript

    if (j % 2 == 0) {
      context.drawImage(skull, i * 30, j * 30,  30, 30);
    } else {
      context.drawImage(rose, i * 30, j * 30,  30, 30);
    }

この%記号はおなじみの「パーセント(百分率)」という意味ではなく、「剰余演算子」つまり「割り算のあまりだけを求める計算記号」です。

例えば、7÷2=3あまり1なので、7%2=1という答えになります。適当な数で例を続けると、15%6=3(15÷6=2あまり3だから)であり、20%4=0(20÷4=5あまり0だから)となります。慣れるまでは気持ちがわるいかもしれないが実はこの計算がプログラミングでデザインパターンを作る際にかなり使えるのです。

サンプルプログラムの解説に戻りましょう。j%2==0の部分です。==は前回学習した比較演算子なので、この部分は「j%2の値が0と等しければ」という条件式になります。

j%2はj(行数のカウント)を2で割ったときのあまり、なのでそれが0であるとはどういう場合でしょうか。jが2で割り切れる、つまり「jが偶数のとき」という意味になりますね。実行結果を見ると確かに最初の行(j=0)から始まり、j=0,2,4,6…と偶数の行だけドクロ、それ以外(奇数)は薔薇が表示されているのがわかります。※例によってjのカウントが0から始まっているので見かけ上ドクロが表示されているのは1行目、3行目、5行目、7行目…(奇数行)となり説明がわかりづらいかもしれませんがじっくり確認してみてください。


3行おき、4行おきなども自由自在。好きな幅のストライプなどデザインへの応用範囲は広い

偶数(2の倍数)を条件にしたドクロと薔薇の出し分けができたのですから、ここをj%3==0やj%4==0と変更すれば、3の倍数(3で割ったときあまりが0)や4の倍数(4でわったときあまりが0)などを条件にした出し分けも簡単にできます。

j%3==0 とした場合のストライプ
j%4==0 とした場合のストライプ



さらに応用パターンを作ってみる

さらにいくつかの応用パターンを紹介します。プログラム自体はサンプルプログラムと全く同じ。if命令の条件式の中を変えるだけです。それぞれ実行結果画像の下に条件式を書き添えておきますので、自分で練習画面に入力し、どうしてこの式でこういうデザインが生まれるのか、その原理をじっくり考えてみてください。

(i + j) % 2 == 0

いわゆる市松模様です。色々な書き方で実現できますが、上記は非常にシンプルな式で市松模様を描いた事例。ひとマスごとの(i + j) % 2 を自分で計算して確かめてみましょう。


(i % 4 == 0) && (j % 4 == 0)

「&&」記号は前回解説しましたが「AND (かつ)」という意味で、前後2つの条件式両方を満たした場合、という意味になります。上の例ではiが4の倍数⇒4列ごとの縦ストライプ、jが4の倍数⇒4行ごとの横ストライプ、その両方を満たす⇒縦横の交点のみがドクロ、というイメージです。


(i % 4 == 0) || (j % 4 == 0)

「||」記号は新出なので解説しておきます。「OR(または)」の意味で、前後2つの条件式のどちらかが満たされればOKという意味になります。上の例では先ほどは縦横ストライプの交点のみドクロだったのに対して、縦ストライプも横ストライプもどちらも生かされ、チェック柄になっているというイメージです。


剰余演算を活用したデザインパターンのまとめ

今回は普段あまり着目しない「割り算のあまり」を活用してプログラムでデザインを作る方法を紹介しました。同じことをfor命令やif命令を使って実現することもできますが、このように剰余演算子%を活用することで極めてシンプルに表現することができます。一般的にプログラムは短くシンプルであるほど美しいといえます。

また数行ごとにパターンを繰り返すという作業は、テキスタイルデザイン(生地の柄など)の伝統的な手法であり、私たちの目指す「ドクロと薔薇の壁紙づくり」にも欠かせないものです。ぜひ自分で色々なパターンを試しながら、理解を深めてほしいと思います。



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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