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

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


今回のサンプルプログラムはドクロを縦横にしきつめるおなじみのものですが、ドクロのサイズ(幅と高さ)を乱数で決めることにより、バラバラのサイズのドクロがずらっと並ぶ新しいデザインを作ってみました。今回はこれをベースとして様々なアイデアでアレンジをしてみたいと思います。(練習用画面: https://jsfiddle.net/dokubara/ytvfuazh/27/

javascript


実行結果は次の通りです。

バラバラなサイズのドクロが並ぶ


かなり異様な光景になりました。同じプログラムを何回か実行してみてください。毎回それぞれのドクロの大きさがランダムに変化し全体のイメージが微妙に変わっているのがわかりますね。


乱数の生成をするMath.random()

ランダム性の元になる「乱数」を生成しているのはプログラム中の

javascript

var l = Math.random() * 80;

の部分です。

Math.random()は、実行するたびに0〜1の間の大きさのランダムな数値を生成する命令です。これに*80(かける80、つまり80倍)することで、0〜80の幅を持つ乱数にしています。var l = とすることで、lという変数(lに特段意味はありません)にできあがった乱数を入れています。

javascript

context.drawImage(skull, i * 40, j * 40, l, l);

の部分を見ると、ドクロの幅と高さを決める部分に、変数lつまり先ほど生成した乱数が使われていることがわかります。つまり、ドクロを表示しようとするたびに、ランダムなサイズが指定されるようになっているのです。


幅と高さもバラバラにするサンプル

javascript


ドクロの幅と高さを決める部分に、変数ではなくMath.random()*80を直接書いてみました。幅、高さそれぞれに違う数値がセットされるため、以下のように各ドクロが縦につぶれていたり横長だったり、さらに不規則なデザインになります。

幅と高さも揃っていないランダムなデザイン



ドクロと薔薇をランダムに出し分けるサンプル

javascript


前回までに学んだif命令の分岐条件に乱数を使うことにより、ドクロを出すか薔薇を出すかをランダムに決めようという試みです。

冒頭のサンプルプログラムと同じく、変数lに0〜80までの乱数をセットし、if命令の条件式でlが40未満の場合はドクロ、それ以外のときは薔薇を表示するよう分岐させています。実行結果は次の通りです。ドクロと薔薇がだいたい半数ずつ表示されていることがわかると思います。

ドクロと薔薇、どちらを表示するかをランダムに決めている



1行ごとにドクロと薔薇を左右に振り分け

javascript


iループ(横方向)ごとに変数lに乱数をセット。iがlより小さいならドクロ、大きいなら薔薇を表示します。この処理により、行ごとに左からドクロが始まり、どこかのタイミングで薔薇に切り替わります。これにより棒グラフのようなデザインができあがります。

棒グラフのようなデザイン




乱数を使ったデザインのまとめ

乱数を使うことにより、デザインの幅が大きく広がります。プログラムを書く本人はどのような仕組みにするかは制御できますが、乱数を使うことで実行するまで本当の「結果」はわからないため、思いもよらないデザインができあがり驚かされることがあります。

これは第1話で説明した「プログラミングでデザインをする意義」の2つ目にあたります。自分の想像力の限界を越えたデザインを作り出せる可能性がここにあるのです。

例によって自分でプログラムを改良し、さまざまな実験をしてみてください。



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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