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

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

偶然からアイデアが生まれる

javascript


今回のサンプルプログラムは前回のプログラムを適当にいじっているときにたまたまできたものです。はじめから意図があったわけではありません。見てもらえばわかると思いますが、いつもの2重ループの中に、ドクロを表示する命令と薔薇を表示する命令をとくに出し分け条件分岐もなく、同じ座標で書いてしまったのです。結果は次のようになりました。

偶然できた新しいデザイン


実行してみて自分で驚きました。なかなかいいデザインじゃないかって。顔の正面に顔を隠すかのような大きな薔薇の花。なにかの風刺のような尖ったデザインに思えます。ロックバンドのジャケットアートなどにもありそうです。

プログラミングでデザインをしているとこのようなハプニングがよく起きます。そしてこれこそ、自分の想像力を越えた創作ができるチャンスだと思います。

せっかくなので、このアイデアを活かし、ここまで学んだことの一旦のまとめとして、壁紙を完成させてみたいと思います。


薔薇の大きさをランダムにしてみる

手始めに先ほどのプログラムに少し手を加え、薔薇の大きさにランダムな変化をもたせてみましょう。次のようにしてみました。

javascript


実行結果はこのように変わります。

薔薇の大きさにランダムな変化を追加



面白い。先ほどのように顔を薔薇で隠したようなドクロもあれば、まるで幼い女の子のように小さな薔薇を頭に飾ったドクロもいます。片目を薔薇で隠した海賊のようなドクロ(まさにドクロのイメージ?)も出てきそうです。


壁紙用に最終調整をする

javascript


プログラム前半で、画像全体のサイズを750×1334に変更。iPhone8の壁紙サイズです。他のスマートフォンに合わせたい場合は適宜プログラム内の数値を自由に書き換えてください。

さらにドクロの大きさや間隔を調整しました。ここはセンス、好みの世界かもしれません。自由に試してみてください。尚、奇数列と偶数列で少し表示位置をずらしています。これは第8話で学んだ「剰余」計算(%)を活用しています。学んだことはどんどん使ってみましょう。

ここまでで次のような結果になります。

サイズを調整し壁紙らしくなった



背景色も調整していよいよ完成

最後に背景色も全体のバランスを考えて少し落ち着い色合いに調整してみます。プログラム前半部分です。どこを変更したか確かめてみてください。

javascript

完成した壁紙がこれです。

背景色を変更して完成した壁紙



ドクロと薔薇でありながら少し上品なトーンに仕上がりました。さっそくiPhoneの壁紙に設定してみました。好みは人それぞれだと思いますがなかなか素敵な壁紙ではないでしょうか。

完成した画像を実際にiPhoneの壁紙として設定した



ドクロと薔薇の壁紙作りのまとめ

プログラミングを使ってドクロと薔薇の壁紙をデザインするという一連の企画はここで一旦完了となります。

ここではデザインといってもあくまですでに用意されているドクロと薔薇の画像をレイアウトする作業にプログラミングを使うという限定的な内容だったが、ループ条件分岐ランダムなどプログラミング特有の発想を使って、新しいデザインを生み出す体験ができました。アイデア次第でまだまだ新しいデザインが作り出せそうな気配を感じてもらえたのではないでしょうか。

このサイトでは引き続きプログラミングに関する、よりハイレベルな知識やスキル、またデザインについての役立つ情報など、新しいデザインを生み出すためのヒントを紹介していきますので楽しみにしてください。



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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