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

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

こんにちは。この講座はプログラミングを用いて「ドクロと薔薇」をモチーフにした壁紙(スマートフォンの壁紙画像のこと)をひたすらデザインする、ただそれだけがテーマのちょっと変わったプログラミング講座です。プログラミング完全初心者の方を対象としていますので、プログラミングについての正確さや詳しさよりも手早くアウトプットを得られるような進め方を大事にしています。ぜひ楽しみながらプログラミングによるデザインを学習してみてください。


手作業デザインの限界

みんなとは違う自分だけの壁紙が欲しいな、作ってみたいな、と思ったことありませんか。優れた画像加工アプリ(Instagramのようなフィルター一発でいい感じにできるアプリもあれば、Photoshopのような描いたり切り抜いたりレイアウトしたりするアプリもありますね)がたくさんあるのでは、この「自作」自体をスマホアプリ上で完結することもできそうですよね。画像加工といういわゆる「手作業」はデザインに不可欠な要素で大いに取り組むべきだと思います。

しかし、「手作業」には2つの限界があるのではないでしょうか。

  1. 大量の反復作業ができない(やろうと思えばできるが、つらい)
  2. 自分の思いつくものしか表現できない

ここにプログラミングを使ってデザインをする必要性が生まれます。


プログラミングでデザインする魅力

プログラミングで反復作業が楽になりそうなことは何となく想像がつくのではないでしょうか。そう、正しい指示(プログラム)さえ与えれば機械は人間と違って疲れないしミスもしない。いくらでも正確な反復作業ができます。

ただそれだけではありません。本当の魅力は(2)にあると思います。

プログラミングをしていると、プログラムを書いている本人が予想できなかった結果が生まれることがあります。例えば、数字や順番をちょっと入れ替えただけで想像もしていなかったクールな画像が描かれるといったような。

これを経験すると、人はプログラミングに熱中するようになります。そして学校で習うよりも職場で教え込まれるよりもはるかに早くプログラミングのスキルや発想を磨いていくのです。


普通のプログラミング解説サイトとはだいぶ違います。

本サイトでは、多種多様の「ドクロと薔薇の壁紙」をプログラミングで作ります。その過程で必要になるスキルや発想をその度にレクチャーします。一般的なプログラミング入門サイトや教科書とはまったく異なる手順になるため、読者によっては用語の定義や厳密な解説の不足を感じるかもしれませんが、本サイトはあくまで「ドクロと薔薇の壁紙」の作成がテーマであり、プログラミングはあくまで手段であるということでご容赦ください。

代わりに、オリジナルの「ドクロと薔薇の壁紙」が自作できるようになること、そして知らないうちにプログラミングの基本的なスキルや発想法、関連するWeb周辺の知識を身につけられることを約束します。

では、さっそく最初のレッスン【第2話】最初のサンプルプログラムでドクロを表示。幅と高さを変えてみるに進みましょう。



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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