この授業は、デザインやアート分野の学生にプログラミングを効率よく学習させるため組み立てられたものです。
現在のデザインやアートにおいて、プログラミングの知識があるという事実は、基礎的な教養としても、就職の際のスキルにしても年々その重要度が高まっています。しかし、芸術系の学生にとってはその敷居が高いのも事実です。
よって、この授業ではプログラミングによるグラフィック描画やアニメーション、インタラクションなどの、直接表現に結びつく実践的な方法を学びます。
開発環境は、processingを利用して行います。processingは、マサチューセッツ工科大学で開発されたプログラミング教育用ツールです。
非常に短いコードでプログラムが書けるようになっていますので、初心者でも心配する必要はありません。
1. 何故、デザインやアートにプログラミングが必要なのか
学生と話をしていてプログラミングの話をすると、急に暗い顔になり、「ああ、苦手」という言葉がよく返ってきます。おそらくその学生たちは、プログラミングの学習の仕方がいまいち分からないのと、その深遠な可能性がまだ見えて来ていないのでしょう。それは、教える側の責任もあると思います。実際、自分も独学でJavaを勉強しようとした時、一度挫折しました。しかし、何年か後にもう一度勉強し直してプログラミングができるようになったのです。
ですから、現時点でプログラミングに対する苦手意識がある学生でもいつでもやり直せると考えています。要は、なぜ勉強しなくてはならないのかと、どうやって勉強するのかをもう一度見直せばいいのです。
あともう一つ、プログラミング=数学だと思っている学生も多いでしょう。確かにそうなのですが、数学が苦手でもプログラミングが苦手だとは限りません。実際私も数学は得意ではありません。しかしプログラミングは楽しいと思いました。自身の数学の苦手意識を超える面白さがプログラミングにはあったのだと思います。
ですから、数学が苦手だから無理だ、などという先入観は捨てて、新たな気持ちで臨んでもらえればいいと思います。
プログラミング言語の知識を持っておくということは、例えば建築家が数学の知識があるのと同じようなものだと考えてもいいでしょう。例えば、アートプロジェクトやwebサイト構築などを行なうにしても、実際の現場ではプログラマーとの共同作業という状況が多々あります。その際にプログラミング言語の知識があるのとないのでは大きな違いがあります。プログラミング言語の知識がないデザイナー／アーティストやディレクターの言うことなんて、プログラマーは聞かないでしょう。もしくは仕方なく聞いていても、内心は馬鹿にしているかもしれません。
また、このステップを避けて通ってしまうと、結局はソフトウェアの範囲内でしかものを作れず、既に何年も前に発表された作品の二番煎じ的なものしか作れないのです。自己満足的なことをしたければそれでもいいでしょう。しかし、少なくとも私のこの授業では、新しいメディアデザイン／アートの可能性を垣間見せてくれる表現者を育てたいと考えています。
ですから、理想的なアプローチとしては、まずアイデアを洗練させ、そのプロジェクトに最適なメディアやプラットフォームを選ぶ。ですから、場合によってはMax/MSP、Flash、Processingでもいいかもしれません。しかし、調べてみたら、これは別の言語（Java、Cなど）を選択しないとアイデアを実現させることが難しいと分かったとします。その際にはそれらの言語を短期間で習得するぐらいの馬力が必要になってきます。要は、様々なアイデアを実現させるために、基礎体力をつけておく必要があるのです。
そのような底力のある学生の育成がこの授業の目的です。
2. カリキュラム構成のキーワード
【表現的側面】
点、線、図形、色彩、アニメーション、インタラクション（キーボード入力、マウス入力）
【アルゴリズム的側面】
変数、変数の型、if、else、for、while、switch
【参考サイト・参考作品】
https://r-dimension.xsrv.jp/classes_j/ex_program1_3/
スケジュール
1. プログラミング基礎（9/25）
2. 課題制作（10/2）
前回授業の復習
デバッグ
コメントアウト
コードを分かりやすく書くということ
OpenProcessingへの課題の提出 http://openprocessing.org/classroom/3148
小課題1
3. while構文とfor構文（10/9）
while, forの理解
forのネスト
繰り返しを使った表現
4. while, forの復習（10/16）（10/23）
小課題2
5. if構文の理解（10/23）（10/30）
if（もし〜だったら）
else if（もしくは〜だったら）、else（さもなくば）
if( 条件 && 条件 )
if( 条件 || 条件 )
6. 中間課題の制作（10/30）（11/6）
7. 中間課題講評（11/6）（11/13）
8. アニメーション（11/13）（11/20）
アニメーション
変数のスコープ（範囲）
色彩のアニメーション
9. インタラクション（11/20）（11/27）
キーイベント
switch
マウスイベント
10.タイポグラフィ（11/27）（12/4）
タイポグラフィとは
和文／欧文フォント
フォントファミリー
テキスト（文字）を表示する
11. 最終課題制作（12/4）（12/11）
12. 最終課題制作（12/11）（12/18）
13. 最終課題発表・講評（12/18）（1/8）
課題
●小課題1
前回の授業を元にして、ハンカチの柄をデザインしてください。画像を表示することと、点、線、円、四角形のいずれかを使うことが条件です。
- 画面は400 x 400 ピクセルです。
- 色彩自由。
- なるべく模様になるようにしてください。
- 画像は自分で作成する事。
http://www.openprocessing.org/classroom/3149
●小課題2
点・線・円・四角形・三角形などを用いて、「グラデーションのある美しい」画面を構成しなさい。
・510 x 510ピクセルの画面の中に構成する
・色彩自由
http://www.openprocessing.org/classroom/3290
●中間課題
エル・リシツキー展のための、展覧会ポスター用グラフィックを制作してください。
条件：
- point, line, ellipse, rect, triangle, quadなどを使用していい。forやifも使うこと。また、他に使いたい関数がある場合には教員に確認してください。
- 文字は入れなくていい。イメージのみ。
- サイズは400 x 565 pixelの縦横自由（A4と同じ縦横比）
- インデント、コメントを入れる。
- 画像は自作するか、自分で撮ったものならOK。
ポイント：
- この課題はプログラミングの課題です。
- プログラムで書けるものは、必ずプログラムで書く。
- 「エル・リシツキー」の展覧会であることが第三者に伝わるグラフィックにする。
- エル・リシツキーの作風を調べた上で、自分なりのアレンジを加える。
参考URL
エル・リシツキー（Wikipedia）
Wikipedia画像
http://www.openprocessing.org/classroom/3338
●小課題3
ドローイングソフトを作成してください。
条件：
point, line, ellipse, rect, triangle, quadなどを使用する。他に使いたい関数がある場合には使ってもかまわない。
マウスイベントとキーイベントを必ず使うこと。
必ず「消しゴム」もしくは「リセット」の機能を搭載すること。
サイズは600 x 600 pixel
●最終課題
「新しいAppleのインタラクティブなロゴ」を制作してください。
条件；
・画像は使用してもいいが、ただ画像を張り込んでいるだけのものは不可。
・必ずマウスのインタラクションを入れること。キーボード入力は入れても入れなくてもいい。
・for文は必ず使うこと。
・Appleの本家のロゴは必ずどこかで使うこと。pngファイルの場合は以下のものを使うこと。使うときの大きさは自由。
https://r-dimension.xsrv.jp/classes_j/wp-content/uploads/2013/09/apple_white.png
どのような加工をしてもかまわない（変形等）。アウトラインだけでも構わない。ロゴは、以下のサイトからepsファイルをダウンロードしてください。
http://www.logo1.biz/
・画面サイズは450x 450ピクセル。
参考URL
http://www.google.com/doodles/search?query=Interactive
最終課題は、全員に投票してもらいます。
採点基準；
1. アイデアの独創性
2. デザイン（見た目の面白さ、美しさ）
インタラクションもこの中に入る
3. 技術的難易度
コードをきれいに書いているか（インデント、コメント）も、この中に入る
成績評価
【授業開始30分までは遅刻を認める。それ以降は欠席扱いとする。】
出席→50%、小課題→15%、中間課題→15%、最終課題→20%の割合で評価する。