授業の目的

現在主流となっているxhtml+CSSを実習によって体験することによる、文書構造とデザインの理解
タイポグラフィやレイアウトの実習を行うことによる、デザイン基礎の学習
自己紹介サイトを制作することによる、他の学生への自身のプレゼンテーション実習

この授業は、アートやデザイン分野の学生にプログラミングを効率よく学習させるため組み立てられたものです。
現在のアートやデザインにおいて、プログラミングの知識があるという事実は、基礎的な教養としても、就職の際のスキルにしても年々その重要度が高まっています。しかし、芸術系の学生にとってはその敷居が高いのも事実です。
よって、この授業ではプログラミングによってグラフィックの描画やサウンドのエフェクト、動画のエフェクト、ネットワークなどの、直接表現に結びつく実践的な方法を学びます。
開発環境は、processingを利用して行います。processingは、マサチューセッツ工科大学で開発されたプログラミング教育用ツールです。
非常に短いコードでプログラムが書けるようになっていますので、初心者でも心配する必要はありません。

授業概要
野口研究室は、以下のキーワードに関連するプロジェクト／作品制作を行ないます。
ソフトウェアアート、パブリックメディアアート、インタラクティブアート
基本的には主に2D/3Dグラフィックス、サウンド、ネットワークなどのプログラミング環境を中心に制作や研究を行います。Max/MSPやQuarz Composerなどのビジュアルプログラミング環境も含みます。
学生への要求条件
やる気がある人。作品制作の基盤としてプログラムの実習が多いですが、習熟度は問いません。ゼミでのカリキュラムは基礎的なところから復習します。

Processingはパソコンに入っているフォントは全て表示できますが、Processing用にフォーマットを変換しないといけないのが非常に面倒なところです。
単に変数の値を表示してみたいなど、簡単に文字を使いたい場合は、以下のような形で書くとシステムフォントを使ってくれます。

課題
以下の展示が開催される前提で、「パブリックメディアアート」の展示用ポスターのグラフィックを作成しなさい。
展覧会概要
●タイトル：歌舞伎町アートサイト
　副題：GROUND2011 -パブリックメディアアートの挑戦-
●開催期間
　2011年11月19日（土）〜12月3日（日）（15日間）

1980年代以降のアート／デザインにおけるコンピュータ化の傾向は21世紀に入って熟成した時期を迎え、今後は従来的な表現とコンピュータによる表現がどのような有機的な結合をもたらすかが問題となっています。また、従来のグラフィックデザインの手法とプログラミングなどの手法を熟知したクリエイターも多くなり、今までは見られなかった新しい表現も出てきています。
例：Ryoichi Kurokawa　http://www.ryoichikurokawa.com/
このテクニカルワークショップでは、プログラミングによる造形と従来のグラフィックデザインで多用されてきた写真やイラストレーションのようなメディアを積極的に統合することを目標とします。
1回目　6/7（火）
1, 2限
ガイダンス、Media Programming Workshop 1
変数、デバッグ、コメントアウト、コードを分かりやすく書くということ、while, forの理解
条件分岐（if, else if, else）

キーワード
●キーワード
ネット／モバイルアート（人⇄コンピュータ⇄人）
パブリックインターヴェンション – 公共への介入（人⇄コンピュータ環境）
ロカティブ・メディア（人⇄コンピュータ⇄環境）
バイオアート（人⇄コンピュータ⇄動植物）
6. 人　⇄　コンピュータ　⇄　人
（第2回の続き）
ネットワークというメディア
ネットワーク上のコミュニケーションは、当然のことながらコンピュータを介すことによって初めて成立する。
ソーシャルメディアとは、皆が参加できる情報技術を用いて主にインターネットを通して広がっていくことを目的としたメディア
古くはパソコン通信、メール、インスタントメッセンジャー、チャット、掲示板などを経て、ソーシャルメディアとして発展して来た。
ソーシャルメディアの例

4. 人　⇄　コンピュータ
インタラクティブアートの形態の中で一番オーソドックスな形態。歴史的にも、マイロン・クルーガーなどの作品はこの形態から始まっている。
基本的には人間とコンピュータの関係は1対1になっている。

1. インタラクティブアートとは
インタラクティブアートとは、鑑賞者を何らかの形で取り込む、インスタレーションを基本とした形式である。
あるインスタレーションは鑑賞者を中に歩いて入らせたり周りを歩かせたりする。作品は多くの場合コンピュータやセンサーを反応させる形になっている。大抵のインターネットアートやエレクトロニックアートの例は、多くの場合インタラクティブである。
鑑賞者がハイパーテキストの環境を操作することができたりする作品もあり、それは作品が外部からのテキストや視覚的な入力を受け入れる形になっているからである。また、鑑賞者はパフォーマンスのシナリオに影響を与えたり、参加することさえもあり得る。（wikipediaの部分を英訳）

ここでは、reacTIVisionというライブラリを紹介します。
参考
http://jp.youtube.com/watch?v=J78U4Hu0qws
http://jp.youtube.com/watch?v=VfipEyEmHx0
http://jp.youtube.com/watch?v=fPOQqF-o1Ec
ダウンロードするファイルは2つあります。
1. reacTIVision vision engine
reacTIVision-1.4-w32.zip (Win32)
reacTIVision-1.4-mac.zip (MacOS X)
ここではMacでの利用法を解説します。
ダウンロードしたzipファイルを解凍すると、「reacTIVision-1.4」フォルダになるので、その中のsimbols –> amoeba.pdf をプリントする。原寸か、70%ぐらいの出力でいいでしょう。

2. reacTIVision client examples
Processing: TUIO_Processing.zip
解凍すると「TUIO_Processing」フォルダになるので、その中の「tuio」フォルダを、processingのlibrariesフォルダに入れる。

3. 「reacTIVision-1.4」フォルダの「reacTIVision.app」を起動する。すると、カメラ選択画面が出てくるので、使用するカメラを選択する。

キャプチャ画面が出てくるので、そこにプリントしたパターンを映すと個体番号が表示され、それぞれの個体が認識されていることが分かる。

4. この「reacTIVision.app」が起動している状態で、「TUIO_Processing」フォルダの中の「TuioDemo」を実行すると、processingの画面上の四角形が、それぞれのパターンに対応して動く。

うーん、よくできてますね。これがフリーソフトとは・・・