この授業は、デザインやアートの分野の学生にプログラミングを効率よく学習させるため組み立てられたものです。
現在のデザインやアートにおいて、プログラミングの知識があるという事実は、基礎的な教養としても、就職の際のスキルにしても年々その重要度が高まっています。しかし、芸術系の学生にとってはその敷居が高いのも事実です。
よって、この授業ではプログラミングによってグラフィックの描画やサウンドのエフェクト、動画のエフェクト、ネットワークなどの、直接表現に結びつく実践的な方法を学びます。
開発環境は、processingを利用して行います。processingは、マサチューセッツ工科大学で開発されたプログラミング教育用ツールです。
非常に短いコードでプログラムが書けるようになっていますので、初心者でも心配する必要はありません。
位置づけとしては1年のメディアプログラミング演習Iの応用編ですが、メディアプログラミング演習Iを選択していない学生も対応できるようにカリキュラムは構成されています。ですから、引き続き勉強したい人はもちろんのこと、1年次にプログラミングの授業を取っていない人は挑戦し、挫折してしまった人はリベンジをしてみましょう。
1. 何故、デザインやアートにプログラミングが必要なのか
学生と話をしていてプログラミングの話をすると、急に暗い顔になり、「ああ、苦手」という言葉がよく返ってきます。おそらくその学生たちは、プログラミングの学習の仕方がいまいち分からないのと、その深遠な可能性がまだ見えて来ていないのでしょう。それは、教える側の責任もあると思います。実際、自分も独学でJavaを勉強しようとした時、一度挫折しました。しかし、何年か後にもう一度勉強し直してプログラミングができるようになったのです。
ですから、現時点でプログラミングに対する苦手意識がある学生でもいつでもやり直せると考えています。要は、なぜ勉強しなくてはならないのかと、どうやって勉強するのかをもう一度見直せばいいのです。
あともう一つ、プログラミング=数学だと思っている学生も多いでしょう。確かにそうなのですが、数学が苦手でもプログラミングが苦手だとは限りません。実際私も数学は得意ではありません。しかしプログラミングは楽しいと思いました。自身の数学の苦手意識を超える面白さがプログラミングにはあったのだと思います。
ですから、数学が苦手だから無理だ、などという先入観は捨てて、新たな気持ちで臨んでもらえればいいと思います。
プログラミング言語の知識を持っておくということは、例えば建築家が数学の知識があるのと同じようなものだと考えてもいいでしょう。例えば、webサイト構築やアートプロジェクトを行なうにしても、実際の現場ではプログラマーとの共同作業という状況が多々あります。その際にプログラミング言語の知識があるのとないのでは大きな違いがあります。プログラミング言語の知識がないデザイナー／アーティストやディレクターの言うことなんて、プログラマーは聞かないでしょう。もしくは仕方なく聞いていても、内心は馬鹿にしているかもしれません。
また、このステップを避けて通ってしまうと、結局はソフトウェアの範囲内でしかものを作れず、既に何年も前に発表された作品の二番煎じ的なものしか作れないのです。自己満足的なことをしたければそれでもいいでしょう。しかし、少なくとも私のこの授業では、新しいメディアデザイン／アートの可能性を垣間見せてくれる表現者を育てたいと考えています。
ですから、理想的なアプローチとしては、まずアイデアを洗練させ、そのプロジェクトに最適なメディアやプラットフォームを選ぶ。ですから、場合によってはMax/MSP、Flashなどでもいいかもしれません。しかし、調べてみたら、これは別の言語（Java、Cなど）を選択しないとアイデアを実現させることが難しいと分かったとします。その際にはそれらの言語を短期間で習得するぐらいの馬力が必要になってきます。要は、様々なアイデアを実現させるために、基礎体力をつけておく必要があるのです。
そのような底力のある学生の育成がこの授業の目的です。
2. カリキュラム構成のキーワード
【表現的側面】
点、線、図形、色彩、アニメーション、インタラクション（キーボード入力、マウス入力）、サウンド、ビデオ入力、ネットワークコミュニケーション
【アルゴリズム的側面】
変数、変数の型、if、else、for、while、switch、配列（1次元配列 〜 n次元配列）、sine、cosine
3. 参考作品
●2009年度2年グラフィカルプログラミング演習参考作品
（サウンドヴィジュアライザ）
Processingで音の周波数解析を使い、音楽にグラフィックがリアルタイムに反応するサウンドヴィジュアライザを作成している。
ドキュメントビデオ
●2008年度2年グラフィカルプログラミング演習参考作品
（インタラクティブアート）
Processingを使い、リアルタイム画像処理、ネットワーク、サウンドなどを使ったアート作品を制作した。
ドキュメントビデオ
4. 評価
出席率 50%、小課題 15%、中間課題 15%、 最終課題 20%
5. 備考
この授業は、Processingのバージョン1.1を使用して行います。ダウンロードする際には間違えないようにしてください。
6. スケジュール
この授業は後期のみの開講です。
基本的には1年のメディアプログラミング演習Iの続きなのですが、最初の3週はその復習もかねてプログラミングの基礎的な演習を行ないます。
その後、画像処理エフェクト、サウンド、ネットワークなどの応用実習を行ないます。
■9/14 – 第1回 プログラミングの基礎1
自己紹介
なぜソフトウェアデザイン／インタラクティブアートにプログラミングが必要か
なぜprocessingなのか
参考書・参考サイト
【技術的側面】
変数、デバッグ、コメントアウト、コードを分かりやすく書くということ、while, forの理解、
■9/21 – 第2回 プログラミングの基礎2
前回の復習 forの入れ子
条件分岐（if, else if, else）
色彩（RGB、HSBなど）
小課題1：「光」を表現しなさい。forの入れ子構造を必ず使うこと。point、line、ellipse、rect、triangle、quadを使用していい。色彩は自由。
400 x 400pixelの画面を使用する。
■9/28 – 第3回 アニメーション、インタラクション
アニメーション
インタラクション（キーイベント、switch、マウスイベント）
参考：その他のアニメーションの方式（3D）
1. オブジェクトの作成
2. オブジェクトの移動、回転
3. 座標の保存（pushMatrix, popMatrix）
4. vertex（頂点）を使用した図形の描画
5. ライト
6. カメラ
■10/5 – 第4回 自立的なオブジェクト（配列）
■10/12 – 第5回 現実世界を変換する（画像処理1）
関数による部品（モジュール）化
ライブラリの利用
画像処理1（基礎編）
画像処理2（フレーム差分、背景画像の黒抜き）
■10/26 – 第6回 中間課題の制作時間
参考：画像の表示
中間課題
キャプチャ映像を利用して、現実空間を変換して新たな空間を作ってください
仮想的な空間でも実際に存在する空間でもいいですが、各自具体的な空間の設定を決めてください。
例：海の中の空間、空の上の空間、夢の中の空間、宇宙空間、キュビズム的空間、印象派的空間、ウォーホール的空間、マンガ的空間など？
条件：720 x 480pixelの画面で表現する
■11/2 – 第7回 中間課題発表
■11/9 – 第8回 曲線運動（sine, cosine）
■11/16 – 第9回 サウンド1
■11/30 – 第10回 サウンド2
小課題2：
サウンドビジュアライザの作成
条件：
音源、画面サイズ自由
講評では２分間再生する
ともかく、面白い、美しい、かっこいいなど、2分間みても見飽きないものを作成してください。
■12/7 – 第11回 ネットワーク
■12/14 – 第12回 制作期間
最終課題企画発表（プレゼン）：1人5分
インタラクティブ広告の概要をA4サイズ1枚にまとめる。まとめ方は自由だが、第三者に分かるようにまとめること。pdfにしてサイボウズに提出。
■12/21 – 第13回 制作期間
■1/11 – 第14回 最終講評（ゲスト-藤本直明さん）
7. 最終課題
実習で習得した内容を使って、公共空間でのインタラクティブ広告を提案しなさい。実際にどのような場所で使われるのかを想定し、その場所の写真（2、3枚）を撮ってくること。また、その場所で最低2時間は人間観察すること。
例：駅構内の通路。ファッションブランドの店舗内など。
条件
- どのようなインタラクションをデザインするかを明確にして提案すること。入力方法は、タッチパネル、画像処理、音声入力、ネットワークなどが例としてあげられる。
- どのような企業を選ぶかは自由だが、実在する企業を選んで、その企業そのものや企業の製品やサービスのPRに使われる広告とすること。
- この授業での最終課題はデモンストレーションの実演なので、実機を作るということではありません。例えばタッチパネルの製品は作ることができないので、タッチパネルの場合はどう動くかをいうことを実演する。が、インタラクションは必ずプログラムによって実現すること。
参考サイト
http://www.youtube.com/watch?v=qDmP3ljU-UQ
http://www.youtube.com/watch?v=nVGCD66G5dA
http://www.youtube.com/watch?v=_X2-_t5f_IA
http://www.youtube.com/watch?v=a-NRdyUx8Lc
http://www.youtube.com/watch?v=5j4Mioy_HKY
他にも探せば色々な広告があると思います。
参考デバイス
最近はジェスチャー入力機器であるkinect等が使われるケースが増えています。
Processingでもkinectは使えるので、使ってみたい人は以下にライブラリがあります。授業では直接教えませんが、独学で挑戦してみたい人はどうぞ。kinectは貸し出します。
https://code.google.com/p/simple-openni/