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

【10話完結】初心者に絶対オススメのアート系プログラミング入門講座『ドクロと薔薇の壁紙』- プログラミングでデザインする、その大まかな流れと楽しさがわかる!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google Ad

Google Ad

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

「ドクロと薔薇の壁紙」という変わったタイトルですが、これはプログラミング初心者が最初に試してみるべきオススメの教材です。 普通にインターネットに繋がっているPCさえあれば、特別なアプリや機材は一切不要。もちろんすべて無料で学習できます。
学習するプログラミング言語はウェブサイトやウェブアプリ開発に不可欠なjavascript。 実際に使えるスマホの壁紙をデザインすることを目的に、難しい理屈は一旦置いておく代わりに、自分が書いたjavascriptコードで実行結果がどう変化するかを実感しながら、 ループ処理、条件分岐などプログラミングの重要なテクニックをあっという間につかめます。
10話完結なので、飽きる間もなく読了できると思います。もちろん、自分でjavascriptコードを書いて試しながら。 小学生から十分に理解できる内容ですので、学校でプログラミングを教えることになった先生方にもぜひ活用いただきたいと思います。
プログラミング学習に必要な要素をすべて盛り込んでいるようなものでは全くありませんが、 プログラミング初心者に読んでいただければ、プログラミングの全体像を実体験し、その可能性を感じ、自分でもっと勉強してみたくなる、そのきっかけになれると確信しています。