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

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

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


手作業デザインの限界

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

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

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

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


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

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

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

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

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


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

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

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

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



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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