Pointer Pointerの仕組み

Jonathan Puckeyが作ったPointer Pointerというサイトがある。話題になったので見た人も多いと思うが、マウスを置くとそこを指差した写真が表示される作品だ。何となく彼のGithubを見ていたら、voronoi-gridというリポジトリがあり、そこにexampleとしてあのサイトの仕組みがわかるコードがあった。

マウスを置くとそこを指で差す写真が表示される、というのは一見単純でくだらないアイディアのようでいて、どう作るかを考えると途方に暮れてしまう。まず思いつくのは画面を等間隔のグリッドで分割し、それぞれに当てはまる写真を撮影する方法だ。しかし、あの質感も含め、無作為に選ばれたような雰囲気は、なかなか意図して出せないだろう。次に考えるのが検索だが、座標に合った位置を指差している写真を探すのはかなり難しい。クラウドソースでひとつひとつお願いして集めるのは可能かも知れないが、これも労力がかかる。

彼の賢さは、これを写真から出発して作り上げたところにある。直接聞いた訳ではないので推測にしかならないが、ソースコードを読み、フォルダ構成を見ればその思考の流れが分かる。

1. まず人が指を差している写真を集め、全てのサイズを合わせる。
2. Photoshopなどでカーソルを指の位置に合わせて座標を特定し、ファイル名の末尾に付け加える。
3. 次に、それを頼りにX座標、Y座標、画像ファイル名をまとめたJavaScriptオブジェクトの配列としてpoints.jsに記録する。
4. points.jsからデータを読み出し、X座標とY座標の集合からボロノイ分割を作る。ボロノイ分割は、ある点と点の距離が等しくなる線で領域を分割するアルゴリズムだ。これで「写真の指が差している座標で」分割された領域を作ることができる。
5. あとはマウスの位置が分割されたどの領域上にあるかを特定し、その母点の座標を元に該当のファイルを読み出して表示する。

さらに素晴らしいのは、点の増減が簡単にできることだ。新たな写真を追加し、座標を特定してファイル名をつけ、points.jsにオブジェクトを書き込むだけ。指がどこを差していようが関係なく、プログラムを変更することもなく、どんどん追加できる。削除する場合は、points.jsからオブジェクトを消せば良い。ある点が削除されたとしても、アルゴリズムによって再度領域が分割され、別の写真が割り当てられるので、マウスを合わせた時の自然さは保たれる。

これが最初に考えたような等間隔のグリッドだとどうだろう？1枚だけ追加するとか、1枚だけ削除することはできず、分割した行や列単位で増減させないといけない。プログラムの修正も必要になる。

アイディア自体の面白さだけでなく、仕組みもエレガントで、本当にすごい。

※ exampleのコードではpoints.jsは使ってなくて、おそらくgetPoints()の内部にコピー&ペーストしているが、保守性を考えるとpoints.jsを使うのが望ましい。

2014年とインターネット

2013年の5月から2014年の3月末まではゲーム会社にいて、一度インターネットから結構離脱してしまっていたので、何か決定的に以前と付き合い方が変わってしまった気がしている。なのであまり新しいサービスを使ったりした印象はないけど、よく見ていたものや、印象に残ったものを定点観測的に。

リベンジポルノやバイラルメディア、クソリプなどなどにより、好きだったインターネットは最早地獄と化していて、かつて掲示板で言い合った匿名の人達ですら仲間だったんじゃないかと思うくらいに断絶がある。

YouTuberとかVinerは本当に全然知らない土地を発見した感じだった。

ニュース

• Zite 機械学習でニュースを配信。Flipboardに買収された。
• Product Hunt アプリケーションとかサービスの紹介。
• The Morning News これのフィードがテキストリンクのみで好み。

視覚芸術

• Toru Izumida デスクトップとかインターネットをモチーフとして使いつつも、チープな感じにならず構成に驚きがあって印象に残った。
• Instagram 主に海外デザイナーとアイドルと友達(の子供)を見ていた。海外デザイナーは沢山作ってるものやお洒落な場所を投稿している。食べ物はほとんどない。
• Tumblr 今年も間違いなかった。ダッシュボード全体が切り替わるプロモーションなど、安易なバナーや無駄なページの挟み込みとは異なる発想で広告のあり方を実験している。グッズもいい感じ。
• Trend List 今ってこんな感じなんだなという感じはする。

勉強

• Safari Books Online 最高だった。書籍を横断して同じテーマを集中的に調べることができるのは本当に助かる。マニュアル通りに動かした程度の情報が溢れかえっている今、一歩踏み込んで体系的に技術を調べるには最適だと思う。Processing関連の本も結構ある。
• tuts+ デザイン、イラストレーション、プログラミングからビジネスまで幅広く学べる。初めはアプリケーションの使いこなし方が主だったけど、コンピュータに限らない表現や基礎的な理論も増えてきている。
• Khan Academy コンピュータサイエンスと数学の勉強に使ってる。ゲーミフィケーションがうまく1週間に1回は必ずやってる。
• Udacity コンピュータサイエンス、デザイン思考の授業を取った。Unityとかゲームプログラミングのコースもある。
• Lumosity 神経科学を元にした脳を鍛えるゲーム。睡眠時間が短いと明らかに成績が悪くなるのでやっぱり寝た方が良いということが分かった。ゲームは成績に影響するので楽しくやれるというよりかはストレスが溜まる。

音楽

• 8tracks 人力と機械学習の組み合わせがいい感じ。知らなかった昔の名曲を知ることが多い。UIも好み。
• Soundcloud 新しいものが聴きたくなったら。
• Mixcloud UIが結構好みで、友達のmixを聴くのに重宝した。Tracklistの仕組みも素晴らしい。

Designing Tumblr

Tumblr解説本、Designing Tumblrを献本していただきました。ありがとうございます。僕が関わったKAKATO、梅川良満さんのTumblrも紹介してもらってます。あとthirozumiさんのページで投稿されてるのが僕のTEE PARTYの商品です。

で、KAKATOで使ったURLをランダマイズするスクリプトの掲載部分が中途半端だったので、補足しておきます。urls配列に入れたURLをダウンロードボタンとして使っているa要素(id="downloadURL")にセットするところ。

var urls = ["ダウンロードURL1","ダウンロードURL2","ダウンロードURL3"];
var a = document.getElementById("downloadURL");
a.href = urls[Math.floor(Math.random() * urls.length)];

アップロード先のサーバが混雑してたり落ちてたらURLだけ分散しても意味ないので、実際にこのような目的で使う場合はアップロード先も分散しておいた方がよいと思います。

本当は技術的なレビューとか面白いTumblrのセレクションで参加する予定だったのですが忙し過ぎで何一つできなかったので、代わりにと言うか何と言うか、せっかくなので書籍を参考にTumblrのテーマを作ろうかと思います。

今まではCustomizeのEdit HTMLで編集してた(もしくはローカルのHTMLからコピー&ペースト)んだけどストレス溜まるので、ローカルで開発環境を整えたい。

書籍にはfumblrが紹介されてたんだけど、環境の問題かすんなり動かなかったので深追いせずにThimbleを使うことにした。PHP製なのでXAMPPとかですぐ動かせる。どっちも微妙に古くて新しいタグに対応してなさそう。仕組みとしてはテンプレートタグをパースしてるだけっぽいので、自分で拡張すればよいかも。とりあえずforkしておいた。

□□□『CD』

□□□の新しいアルバム『CD』のグラフィックを作ったり、
MV作ったり、

Web作ったり、
CDの読み方
ライブの演出を手伝ったりしました。
どれも全体のアートディレクションは伊藤ガビンさん、グラフィックデザインはいすたえこさんです。
ボストークという会社で制作してました。

本当はそれぞれのタイミングで書くのが良かったのだけど、途切れることなく山場が続いたので全く告知できず。
色々まとめようかと思ってたけどインタビューが掲載されたのでそっち読んでもらった方がいいかも知れない。Webもいくつかの雑誌に載るらしいです。
初回版もうすぐなくなりそうとのことで、売り上げに貢献できたっぽくて嬉しいです。

テクニカルな部分に関してはProcessingをめちゃくちゃ使っていて、PDFの書き出しがとても役立った。ジャケットやTシャツ、ポスターなどサイズが変わったりしても扱いやすい。gupon君にデータを渡すために連番のPDFを書き出したり、PDFだと何故かAfterEffectsが落ちるからXpdfてのでEPSに変換したり、細かい部分で色々勉強になりました。
歌詞の文字の重複をなくしたり、濃度順に並び替える部分はpython使ったり。

MVの最後の方の文字が右上に上がって行くところは元々Evan Rothが作ったjay-zのプログラムっぽいことをやろうとしてProcessingに移植して作った。文字と文字がぶつからないようにとか色々改良してある。ソース読む限り元ネタはおそらくGoran Levinのこれ。

で、僭越ながらアルバムの内容紹介です。
1. はじまり
デモの段階からすごく変わった曲。音の響きが気持ちいい。後半の盛り上がりは感動的。大好き。作業中はずっと「ひび きあい(日々気合・響き合い)」を繰り返してた。歌詞カードがもうすぐWebで見られますが、このビジュアルから始めて曲作ったそうです。右チャンネルと左チャンネルからそれぞれ音が鳴って、右は「右」の母音(いい)、左は「左」の母音(いあい)になってる。というのを感じさせないで普通に聴けてしまうのは良いのか悪いのか。

2. 1234 feat.内田慈
4人の登場人物がそれぞれ別々の拍子で歌う。映画のカット割を意識してるらしいけど本当にそんな感じで映像が浮かぶ。内田慈さんの声がいい。「フォルダから携帯のデータ ワン」のとことかね。これはWebで歌詞カード見れます。
内田さんにはライブ2日目での怪演に衝撃を受けた。『スカイツリー』の写メとか、『Tokyo』でのキュートさとか。ロリコンが直るレベル。

3. ヒップホップの経年変化
せいこうさんの『ヒップホップの初期衝動』の続き。音はよりハードで、リリックにも励まされる。これのMVもガビンさん監督で、gupon君と牧鉄平さんがアニメーションと編集をしました。ucnvさんに作ってもらったグリッチ版、『「ヒップホップの経年変化」の経年変化 by ucnv』もかっこいい。熟女好きになるレベル。

4. 恋はリズムに乗って feat.大木美佐子
元メンバーの大木さんがボーカル。爽やかでキャッチー。最初に皆これ好きになるでしょ。

5. スカイツリー
吾妻橋ダンスクロッシングで発表した作品。僕、観てたのですが寝てました。。年末にしのださん一人でのパフォーマンスも観ていて、その時はまだ何かの可能性は感じたけど完成ではないなぁという印象だった。別々に進行してる人や物事がある瞬間に交差して、よく分からないけど生まれるいい時間。『Tokyo』に続く東京シリーズで、ただ東京で生活してる感じがしてすごくいい。交通手段も通信手段も発達した今、これくらいの温度感だと思う。岡崎京子さんの漫画みたいな？僕も東京に対して思い入れはあるけど、いわゆる故郷を離れてどうとか、冷たい街とかのステレオタイプなイメージとは全然違う。ライブ2日目では細金監督の超絶映像と内田さんの怪演で確実にこの日のハイライトだった。

6. あたらしいたましい feat.金田朋美
4つ打ちのエレクトロっぽい音色で、最初聴いた時はすごく戸惑ったけど今ではとても好きな曲。男女2つのフレーズが組み替えられて曲ができあがっていく。MVではしつこいくらいにそこを強調した。マスタリング終わったら時間長くなってて焦った。

7. ちょwwwおまwwww
僕は割と綺麗にまとまる方向が好きなんですけど、こういう曲を入れてくるところに余裕を感じる。慣れるとちょっとはまる。ライブ1日目で披露したファンキーなバージョンがとてもかっこいい。全然違う曲。そして1日目終わった後にあっさり2日目用に長いのを作ってきてくれた。リハーサルで初めて聴いて、終わってからプログラム書き直し。本当に「ちょwwwおまwwww」て言いながらやってた感じ。

8. ヵゝヵゞゐ。feat.RUMI
かっこいい。知らずに聴いたら□□□だと気付かないのではないだろうか。「ｷﾀｰ」のところからのグルーヴ感が好き。ライブ1日目のせいこうさん版もよかった。

9. iuai feat.まつゆう*
村田シゲさんが作った曲。夜に聴きたくなる。サビの部分が全て同じ母音で、歌詞も英語みたいな日本語で音として面白い。正確な日本語としては意味が分からないけど、感覚として分かる。

10. lʌ'v mi
僕は□□□のインストが好きで、『Kuchiroro Posse』とか最高だと思ってる。何て言うかかわいい。この曲はさらにキラキラした歌心がある。

デモは上がってくる度に良くなるし、ライブではさらにアレンジを変えてくるし、毎回驚かされて、刺激の多い案件でした。それに加えていすさんやいしい君のグラフィックだったりgupon君の映像だったり、細金君の映像が加わって来て、水尻さんとかucnvさんとか谷口君も巻き込んで、自分も奮起させられたし、結果面白いものになったのではないかと思います。締め切り直前の追い上げ感は卒展とかの盛り上がりに近い。プロがそれじゃ駄目なのかも知れないけど。音楽だけでなく映像やグラフィックも含めてこういう過剰さを持ったアーティストって僕が10代だった頃はフリッパーズギターとかフィッシュマンズとか電気グルーヴだったりしたと思うんだけど(oasisとか聴いてたのでリアルタイムでは通過してない)、今の□□□はそういう存在だと思う。

pre presentation

修士制作予備審査終了。前日に受けたアドバイス(とにかくでかくプロジェクションしろ、でかい音を出せ、今何やってるかわかるようにしろ)が効いて何とか乗り切った感じ。素早い変更ができるのはprocessingとかmax/mspの最大の利点。

複数行の入力を可能にして、回転を加えたところ、波形は面白くなった。
テキスト操作の結果、音響合成の理論ではどういう効果に位置づけられるのかというところを丁寧に調べていく必要がある。文字の幅を調整して周波数を変えるとか、90度回転させて打ち込むと普通の波形テーブルの編集みたいになるとか。

今回はキーボードでテキスト編集、マウスで形状変化、という風にしたけど、tex/tspでやってたみたいにコマンドっぽい機能をつければまた変わると思う。マウスじゃなくてフェーダーとかツマミで操作もしたい。最初はグリッチだったりエラーを利用して楽しむ感じだったけど、次の段階はそれをオーガナイズすること。耳を頼りに操作してかっこいいグラフィックができてるとか夢。

アカデミーの高桑教授が本気でプログラム書く時はモニタ見ないでうなだれた状態で目を閉じてキーボードをタイプするそうだ。大度君も本気で演奏する時は目を閉じるとか言ってたし、触覚的なインターフェースについてももっと考察してもいい。視覚的にいくらリッチにしたところで越えられない壁ってのはやっぱりある。

去年思い描いていた通りGUIもCUIもフィジカルコンピューティングもデザインも音響もグリッチも全部広く浅く盛り込んだ作品になりそう。

解放感というよりは、上記のようなブラフをどれくらい実現できるのかってとこの重圧。
とはいえ進むべき方向が見えつつあるのはいい。

sonic typeface src

minimで任意の波形テーブルを作るのはすごく簡単で、AudioSignalインターフェースを実装すればいい。exampleにあるので、参考に。

generate()メソッドに渡されるsamp[]の中に-1から1の値を突っ込む。
512サンプルの波形テーブルにするため、512ピクセルの画像を用意して、上から下、左から右にスキャン。

解説というか、自分でちゃんとわかってるか確認のためメモ(下のリンク先にあるソース参照)。
まずピクセル全てに番号を振る。

色が閾値以下の値を持っている場合(元画像を黒で作ってあるので、適当に赤成分が50以下、としました)、その番号。それ以外は0にして、sndArrayに入れる。

sndArrayの中で最大値と最小値を出す。最小値は0が最初に0でない数値を受け取ったときの値になるはず。boolean型の変数startで判別。

0の数はoffsetという変数に入れて最終的に振幅をそんだけ分持ち上げる。

次のif文でまずsndArray内に0でない値が入っているか(描画すべきピクセルがあるか)を判別し、
x%2==1が真のときに下のエッジ(highとlowの差+offset)、偽のときに上のエッジ(offset)をプロット。
(10/10訂正:上下が逆だったので直しました。)

あとはmap関数に任せれば、0から1の間で適当に補完してくれる。lowを1に、highを0にすることで、元画像と書き出された波形を一致させることができた。

タイポグラフィの専門用語で言うところのカウンター(counter)、文字の中の閉じられて中空になっている部分とか、入り組んだ部分、つまりhighとlowの間に0が入ってるところは潰されてしまう。描画の密度に差を持たせれば擬似的に空間を見せることは可能かもしれない。miujunさんのは多分そういう感じ。

今のところ画像読み込んでるだけだけど、テキスト編集する感じで音に直結できればいいなと。カーニングとか、長体とか、フォントを変えることによって音が変化する。それでプログラミングができて、さらにその音の解析からまたコードが生成されて、フィードバックする。

sourceの方はprocessingで実行してクリックすると画像と音を書き出します。色々試してみて下さい。minimライブラリが必要です。
applet
source(zip file)

Electrical Tape Sign Art

修悦体、騒ぎ過ぎじゃないかと思う。
修悦体で新宿駅が便利に（佐藤修悦さんのガムテープフォントドキュメント）　トリオフォー[34]

独特な形に洗練された文字がガムテープで作られていたこと、それが特に専門的なデザインを学んだ訳でもない駅員の手によるものであったこと、何より好意からであったこと、は確かに驚きだったし、心温まる話であった。

けど、展覧会が開かれたり、皆が駅で写真撮るようになったり、装飾が過剰になってきたり、グッズが作られていったりすると、違うんじゃないかと思う。

サインとしてアイキャッチと可読性は重要だと思うし、見ていて楽しくなったりその場の雰囲気を演出してたりすれば尚いいと思う。話のインパクトとしてはそりゃあ素人が誰に頼まれた訳でもなくあんなものを作り出した方が強いとは思うんだけど、「デザイン」という観点からすれば、今の持ち上げられ方は偏ってると思う訳です。

そもそもテープでサインを作ること自体は他でもやってる人はいる。勿論これらは職業デザイナーが費用対効果を考えた上で作ってるものではあるのだけど。
Vier5
Fulguro

『情報デザイン 分かりやすさの設計』という本の中に、「公共情報デザインの落とし穴」というタイトルで興味深いコラムがある。

"汎用のデザインは、地域固有の習慣に足下をすくわれる。しかも周囲の環境の変化に合わせて成長する余地も想定されていない。"

"デザイン上の課題に直面している人々、能力のあるなしにかかわらず、維持管理の必要と欲求に突き動かされて手を下した人々から学ぶべきなのである。"
情報デザイン

普段使っている駅の過剰な貼紙やアナウンスは、本当に不快で排除すべきだと僕は思う。が、おそらく必要だからやっている訳で、つまりは元々のデザインが成功していないということ。それは見直されるべき問題なんじゃないか。修悦体も、公共空間におけるデザインの、ひとつの批評として受け取りたいと思う。

こんな凄い人がいる、とか調べてみるとこんな面白いことがある、というのを伝えたいとか、広めることは悪いことではないと思うし、興奮を抑えるのは大変だし、受け取る側のリアクションにまではなかなか責任もとれないとは思うけど、単なる面白看板発見みたいな感じで終わるのは勿体無いと思う。マスメディアじゃないところから発信、というところも良かったのに、結局マスメディアによる報道と同じようにツーリズム的な消費がされてしまうのは残念だ(沢山見たい気持ちはわかる。Tシャツとか欲しくなるのもわかるけど、そこは大人になりましょうという話)。

ess vs minim

processingで音を扱うライブラリのessとminimのどっちがどっちだって話。徹底比較した訳ではないので、自分が使った範囲で覚えておこうと思うところのメモです。

ess
メリット
FFTを使う場合、damp()メソッドで値を滑らかにできたりして、ビジュアライゼーションには便利。
envelopeクラスがあるので、オシレータを組み合わせて音を作っていくのには向いてるかも。フィルターなどエフェクトもminimよりかは充実してる。

デメリット
サウンドファイルを読み込む場合、モノラルでしか扱えない。
mp3ファイルを読み込みたい場合は下記のファイルが必要。
tritonus_share.jar
mp3spi1.9.2.jar
jl1.0.jar
スケッチのあるフォルダにcodeというフォルダを作って入れておく。

長いサウンドファイルを読み込む場合はAudioStreamクラスを使う。その際

void audioStreamWrite(AudioStream theStream) {
// read the next chunk
int samplesRead=myFile.read(myStream);
}

というようなメソッドを作ってFileクラスから読み込んだ音をチャンクに入れていく（theStreamという仮引数は何をしてるんだろう...）。

minim
メリット
サウンドファイルが使いやすい。mp3ファイルが外部ファイルなしでそのまま使える。AudioSnippetクラス、AudioSampleクラス、AudioPlayerクラスなど用途に合わせていくつかクラスが存在する。AudioPlayerクラスはステレオでファイルが扱えてleftやrightというフィールド変数を持っているので、FFTなどで左右の値を取得できる。

BeatDetectクラスもあったりして解析系は便利(精度は怪しいかも知れない)。

デメリット
envelopeなどがなく、複雑な音の加工には向いてないかも。envelope、自分で用意するのだろうか(pythonだけど、ここのSound11 Kick drumみたいに)...。

僕の場合、現状ではできることとかやりやすさに合わせて使うライブラリを変えてます。まだまだどちらも発展途上。

興味があるのは、相変わらず自分で波形を定義する方法。
ess
Processing 1.0 (BETA) - Functional example of ESS Generative Audio

minim
exampleにUserDefinedSignalってのがあります。UserDefinedEffectってのもある。面白そう。

知らなかったけど、processing公式サイトにライブラリのサンプルコードがありますね。ライブラリの配布元とは違う内容で、参考になります。今日記事書いて良かった！
Learning \ Processing 1.0 (BETA)

designing interface

デザイニング・インターフェース —パターンによる実践的インタラクションデザイン

任天堂の岩田社長曰く、「生活に必要なものなら、説明書を読んで皆使おうとするけど、ゲームは娯楽だから、説明書を隅々まで読んで理解しようとはしてくれない。だから説明書を読まなくても遊べるようにデザインしなければならない。それができるっていうのは、実はすごいことなんですよね。」と。実際任天堂のあるゲームを中古で買ったら説明書がついてこなかったんだけど、はじめにチュートリアルというか、練習ステージがあって、必要な操作はそこで覚えられるようになってる。「修行」的なニュアンスでゲームのお話の中に取り込んであって、作業感を減らす工夫もしてある。中古で買う層を意識してこのステージがあるのでは思いたくなるような気の利きよう。やはりデザインに必要なのは人の行動をよく観察することだ。この本では非常に多くのパターンが網羅されていて、僕はそういうカテゴライズとかジャーゴンが結構好きなので(悪い癖)、興味深く読んでいる。ipodパターンは「1ウィンドウでのドリルダウン(one-window drilldown)」と言うそうだ。

インターフェースデザイン、という言葉はよく耳にする(もう先端分野では下火かも)が、単に表面のかっこよさとかアフォーダンスがどうとかだけでなく、シーケンスのデザインの重要性を考えさせられる。まず人は最初にどこを見て、何をするか、それに対してどのような選択肢を用意し、答えを返すのか。デザイナーが「これがいい」と思うものだけでなく、慣用的に使われているもの、異なる文化背景、異なる身体を考慮しなければならない。ビジュアルによるスケッチが時には考えが限定されてしまう可能性だってある。抽象的に考えられる力、分類する力を鍛えなければならない。

すごいことをするようになればなるほど普通になる、とはよく言われることだが、最近はそういう普通のすごいことに興味を持つようになった。今回結構悩みながらやっとprocessingでdrag & dropのデータ入れ替えに成功した。気づいてみれば簡単なことなんだけど、元々プログラミングの素養がない僕にとっては難しかった。かっこいいグラフィックや面白い動きをするコードはよくwebで公開されてるんだけど、こういう渋いやつはない。体験的には「普通」だし。dragで移す途中に半透明のデータを表示させるのもわざわざコーディングしたんだもんね。そう考えるとosとかってすげーなと。身の回りのものが全部誰かしらの手が加わってできているということを考えた時に感じるクラクラ感と同じ。多分、今のコードはアルゴリズム的に問題あったりするんだろうけど、例えばdrag & dropのもっと面白いエフェクトを試すとか、効果的なインタラクションを考えるラピッドプロトタイピングとか、使いようはあると思う。興味ある方どうぞ。

dragndrop

altitude

ALTITUDE – Contemporary Swiss Graphic Design
スイスのデザインブック。印刷とかwebとかのジャンルではなくGoing PublicとかExperimental Systemsとかテーマに分けて紹介してある。個人的に興味深かったのはExperimental Systemsなんだけど、Rafael KochとかJürg Lehniとかが評価されてるのは、それ自体では人の興味をひかないもの（機械の廃材とかスプレー缶、ホワイトボードなど）にテクノロジーを加えること、またはテクノロジーを通して表現することで面白い、魅力的なものに変化させてしまうところだということが分かった。他にもデータや情報の視覚化のヒントが詰まっている。あ、こんなことやっていいんだ、っていう。単にスタイリッシュなだけじゃなくてちゃんと背景や思想がありつつ、理屈抜きに見てもかっこいい、ってのが最高にかっこいい。

卓球のラリーの軌跡をグラフィックにしてたやつも面白かったな。pathとかpixelの濃淡で表したりとか。新聞で暴力的な話題を扱っている記事を赤く塗ったものも分かり易くメッセージ性を感じる。

infomation aestheticsってサイトがすげー好きなんだけど、そういう感じ。

jamesのdesign workshopでも日常的にあるものから色やグリッドを見つけて作品にするって課題をしたけど、当時はよくわかってなかったな。豆腐を切って、重みでできたずれをグリッドに使った人がいたんだけど、例えばそのグリッドで豆腐の本を作れば、たとえ文字組が変だったり、一般的なデザインでは「やってはいけないこと」だったりしてもそれ以外の大切なフィーリングが伝わることもある。ということ。it is messy, but works.

open studio review

open studioのreview、講評会というか反省会というか。が、開かれました。内容はほぼお説教だったけど。僕が考えてたように、展覧会という形式とAMSで作ってる作品というのは相容れない要素があることは共通認識としてあって、jamesが言うには、「ちょっと行き過ぎたくらいの形で実現しないと意図は伝わらない」と。僕の作品であれば、とにかく沢山の引き出しがあるとか、考えたインタラクションのシナリオを全てスケッチに描き起こして掲示するとか。理想的な形をひとつ展示するのでなく、全部盛込んでしまう。確かにそうすれば見た目にはスマートでないがインパクトはあるものになる。特に僕の作品は音がメインなので、視覚的にキャッチできないから気付かなかった人も多かった。think everything!だね。

実現が難しいものはそもそもデザイン的に間違ってると考えてもいい。ことインタラクションデザインに限れば、どうすればそのフィーリングが得られるか、にフォーカスした方がいいのかも知れない。最初にマウスが発表された時も、実はちゃんと動いてなくて、マウスを操作してるふりをする人と、裏でその通りに動くようにプログラムする人がいたそうだ。考えてることをちゃんと伝えないと、プロジェクトを進める人やお金を集められない。そのために必要なことは何か。

とにかく考えたことをどんな形であれ作ってみる。フィードバックを得て改良する。深く考える。また作る。その繰り返し。もう大分この分野でも表現方法が出尽くしてきてて、ファーストアイディアで新しいものが生まれるほど甘くはない。

open studio

4日徹夜して作り上げたopen studio。GanguプロジェクトとAMSプロジェクトの共同成果発表。プロトタイプの展示になるので、両方とも完成作品として見せられる状態ではないのが残念だが、会場デザインやプロジェクトの雰囲気などで楽しんでもらえればと思う。

jamesに言われたのは、とにかくクオリティの低さ。コンセプトとかやろうとしてることはすごくいいんだから頑張れと。で、確かにそれは言う通りで、僕自身「プロトタイプだからこんなもんでいいや」という意識があってしまったのは事実。もっとわがままに質問したり、業者に発注したり、すればよかったとこはいっぱいあった。何より早い段階で決めてしまわないと全然仕事が進まないことを痛感したので、それは今後の制作に活きてくると思う。あと一年あることに感謝。

展覧会という形態の限界というか、作品が一番活きるプレゼンテーションって何だろうと思った。amsoundは共同作業するスペースでのメッセージのやりとりを行うものなので、今回の展示では僕のイメージがほとんど伝えられない。
あと、AMSプロジェクトで考えている「あいまいな情報の伝達」「空間と情報の関係」に関してほとんど理解がされてないと思った。amsoundにしても電話でいいじゃんとか、直接話せばいいじゃんというような意見が出がちで、それはそうなんだけど、メッセージの内容さえ伝わればいいと考えてるんじゃなくて、その伝え方。メッセージは「何を伝えるか」も重要だけど、「どう伝えるか」も重要だと思っていて、携帯メールがよかったり、手紙がよかったり、メディアを選ぶことにもその人の見えないメッセージみたいなものが存在してるのは確かで、そういうものを嫌味にならない程度に反映させたいと思ってるし、メディアを作り出すことで人と人とのやり取りが変わることも面白いと思ってる。
とにかく今は情報が多過ぎて、しかもそいつらを処理するためには常にパソコンのモニタを見てなきゃならなくて、もっと色んな形で人とコンピュータがインタラクションを起こせるようにできればと思う。一部のギークだけじゃなくて、工夫次第で。

毎回展覧会とかライブとかする度にやめようかと思うくらいへこむんだけど、やっぱこのままでは終われないと思う。