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

授業概要

今日のweb制作に携わる人間は非常に多岐にわたる知識が求められている。思いつくものを挙げただけでも、最低限以下の知識が必須になるだろう。

• xhtml/CSS
• JavaScript
• Flash（ActionScript）
• グラフィックデザイン（Photoshop、Illustratorの知識含む）
• CGI（Perl）/PHPなどのサーバプログラミング
• 情報アーキテクチャ
• ユーザビリティ/アクセシビリティ
• SEO/SEM

など。
この授業は、そういった需要に応えられる事を前提に、webデザインにおける基本的な知識やプロセスを幅広く習得する。

成績評価

出席→50％　小課題→20%　最終課題→30％

スケジュール

1. xhtml基礎 (9/16)

現代のコミュニケーションメディア

スマートフォン
クラウドサービス
リアルタイムブロードキャスティング　USTREAM
電子書籍
Skype
ソーシャルメディア

まずは、ウェブサイトの構造を確認してみる。
xhtmlの構造
DOCTYPE宣言と使用言語
ヘッダと文字コード
タグ
コメント
ウェブグラフィック（gif, jpeg, png）
画像の書き出し
ハイパーリンク
htmlファイルのファイル名

参考：XHTMLのチェックサイト

実習用ファイル（教員用）

2. xhtml基礎 (9/30)

ハイパーリンクの復習
メディアファイル（サウンド／動画）
サーバへのデータアップロード
パーミッション
メールのリンク
サイトマップ

○課題1　自己紹介サイトのサイトマップ作成
サンプルのサイトマップを参考にして、自身の自己紹介サイトのサイトマップを作成する。サイズはA4、フォーマットはpdf。サイボウズにアップロードする。
最低10ページ以上の項目になるようにサイトマップを作ってくること。
一般的には、趣味や略歴、作品を載せることが多いがそういったものにとらわれる必要はない。独自性の高いアイデアを期待している。
提出期限：10/7（金）15:00まで

3. webデザイン基礎(10/7)

課題2の講評

レイアウト
カラーカンプの作成（グリッド）
画像の加工（Photoshop）
著作権
タイポグラフィ
和文／欧文フォント
フォントファミリー
サイズ／カーニング／トラッキング／行間

実習用ファイル-トップページ（教員用）
実習用ファイル-タイポグラフィ（教員用）

課題2　自身のサイトのトップページ作成（photoshop, illustrator）
幅950 x 高さ上限950ピクセルのトップページを制作する。
作った画面に上下左右に10ピクセルずつの余白を取ってjpegファイルとして出力すること。
よって、提出するファイルは、「学籍番号.jpg」になる。

注：　個人情報なので、自身の氏名は出さずにニックネームなどにする、もしくは名字は出さない、住所なども書かないように気をつけること。

提出期限：

参考：フリー素材、参考サイトなど

4. スタイルシート基礎1 (10/14)

スタイルシート（文字）
webにおける配色

参考：スタイルシートのチェックサイト

実習用ファイル（教員用）css_sample
実習用ファイル（教員用）absolute_sample

5. スタイルシート基礎2 (10/28)

スタイルシート（レイアウト）
ブラウザによる違い
参考：リンク画像の枠線を消す

自分自身を紹介するウェブサイトを作成する。
作成したウェブサイトを使用して、自分自身をプレゼンテーションする。必ず、htmlとCSSを使うこと。

■評価
評価の対象として
1. ウェブサイトのデザイン及び内容の独自性／洗練度
2. 正しくhtml+CSSが記述されているか
3. プレゼンテーション能力
を採点する。

■条件
・最低10ページ以上作成する。
・一人1分30秒以内で、自身のサイトを見せながらプレゼンを行なう。時間は非常に短いので、全部見せることはできないので、ポイントになるページを選んでおくこと。
・Flashは使わないこと。

■提出期限

6. 制作期間 (11/4)

7. 発表・講評 (11/11)

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

位置づけとしては1年のメディアプログラミング演習Iの応用編ですが、メディアプログラミング演習Iを選択していない学生も対応できるようにカリキュラムは構成されています。ですから、引き続き勉強したい人はもちろんのこと、1年次にプログラミングの授業を取っていない人は挑戦し、挫折してしまった人はリベンジをしてみましょう。

1. 何故、アートやデザインにプログラミングが必要なのか

学生と話をしていてプログラミングの話をすると、急に暗い顔になり、「ああ、苦手」という言葉がよく返ってきます。おそらくその学生たちは、プログラミングの学習の仕方がいまいち分からないのと、その深遠な可能性がまだ見えて来ていないのでしょう。それは、教える側の責任もあると思います。実際、自分も独学でJavaを勉強しようとした時、一度挫折しました。しかし、何年か後にもう一度勉強し直してプログラミングができるようになったのです。
ですから、現時点でプログラミングに対する苦手意識がある学生でもいつでもやり直せると考えています。要は、なぜ勉強しなくてはならないのかと、どうやって勉強するのかをもう一度見直せばいいのです。

あともう一つ、プログラミング=数学だと思っている学生も多いでしょう。確かにそうなのですが、数学が苦手でもプログラミングが苦手だとは限りません。実際私も数学は得意ではありません。しかしプログラミングは楽しいと思いました。自身の数学の苦手意識を超える面白さがプログラミングにはあったのだと思います。
ですから、数学が苦手だから無理だ、などという先入観は捨てて、新たな気持ちで臨んでもらえればいいと思います。

プログラミング言語の知識を持っておくということは、例えば建築家が数学の知識があるのと同じようなものだと考えてもいいでしょう。例えば、アートプロジェクトやwebサイト構築などを行なうにしても、実際の現場ではプログラマーとの共同作業という状況が多々あります。その際にプログラミング言語の知識があるのとないのでは大きな違いがあります。プログラミング言語の知識がないアーティスト／デザイナーやディレクターの言うことなんて、プログラマーは聞かないでしょう。もしくは仕方なく聞いていても、内心は馬鹿にしているかもしれません。

また、このステップを避けて通ってしまうと、結局はソフトウェアの範囲内でしかものを作れず、既に何年も前に発表された作品の二番煎じ的なものしか作れないのです。自己満足的なことをしたければそれでもいいでしょう。しかし、少なくとも私のこの授業では、新しいメディアアートの可能性を垣間見せてくれる表現者を育てたいと考えています。
ですから、理想的なアプローチとしては、まずアイデアを洗練させ、そのプロジェクトに最適なメディアやプラットフォームを選ぶ。ですから、場合によってはMax/MSP、Flash、Processingでもいいかもしれません。しかし、調べてみたら、これは別の言語（Java、Cなど）を選択しないとアイデアを実現させることが難しいと分かったとします。その際にはそれらの言語を短期間で習得するぐらいの馬力が必要になってきます。要は、様々なアイデアを実現させるために、基礎体力をつけておく必要があるのです。
そのような底力のある学生の育成がこの授業の目的です。

2. カリキュラム構成のキーワード

【表現的側面】
点、線、図形、色彩、アニメーション、インタラクション（キーボード入力、マウス入力）、サウンド、ビデオ入力、ネットワークコミュニケーション

【アルゴリズム的側面】
変数、変数の型、if、else、for、while、switch、配列（1次元配列 〜 n次元配列）、sine、cosine

3. 参考作品

●2009年度2年グラフィカルプログラミング演習参考作品
（サウンドヴィジュアライザ）
Processingで音の周波数解析を使い、音楽にグラフィックがリアルタイムに反応するサウンドヴィジュアライザを作成している。
ドキュメントビデオ

●2008年度2年グラフィカルプログラミング演習参考作品
（インタラクティブアート）
Processingを使い、リアルタイム画像処理、ネットワーク、サウンドなどを使ったアート作品を制作した。
ドキュメントビデオ

4. 評価

出席率　50%、小課題　10%、中間課題　15%、　最終課題　25%

5. 備考

この授業は、Processingのバージョン1.1を使用して行います。ダウンロードする際には間違えないようにしてください。

6. スケジュール

この授業は前期のみの開講です。
基本的には1年のメディアプログラミング演習Iの続きなのですが、最初の4週はその復習もかねてプログラミングの基礎的な演習を行ないます。
その後、画像処理エフェクト、サウンド、ネットワークなどの応用実習を行ないます。

■9/16 – 第1回　プログラミングの基礎1

自己紹介
なぜインタラクティブアート／ソフトウェアアートにプログラミングが必要か
なぜprocessingなのか
参考書・参考サイト

【技術的側面】
変数、デバッグ、コメントアウト、コードを分かりやすく書くということ、while, forの理解、

■9/30 – 第2回　プログラミングの基礎2

前回の復習　forの入れ子
条件分岐（if, else if, else）
色彩（RGB、HSBなど）

小課題1：
「光のパターン」を表現しなさい。forの入れ子構造を必ず使うこと。point、line、ellipse、rect、triangle、quadを使用していい。色彩は自由。
400 x 400pixelの画面を使用する。

■10/7 – 第3回　アニメーション、インタラクション

アニメーション
インタラクション（キーイベント、switch、マウスイベント）

参考：その他のアニメーションの方式（3D）
1. オブジェクトの作成
2. オブジェクトの移動、回転
3. 座標の保存（pushMatrix, popMatrix）
4. vertex（頂点）を使用した図形の描画
5. ライト
6. カメラ

■10/14 – 第4回　自立的なオブジェクト（配列）

1次元配列の理解、2次元配列の理解

小課題2：
2次元配列を利用して、「反復運動する現象」を表現しなさい。500 x 500ピクセル以内の画面に表現（縦横自由）。アニメーションとインタラクションがあること。形態、色彩自由。

■10/28 – 第5回　現実世界を変換する（画像処理1）

関数による部品（モジュール）化
ライブラリの利用
画像処理1（基礎編）
画像処理2（フレーム差分、背景画像の黒抜き）

中間課題：これまでの実習をもとにして、カメラからのリアルタイム映像を利用して人に反応したり取り込んだ映像にエフェクトをかけるインタラクティブアート作品を作成しなさい。画面は640 x 480 pixel。使いたい人は別のライブラリを利用してもかまわない。

■11/4 – 第6回　中間課題の制作時間

■11/11 – 第7回　中間課題発表

参考：reacTIVision、OpenCV

■11/25 – 第8回　曲線運動（sine, cosine）

sine, cosine

小課題3：
実習を元にして、今までに作った課題を曲線運動による作品にしてください。それは形態の変化でもいいし、色彩の変化でもいい。
500 x 500ピクセル以内の画面に表現（縦横自由）。アニメーションがあること。インタラクションはあってもなくてもいい。形態、色彩自由。

■12/2 – 第9回　サウンド1

minimライブラリの使用、音の基本

■12/9 – 第10回　サウンド2

エフェクト、周波数解析

■12/16 – 第11回　ネットワーク

ネットワーク（OpenSound Control）

■1/6 – 第12回　制作期間

最終課題：Framedという開発環境用にソフトウェアアート作品を制作しなさい。

条件：
・画面は横1280px 縦720pxとする。
・Framedはマイク、カメラ、無線LANを装備しているので、それらの機能を使う事ができます。
・どういった環境（家の居間？レストラン？カフェ？など）で使われるかを決める事

Framedの解説（公式サイトより引用）：
ソフトウェアアート／ウェブアプリケーション／映像／モーショングラフィックといった様々な形式の表現を、暮らしの中で日常的に体験して頂けるようデザインされた、新しい「額縁」。それが「FRAMED*」です。
リビングルームのようなプライベートな生活空間から、ギャラリーやカフェ、レストランといった公共空間まで、様々な空間の中に新鮮な彩りを加える、新しいタイプのインテリア・プロダクトとして、デザインしました。
http://tha.jp/1908

■1/20 – 第13回　講評

最終講評（ゲスト-未定）

7. 最終課題

・制作するものは次のカテゴリーに関連する作品にする。ソフトウェアアート、インタラクティブアート、インスタレーション。
・必ず、授業で学習した内容を反映させること。
・電子工作などの他の授業でやったことを組み合わせてもかまわない。
・画面の大きさは自由だが、なるべくフルスクリーンで見ることができるものが望ましい。

野口研究室は、以下のキーワードに関連するプロジェクト／作品制作を行ないます。

ソフトウェアアート、パブリックメディアアート、インタラクティブアート

基本的には主に2D/3Dグラフィックス、サウンド、ネットワークなどのプログラミング環境を中心に制作や研究を行います。Max/MSPやQuarz Composerなどのビジュアルプログラミング環境も含みます。

学生への要求条件

やる気がある人。作品制作の基盤としてプログラムの実習が多いですが、習熟度は問いません。ゼミでのカリキュラムは基礎的なところから復習します。

習得する能力の目標

1. 芸術的な感性と工学的な技術開発能力の洗練
2. 授業内での発表やディスカッションによる、プレゼンテーション能力の洗練
3. 自身のプロジェクトのリサーチや文献研究を通した、リサーチ力の養成
4. 自身でイベントを企画/運営することによる、プロデュース能力、ディレクション能力、社会性の養成

授業内容

ゼミに分かれた前期の後半は、復習を兼ねてprocessingを使ったプログラミングによる、ソフトウェアアート／インタラクティブアート作品制作の実践的方法を学びます。が、processingの勉強をするわけではありません。プログラミング言語のアルゴリズムの基本を復習するということです。

後期の前半（予定では4週）は、openFrameworksを使用して、より拡張性の高いソフトウェアアート／インタラクティブアートのプログラミング環境を学習します。また、それと平行して各自でテーマを設定しプロジェクト／作品制作を行ないます。この場合、個人／グループどちらでもかまいません。

さらに、後期の最後（2011年2月）を目標として学外でのグループ展を企画します。そのグループ展で後期の作品を発表します。予算はゼミ費から出ますが、このグループ展の運営における予算編成、広報関連の実務を通して、自主的に表現の場を作り、社会との接点を探ることの意味を考えます。

参考：トレジャー・シティ展（2009年のパブリックアートプロジェクト）
僕自身がディレクションしたパブリックアートプロジェクトですが、この展示のノウハウを提供しながら学生独自の企画を考えてもらいます。

教員の専門領域

以下のサイトを参照のこと
http://r-dimension.xsrv.jp/projects_j/

2年制作応用演習　グラフィカルプログラミング演習
http://r-dimension.xsrv.jp/classes_j/2008_processing_2nd/

教員の得意分野

＜領域＞
ソフトウェアデザイン全般、メディアアート全般、グラフィックデザイン（元々はこの分野の出身）、現代美術（今やっている）、都市論、文化人類学（現在、人類学者と共同研究中）

＜技術＞
画像処理プログラミング、Processing、Quartz ComposerやMax/MSPなどのビジュアルプログラミング、Objective-C（Cocoaアプリケーション）、OpenGL、C言語、ActionScript、PHP、MySQL、映像編集など

学生の参考作品

●2009年度卒業制作作品
漂う［住谷愛美］
忌［島谷高史］
ふくみ［岩村卓也］

●2009年度2年グラフィカルプログラミング演習参考作品
（サウンドヴィジュアライザ）
Processingで音の周波数解析を使い、音楽にグラフィックがリアルタイムに反応するサウンドヴィジュアライザを作成している。
ドキュメントビデオ

●2008年度2年グラフィカルプログラミング演習参考作品
（インタラクティブアート）
Processingを使い、リアルタイム画像処理、ネットワーク、サウンドなどを使ったアート作品を制作した。
ドキュメントビデオ

●世界万別　鈴木遼（2007年度卒業）
世界に存在する様々な格差を「地域」、「宗教」、「言語」という切り口から、膨大なデータを駆使して分析しようという試み。Flash ActionScriptを使用している。

●廃墟とデジャブ　内野洋子（2008年度卒業）
デジャブ（既視感）をテーマにしたビデオインスタレーション作品。人が作品の前に立つと、その本人の影で現代の人間や過去の人間が見え隠れする。

3年前期スケジュール（予定）

4/20~6/29 テクニカルワークショップ

1.（7/5）自己紹介

2.（7/12）Media Programming Workshop

アニメーション
インタラクション（キーイベント、switch、マウスイベント）
1次元配列の理解、2次元配列の理解
sine-cosine
関数によるモジュール化

クラス、メソッド
クラスの継承

3.（7/19）4年生の卒業研究中間発表の見学

後期展示の話し合い

4.（7/26）展覧会見学

3年後期スケジュール（予定）

1.（9/13）各自のテーマ発表、グループ展示の経過報告、プログラミング実習

2.（9/20）各自のテーマ発表、グループ展示の経過報告、プログラミング実習

3.（9/27）個人面談

4.（10/4）個人制作の途中経過報告、グループ展示の経過報告、プログラミング実習

5.（10/18）個人制作の途中経過報告、グループ展示の経過報告、プログラミング実習

6.（10/25）個人面談

7.（11/1）個人制作の途中経過報告、グループ展示の経過報告、プログラミング実習

8.（11/8）個人面談

9.（11/22）個人制作の途中経過報告、プログラミング実習

10.（11/29）個人面談

11.（12/6）個人制作の途中経過報告

12.（12/13）個人制作の途中経過報告

13.（12/20）ゼミ内最終講評

14.（1/17）3年全体展示

評価基準

出席は前期、後期それぞれの日程の2/3以上。この出席には、発表会、展示、講評会などが全て含まれます。
前期・後期とも共通の採点基準：　出席 –> 50%　小課題 –> 15%　最終制作 –> 25%　授業参加 –> 10%
ディスカッションが多いので、積極的に参加すること。

ゼミのサイト（ゼミ生向け）

http://r-dimension.xsrv.jp/nog_lab/　

共同プロジェクト／研究への積極参加

学内／学外の共同プロジェクトへの積極参加を希望します。
歌舞伎町アートサイトhttp://kabukicho-art.org/

卒業後の主な進路

Webデザイナー、Webディレクター、システムエンジニア、アーティスト　など

その他

今年度のゼミ旅行はまだ決めていませんが、飛行機使って行ける範囲がいいかなと思います。
基本的にうちの研究室は緩いです。ただゼミの中だけで内輪で盛り上がるのではなく、他学科や他大学、他の団体とも積極的に関係を作ってもらう方がいいですね。

以下の展示が開催される前提で、「パブリックメディアアート」の展示用ポスターのグラフィックを作成しなさい。

展覧会概要

●タイトル：歌舞伎町アートサイト

　副題：GROUND2011 -パブリックメディアアートの挑戦-

●開催期間
　2011年11月19日（土）〜12月3日（日）（15日間）

●会場
　・シネシティ広場（旧コマ劇場前）　東京都新宿区歌舞伎町1-19

　・大久保公園　東京都新宿区歌舞伎町2-43
　・東京都健康プラザハイジア前広場　東京都新宿区歌舞伎町2丁目44番1号

展覧会の目的

現代においてインターネットの役割が社会的に増大していく状況と相反して、都市や地域の固有性および独自性が再評価されつつあります。また、地理情報システムの発達によってGoogle Maps、Foursquareなどのサービスが提供され、人々が新たな視点から地域と関わる可能性が生まれ、私たちと都市との関係も大きく変化してきています。さらに、「公共と個人」の問題を考えたとき、物理的な公共／個人とネットワーク上の公共／個人の関係性が大きな議論となっています。この状況を出発点として、新進気鋭のメディアアーティストを招き、新宿歌舞伎町におけるパブリックメディアアート展をおこないます。ここでいうパブリックメディアアートとは、コンピュータを中心としたメディアテクノロジーを主要な表現手段とし、公共空間をコミュニケーション空間、社会空間とみなし介入していく姿勢を持ったアートプロジェクトの形態です。

キーワード

新宿、歌舞伎町、歴史、記憶、移民、エスニシティ、風俗、再開発、交通、経済、商業的ヴァナキュラー、ヴォイド、コミュニティ、コミュニケーション、ホームレス、遊歩、漂流、心理地理学、まちづくり

条件

• メディアアートの性格とパブリックアートの性格を併せ持ったグラフィックにすること
• 写真やイラストレーションなどをProcessingに取り込んで素材のひとつとすること。それらの素材をどのように加工するかは自由だが、かならずProcessing内でコードによる造形もうまく組み合わせること。つまり、有機的な形態と数学的アルゴリズムによる形態の融合が重要な要素となる。
• 画面は1192 x 840 pixel（Aサイズと同じ比率）。縦横自由。
• 画面内に「歌舞伎町アートサイト」もしくは「Kabukicho Art Site」というテキストを入れる。
• Processingで作成した後に出力する。
• サンプルを参考にして出力すること。idとpassは授業内で告知します。

このテクニカルワークショップでは、プログラミングによる造形と従来のグラフィックデザインで多用されてきた写真やイラストレーションのようなメディアを積極的に統合することを目標とします。

1回目　6/7（火）

1, 2限

ガイダンス、Media Programming Workshop 1
変数、デバッグ、コメントアウト、コードを分かりやすく書くということ、while, forの理解
条件分岐（if, else if, else）

4, 5限

Media Programming Workshop 2
色彩（RGB、HSBなど）
sine, cosine
タイポグラフィ
和文／欧文フォント
フォントファミリー
サイズ／カーニング／トラッキング／行間

課題

2回目　6/14（火）

1限

ゼミの紹介（30分前後）
制作時間

2限

制作時間

4限

制作時間

5限

発表

●キーワード
ネット／モバイルアート（人⇄コンピュータ⇄人）
パブリックインターヴェンション – 公共への介入（人⇄コンピュータ環境）
ロカティブ・メディア（人⇄コンピュータ⇄環境）
バイオアート（人⇄コンピュータ⇄動植物）

6. 人　⇄　コンピュータ　⇄　人

（第2回の続き）

ネットワークというメディア

ネットワーク上のコミュニケーションは、当然のことながらコンピュータを介すことによって初めて成立する。
ソーシャルメディアとは、皆が参加できる情報技術を用いて主にインターネットを通して広がっていくことを目的としたメディア

古くはパソコン通信、メール、インスタントメッセンジャー、チャット、掲示板などを経て、ソーシャルメディアとして発展して来た。
ソーシャルメディアの例

ネットアートの例

News Map
They Rule
中村勇吾　amaztype

モバイルアートの例

ラファエル・ロサノ・ヘメル　Amodal Suspension

7. 人　⇄　コンピュータ　⇄　環境

クシュシトフ・ウディチコ　Projection in Hiroshima

ラファエル・ロサノ・ヘメル　Body Movie、Pulse Park

ウスマン・ハック

8. 人　⇄　コンピュータ　⇄　動物

クローン　人間が全ての生命をコントロールしうる技術　　1996~
ドリー

エドワルド・カッツ　GFP Bunny
http://www.youtube.com/watch?v=evxlR3zJ11o

Natural History of the Enigma（DVD: CyberArts2009 2:20）

Augmented Fish Reality（DVD: CyberArts2004 2:09）

9. 人　⇄　コンピュータ　⇄　植物

The Telegarden

David Bowen　http://www.dwbowen.com/gmdmovie.html
http://www.dwbowen.com/growth.html

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

・画像処理による身体をインタフェースとした作品

マイロン・クルーガー (Video Place1, Video Place2）

Daniel Rozin (Wooden Mirror) 1999

Camille Utterback & Romy Achituv (Text Rain) 1999

Golan Levin (Interstitial Fragment Processor) 2007

Golan Levin & Zachary Lieberman (Reface [Portrait Sequencer]) 2007

2007年度グラフィカルプログラミング演習参考作品

・ヴァーチュアルリアリティ（VR）の先駆け

ジェフリー・ショー（Legible City）

・パフォーマンス

D.V.D（DVD）
ステラーク（Ping Body）

・インタラクションが空間に展開した例

藤幡正樹（Beyond Pages1, Beyond Pages2）

5. 人　⇄　コンピュータ　⇄　人

この形態は、コンピュータを介すことによって普段無意識的に行われている人間同士のコミュニケーションを可視化させる目的の作品が多い。

スコット・スニブ（boundary functions）

John Cage -Variations VII　(DVD)
E.A.T. (Experiments in Art and Technology)の活動中、1966年にベル研究所の協力のもと行われた大規模なサウンドパフォーマンス。
10本の電話回線が新聞社、発電所、演劇のスタジオなどに設置され、それらはリアルタイムに音を収集した。さらに6本のマイクが演奏用の台に付けられ、12本のマイクがジューサーやトースターなどの家庭用器具に付けられた。ラジオ、テレビ、放射能測定装置まで導入された。
光センサーも埋め込まれ、出演者や観客が舞台を動き回ることによって、その音源が変化するという複雑なシステムが組まれていた。現代のインタラクティブアートのさきがけだと言っていい。

レポート課題

以下のページを参照すること（学科内サイト）
http://cb6.media.t-kougei.ac.jp/cgi-bin/ag.cgi?page=BulletinView&bid=72708&gid=0&cid=12978&cp=blc

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

2. インタラクションについて考えてみる

インタラクションとは

相互作用、交互作用、相互交流などと訳される。２つ以上の人、物、事が互いに影響を及ぼすこと。

対象から見たインタラクション

・人　⇄　人
・物　⇄　物
・物　⇄　環境
・人　⇄　コンピュータ
・人　⇄　コンピュータ　⇄　人
・人　⇄　コンピュータ　⇄　環境
・物　⇄　コンピュータ　⇄　物
・植物　⇄　コンピュータ
・動物　⇄　コンピュータ

3. インタラクション別における実例

3-1. 人　⇄　人

ダンス

One Flat Thing, Reproduced
（Synchronous Objects）

お笑い

ラーメンズ（同音異義の交錯）

ジャズ – バップ

まずはブルースの曲を聴き比べる
　Now’s The Time – The Quartet of Charlie Parker
　Sportin’ Crowd – The Jazz Messengers At The Cafe Bohemia
インタープレイを聞いてみる（Waltz For Debby – Bill Evans Trio, ベースが特徴的）
インタープレイとは→ジャズの即興演奏の中でも、より相互作用性が高い演奏。お互いの演奏にリアルタイムに反応することによって演奏全体が変化していく。

2. 物　⇄　物

ペーター・フィッシュリ／ダヴィッド・ヴァイス（事の次第）
佐藤雅彦（ピタゴラ・スイッチ）

3. 物　⇄　環境

テオ・ヤンセン （Strand Beest）

参考
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の画面上の四角形が、それぞれのパターンに対応して動く。

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