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

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

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

javascript


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

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


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

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

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


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

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

javascript


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

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



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


壁紙用に最終調整をする

javascript


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

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

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

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



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

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

javascript

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

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



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

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



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

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

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

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



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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