blogNANANANA 制作にあたって計画・実施したことをまとめました。
意図や背景を整理し、目標を設けて、利用者・鑑賞者に配慮したシステムを作るというプロセスは、ふだんの仕事と同じでした。
制作意図
- 卒業制作を控えるゼミ生の参考にしてもらおう
- Diという会社を知ってもらおう
- Diの今後の方向性・可能性を探究するための糧としよう
- プログラミングによるコミュニケーションデザインの練習をしよう
- 習作レベルの作品でもどんどん公開して、色んな人に見てもらおう
- 自分と興味・関心の近いクラスタ以外の人たちに、見てもらおう
設定した目標
- Di5周年の7月7日付近で発表しよう
- 七夕にちなんだ作品にしよう
- 子どもから大人まで、年代・性別・興味・関心を問わず楽しめる作品にしよう
- 誰が見ても「七夕をテーマにした作品」と直観的にわかるようにしよう
- ベタな表現でいこう
- 鑑賞者が参加できる作品にしよう
- 飽きずにずーっと見ていられる映像にしよう
- 会場（FLAT）の空間を活かそう
- 外からも見ることができるようにしよう
- openFrameworks を使って制作しよう
プロジェクト名を決めるまで
- 七夕にちなんだ名前をつけよう
- 七夕 ... TANABATA
- 7月7日 ... NANA月NANA日
- 表記の違いを検討 ... NANANANA, ナナナナ, なななな
- ゆれる短冊でロゴを構成できそうなアルファベット表記の「NANANANA」に決めた
どのような作品にするのか
- 七夕飾りをモチーフにした作品にする
- 参加者に「願いごと」を書いていただく
- それらの願いごとが次々に表示される「システム」と「ビューアー」をデザインする
- FLATの空間をいかしたインスタレーションとする
制約によってデザインをする
- コンテンツの作成は参加者にゆだねるが、仕組みに制約を持たせることで、ある種の一貫性を保持し、鑑賞者とのコミュニケーションをデザインする
- 文字数を制約する → 14文字
- 願いごとを「読む」ではなく「見る」ことで認識可能にし、次々に表示されても楽に読めるようにする
- 投稿形式を制約する → 手書きのみ
- キーボードによる入力ができない子どもでも参加ができる
- 個々の文字のクセが、ビジュアルに寄せ書きのような多様性を持たせる
- 投稿場所を制約する → 展示会場のみ
- Twitterは物理的な距離を越えて興味・関心の近い人たちを繋げてくれるが、その逆をやってみよう
ビジュアルデザイン（見た目）の方針
- ほとんどの人が七夕を想起するようなビジュアルにする → 星、短冊、色紙をモチーフにする
- 文字を会場の外からも内からも読めるようにする → 文字をアニメーションでゆっくり回転させる
- クセを極力なくし、ニュートラルな表現にする
- ユニークな造形は目指さない
- 自分が造形の主役にならない
- 自分または身内にしかわからないような世界観にはしない
- ベタでわかりやすく
- 多様な人に受け入れられるビジュアルにしたい
- シンプルに発光するものの集合体（蛍、星空、花火）を嫌いという人は少ない
- 長く見ていても飽きない映像にする
- ゆっくりとした動き
- 生理的に気持ちいい動き
プログラミング（実装）の方針
- openFrameworks を利用して開発する（制作に利用するのは今回が始めて）
- 書籍「Beyond Interaciton」をテキストとし、2週間ほどかけて基礎を学ぶ
- 原則として、この本で学べる範囲での技術を利用する
- そのほか必要があれば、openFrameworks に含まれるサンプルを参考にする
- パフォーマンスを重視する
- 数時間実行しても、fps の値が60を維持できるようにする
- 試作段階のものを iPhoneアプリにして展示する
- アニメーションに合わせてサウンドを再生する
願いごとのデータ化から表示まで
- 紙に願いごとを書いていただく
- iPhoneのカメラで撮影する
- iPhoneアプリ PictShare で DropBox にアップロードする
- 数秒でクライアント機の DropBox の共有フォルダに画像が同期される
- 画像ファイル一覧の xml ファイルを更新（今回は手動でファイルを編集したが、これは自動化したかった）
- 更新された xml ファイルをアプリケーションが読み込む（今回はキーボードを押して読み込んだが、これも一定時間ごとに読み込むよう自動化したかった）
- xml ファイルをもとに、画像を読み込み、個々の画像のピクセル情報を解析し表示のための処理をする
- 新しい願いごとが表示される
文字のアニメーション
- 文字を構成する個々の点を動かしてアニメーションを表現する場合に限って、取得したピクセル情報をもとにリアルタイムで図形を描画した
- 文字を大量に動かす部分は、setupの段階でピクセル情報をもとに再配色をしてから setFramePixels() を利用して画像化した ← これをやって、運用可能なパフォーマンスが出た
展示会場での作業
- 試作段階で展示会場に行き、プロジェクタで投影、その映像を見て、さらにアイデアを追加した
- オブジェクトの表示位置はキーボードで調整ができるようにプログラムして、現地で最適なレイアウトにした
試作のオープン化
- Pixivのようなネット上のプラットフォームに作品を公開するように、リアルな空間でも気軽に作品を発表できるといい
- うまくなるには「アイデア→試作→評価」を繰り返していくだけだが、それをオープンにやっていくということ
- そういうプラットフォームとしてFLATはとても向いている（気がする）
- FLATに集まるさまざまな人に作品を見てもらいフィードバックを得ることは、結構貴重なことだと思う（同じ興味・関心の人たちが集まるコミュニティで発表しても、偏った評価しか得られない）
- そうしていく中で、学内・社内の狭いコミュニティに閉じこもらず、あらたなメンター（師匠）との出会いも期待できる
- これから成長したい人は、FLATのようなスペースを活用していくといいと思う
今後の課題
- ネットワーク環境が悪いと更新が遅延してしまうため、クラウドだけに頼らない代替手段を保険に用意しておく
- 音をもっとコントロールしたい、音のプログラミングを学びたい → SuperCollider