繊維に対する新しいアプローチ

繊維は人々の生活に欠かせないもので、その長い歴史から様々な織り方が編み出され、
工芸分野からインテリア、その人に合わせたファッションスタイルにまで広がっています。

なかでも近年では、衣服の色を動的に切り替えるというアプローチが着目されていると思われます。
光るスカートや、ファッションつながりでいうとFES Watch、Vixoleなど、
その時の気分やシチュエーションによって切り替えられる楽しみができそうではあるものの、まだまだ実験的であったりします。
また、そのアプローチもLEDのような発光体をすえつけた実装が多いようではあります。

今回、LEDのような発光体を用いず、繊維自体の色を変えられないか取り組んでみました。

サーモインク × Arduino

「Access to Materials -デザイン/アート/建築のためのマテリアルコンピューティング入門 」という書籍に、
やりたい事柄に近いものがあり、ひとまずそれをやってみました。

サーモインクという温度によって色が変わる試料に布を浸し、
Arduinoから導電糸(電気を通すステンレス糸)を這わせて、
あてた箇所の色を変えるというものです。

画面右側にサーモインクが熱せされ、導電糸に沿って色がピンクに変わりました。

やってみた結果、確かに色は変わるものの、繊維が塗った周辺に染み込み、
形どったものをいろ付けようとすると滲んで見えてしまうのが課題でした。

そこで、布にサーモインクを浸すのでなく、糸をサーモインクに浸す方法に切り替えました。
以下が、HACKist展で展示した際のイメージです。

Arduinoと導電糸の間にスイッチを設置し、
スイッチを押すと電流による熱で糸がピンク色になり、
離すと温度が下がり徐々に糸が元の色に戻っていきました。

右から2,3つ目のステッチに導電糸を縫い込んでいて、その部分で色が変わっています。

やってみた感想

今回、本のやり方にプラスアルファを加えてみた形ではありますが、
回路図含め動く形にもっていけたのは良かったです。

やってみての課題としては、以下のような点が挙げられます。
・LEDと違って光るわけではないため、照明環境によっては変化が見えづらかったりする
・使ったサーモインクが青 -> ピンクの切り替わりだけだったので、他の色のサーモインクと組み合わせると良さそう
・今回、一部箇所の色を変えるものだったので、模様を工夫する必要がある
・温度変化が小さいため、糸の色が変化するのに時間がかかる
・導電糸が絡まった状態で電流を流すとショートするため、ヒータなり別の熱源でできないか
・展示ではArduino及び電源orバッテリーを用意する必要があり、着て移動するには持ち運びしやすいパッケージ化が必要
・洗濯できるのかという質問を受けたので、実用化には洗濯にも耐えうる備えがあると良い

なお、「ふわッチ」の由来は、
「ふわっ」と色が変わる「ステッチ」、になります。

スタッフリスト

八木 啓太
高野 祥宏

先日原宿Galaxy銀河系にて行われた３回目のHACKist展「DIGITAL DIVREZ」で展示していた
HACKist_(ハックイスト・アンダー)による「別世鏡」の紹介をさせていただきます。

※HACKist_(ハックイスト・アンダー)とはイラストとテクノロジーを程よくブレンドし
漫画/アニメ/ゲームの可能性をデジタルの力で広げるようなプロトタイプを提案、発信していくチームです。

「別世鏡」とは？

突然ですが「二次元に行きたい」と思ったことはありませんか！？

別世鏡は自分がキャラクターに成り代わり、漫画からリアルへ、リアルから漫画へと
「二次元」と「三次元」の境を曖昧にさせていく装置です。

一連の体験は無料配布のストーリーペーパーを読むところから始まります。
ペーパーを読み終わった参加者は実際に漫画のシーンを再現した部屋に入り
途中抜けている1ページで何が起きたのか主人公の目線で追体験いただけます。
※ストーリーペーパーの漫画はこちらから読むことができます。

部屋には不思議な鏡があり、鏡に自分を映すと自分の姿が漫画の主人公になり変わります。

机の上には大きな本が2冊。
片方を手にとって開くと鏡に映った自分が悪魔の姿に、もう片方を開くと天使の姿に…。
こうして2つの別世に存在する自分を見つめる主人公は物語の最後どうなってしまうのか？

体験の一連の流れや、仕組みについて、動画でまとめましたのでぜひご覧ください！

世界観の作り込み

今回は没入感をしっかりと作り込むために物語の設定と、部屋の再現にはかなり力をいれました！

部屋のテーマは「かつて占い師が居た部屋」。
鏡に見えるものは実際は鏡面モニター。オーダーメイドで作った絵画フレームを取り付け
上部分にあるWEBカメラもレーザーカッターで制作したフレームで隠しました。

他にも部屋のいたるところに小道具や怪しい絵柄の古びた用紙を置くことで、ぐっと世界観が出るようにしています。

また体験のコアとなる本はデバイスを中に組み込めるようにし、昼と夜でデザインを変えレーザーカッターで加工した表紙部分にはLEDを仕込んでいます。

キャラクターに息を吹き込むLive2D

漫画の中に登場したキャラクターを、その漫画の印象のまま、人の動きに合わせて動かす必要があったため、
今回はHACKistとして初めて、Live2Dというソフトウェアを使用しました。
Live2Dのパラメータ制御部分をうまくプログラムと連動させ、1モデルのみで、様々な変化を実現しています。

瞬きや首傾げなどの基本の動作のほか、悪魔と天使に変化した際は、
それぞれ髪の色や顔にある模様が変わるだけでなく、羽根の部分まで動くように設定していました。

システムとデバイス

今回制作したシステムと本型のデバイスの構成はこのようになっています。

本型のデバイスでは、本の開閉を検知するために、リードスイッチというものを使っています。
このスイッチは磁石を近づけると電流が流れるといったもので、
このスイッチを使うことで本の中に仕込んであるArduinoが開閉を検知していました。
そして、そのArduinoは開閉を検知すると、ZigBeeと呼ばれる無線モジュールを使ってPCに信号を送っています。

メインPCでは、今回はかなり複雑なシステム構成になっています。
まずWebカメラから顔認識を行うための画像を取得し、それをFacerigというソフトウェアが受け取ります。
Facerigとは、Webカメラに写っている画像から、顔認識によって顔がどこに向いているのか、
また顔の表情などをよみとり、それをアバターに反映させて表示するソフトウェアです。
このソフトウェアを使うことによって自分たちの作ったキャラクターを、自分の顔に合わせて動かすことができます。

そして、FacerigからopenFrameworksにそのアバターが動いている画像を送信します。
openFrameworksは、その受け取った画像をOpenCVを使いクロマキーによってキャラクターのみを抜き出し、
openFrameworksで表示している背景と合成します。

openFrameworksでは、背景合成以外に、Kinectを使用して、体の傾きや手の高さを取得していて、
体が前のめりになると、アバターも一緒に体を前のめりにしたり、
自分が手を振るとアバターもそれに反応して手を振り返してくれます。
また、PCにZigBeeによって送られてきた信号もOpenFrameworksによって取得し、アバターの見た目を変化させています。

この動作を行うためには、openFrameworksからFacerigに何かしらの通知を行わないといけないのですが、
Facerigはもともと独立したシステムなので、受け取れる入力がキーボードかマウスしかありません。
そこで擬似的にキーボードが押されたという信号をPCに送ることができるArduino Leonardoを使用しました。

openFrameworksが体の動きや本の開閉を検知すると、Arduino Leonardoに命令を送ります。
Arduino Leonardoは送られてきた命令によって、Facerigに送信するキーボードのキーを切り替えることで、
手を振るアニメーションや見た目の変化といったことを実現しています。

今後の展望

今回の作品は、 Live2D Creative Awards 2016 にて CreativeAward賞 を受賞することができました。

デバイス、顔認識、Live2D等… 新しい技術を使わず、既存の技術だけでも、
組み合わせと演出次第で、まだまだ様々なことができそうです。
今回はこれらの合わせ技で、VRともまた違う、不思議な没入感を作り出せたのではないかと思います。

HACKist_ は引き続き、漫画/アニメ/ゲームの可能性をガンガン広げていきたいと思います！

/ Staff List

• イラスト : わかたさき
• 内装、クラフト、ロゴデザイン : さーにゃ
• Live2Dモーション : いとまり
• プログラミング : あさひだくん
• サウンド制作 : 剣持学人
• クラフト制作協力 : 小井仁
• デバイス制作協力 : 進藤俊彦

制作方法とビジュアル 両方向からコンセプトへアプローチ

スクリーンとプロジェクターの間に、
水などの液体やアクリルケースを挟んで投写することで、
有機的な歪みをもったタイポグラフィを作り出しました。

無数に生まれるタイポグラフィとその造形により、
DIGITAL DIVERZ展のコンセプト「多様性」「深み」を表現しています。

また、それを敢えて過度な加工をせず使用することで、
CGのように見えるのに写真の一発撮りである、という、
デジタルとアナログを行き来するHACKistのコンセプトも表現しています。

各制作物へのこだわり

例えばポスターでは、写真の繊細なグラデーションや黒の深みを表現するための紙選びをしており、
またWEBサイトでは、WebGLにより、
マウスやタップで触れたところに波紋が起こることで、「DIVER」の揺らぎを表現しました。

その他 ノベルティもフライヤーも、
本ビジュアルを一貫して表現するため、工夫が凝らされています。

デザインからのアプローチ

去年に引き続き、photoshopのCGかと見せかけて実はアナログな制作方法をとるという、
デザインからデジタル思想へのアプローチを続けることができました。

なんでも合成ができるようになり、時代はフラット全盛でも、
それを別な解釈をして、デジタルへアプローチすることは可能なのだと思います。

WEBサイト、お手元に持ち帰られたフライヤーやシール・缶バッチなど、
この裏側を知って再び見て頂けたら嬉しいです！

credit

CD：望月重太朗
AD/進行管理/印刷Dr：加藤咲
De（フライヤー）：加藤咲
De（WEB）：中川美香
De（ポスター）：佐藤仁美
De（ノベルティ）：手塚健太郎
フロントエンドエンジニア：平川育男
WebGL：小井仁
Dr：西尾奏、鈴木誠也

Special Thanks：竹元雄三、竹尾梓、須部菜々子、金兵奈美