今回は「Vincent」という作品の中身について説明をしたいと思います。
Vincentは元々、インタラクティブ閃光玉（天）で行った立体造形物へのマッピングがひと段落したところで、あるコンペティション向けに違うプロトタイプを作るというところから始まりました。

◼︎インタラクティブ閃光玉（天）

テントは独自製作（プロトタイプはIKEAの天蓋）で、そこに対して間に分配器挟んだ２台のRICHOの超単焦点プロジェクターで投影してます。中にも入って体験できるように背面投影と透過スクリーンです。
造形物投影に合わせるのはMadMapperを使っております。
（作る段階で細かく設定しないと明るさによっては映像綺麗に出ないという課題はあるです）

余談ですが最近、分配器の代わりにTripleHead2Goというものを手に入れた（遅い）のでちょっとした建売住宅とか中規模ライブハウスくらいまでならばマッピング出来る気持ちではあります。
この流れだと確かにOputiTrackさえあれば規模問わないインタラクティブ可能だな、と。持ってないけど。

序盤から話は逸れましたが、この次の作品という位置付けでVincentがあります。

アイデアとして、アナログなイラストとデジタル技術を組み合わせたハイブリッドアートの分野で、人をセンシングしてイラストにインタラクションが起きるというアイデアを少しずつ昇華させて進めているものです。

最初に作ったプロトタイプはこちら。
（ムービー用の曲もオリジナルですよー）

◼︎Vincent -Approach the World Truth-

フェルメールの絵画を真っ白なキャンバスにプロジェクションして投影します。
そこに距離センサを設置して人が近づいたのを検知してグリッジのエフェクトがかかり、別の絵に変わります。

通常、絵画を見るときに人は「見る」という行為、つまり視覚でコミュニケーションしますが、それに加えてさらに詳細な絵画の情報得るために「近づく」という行為が発生します。
Vincentのプロトタイプでは「近付くことで見える真実がある」というコンセプトを元に人が絵画に近寄るとフェルメールと同じ時代に別の画家が描いた貧困をテーマとした絵に切り替わり、最終的には元となる真珠の耳飾りの少女の絵が涙を流す、というインタラクションが発生します。

ここに至るまでにイラスト（絵画）を動かすっていう視点で幾つかサンプルも作ったりしてます。

こんなとか、

こんなのとか。

実際の絵になるべく馴染むようにCG合体したらどんなになるかなーと思って試したものの、ただ絵を動かすだけだと体験は弱い。。こういう動くプロトをラピッドで数パターンか作っては捨て作っては捨て、考えて、いまの状態に至ってます。

◼︎システム構成

Vincentのシステム構成は下記になります。

割とシンプルで、超音波センサーが拾った値を制御用PCにシリアル通信で送って演出に反映させています。
基本、インタラクティブ閃光玉（天）の構成にセンサーが入った感じです。
閃光玉（天）はセンサーの代わりにMIDIによるリアルタイム演出操作が出来ます。

今回の展示はプロトのように２つの絵画の切り替わりではなく、アニメーションという要素を加えました。
アニメーションといってもデジタルなものではなく、いわゆるセルアニメの手法である「コマ割り」です。

◼︎ILLUST

今回は手書きのイラストをこうやって18枚くらい用意しました。

Unity側でテクスチャを距離に応じて切り替えていくのですが、コマ割りだけに順番がおかしくなるわけにはいきません。なので、距離も絶対値じゃなくていくつかの閾値を設けて達したらアニメーションとして0.1秒くらいで自動アニメするようにしています。

◼︎CODE

参考までにUnityのスクリプトを載せるとこんな感じ。

_Distance変数がセンサー値で、これは「ツチボタル」や「Siricon」去年展示の「ランドリーバード」などのArduinoのセンサーで有名なMaker番長の茶谷くんが作ったモジュール使わせてもらってます。

Arduinoからシリアル通信を受け取るマネージャーなど、いくつかのスクリプトがあってシングルトンクラスになっていてどこからでも参照出来るので、とっても便利です。これをテクスチャ変更するスクリプト内で呼び出して値を調整していたりします。

ただ、センサー値の取得を秒間1000回やってパーティクルを500以上同時に動かすとなると処理落ちして辛いので、結局秒間１０回にしてます。今回は10回/秒のセンサー値でも対応出来るのですが、もっとリアルタイム性の高いコンテンツの場合、ここは検討しないといけないところです。

あと、Arduinoやセンサースペックの影響だと思うのですが、値のブレは結構あります。今回はセンサー値はそのままにVincent用のローパスフィルターを別で作成して精度を上げてます（独自ローパスは秘密）。
演出の限界はシングルトンのせいなのか、単純にCPU性能高めれば良いのかは謎。

本当は絶対値に応じたスムーズなアニメーション変化が出来れば良いのですが、時間の都合で上記のコードのようなテクスチャ切り替えを愚直に繰り返してます。。

仕上げにMainCameraにImageEfectでBlurを少しかけてスムーズに見えるようにしていて、この辺りはUnityの恩恵で楽にはなっているものの、現状の仕組みのままならば環境はopenFrameworksの方が向いているなぁと思ったりしています。そういう意味ではUnityとoFは両方使って初めて意味があるなーという気づきがありました。

Unityは表現が多彩で扱いやすいです。でも複数のアプリを連結させてバックエンドで動かしたりコードから直接描画する分にはoFの方が有利です。プログラマ界隈の外人風に言うとC++はパワフルだね！という感じです。
厳密にはUnityでJSでスクリプト書いても最終的には変換されるのですが、そこの段取りの分、遅い的な。

でも、最近oF使うことも多いのですが画像系をたくさん描画すると結局、ガタガタすることはある。
参考までにこちらも軽くプロトタイプしたマイク音量拾ってサークル描画するやつ。

1000個まではMacbookProでも余裕。

UnityもoFも表面上使うだけだとどっちでもダメですね。
差別化はかるためにもunityではシェーダーくらいかけるようにしよう。
そんな感じで色々気づくことあるのでUnityとoF、どっちかしかやってない人はどっちもやったほうがいいと思います。

展示後にセンサー使わないでポリゴンをバリバリ使うコンテンツを作ったら結局、限界を迎えたのでそもそものUnity内のプログラム構造に問題あるのかもとか思ってて、プロトタイピングはこういう積み重ねが割と大事だなーと思っております。

展示みていただいた方の中には「KINECTとかで深度とればもう少し精度上がるのでは」というコメントをいただきましたが、Vincentは今の使い方だけでなく汎用的に使えるものを目指しているので、安価なセンサーを使っている、という感じです。PCも小型のMINI PCにすればコストは低く、持ち運びも簡単になるなと思ってます。

KINECTとMacbookProのままだとスペックも余剰でコストも高く応用利かないので、そういうのはVincentの思想と合わないという理由で採用していないです。

◼︎まとめ

Vincentは、取り立ててすごい技術を使ってるわけでも無く、超新しいテクノロジーでもないです。
理由は前述したような近付くことでのハイブリッドアートの体験の実現をターゲットにしてた、というところが大きいですが、技術的な側面として、全体的な構成が「スケーラブルであること」は気にしています。いわゆる仕組みとして横展開出来るものをつくっています。今後は実運用で使ってもらえるところを探して根本はブレずに少しずつ状況に応じたブラッシュアップはしたいなーと思っています。

以上、全体を通して雑文的になって「わけわかんねーこと言ってるな、こいつ」という感じだと思いますが、要はこういうテクノロジー全般を俯瞰しつつ日々、生きておりますのでこういうのイベントで使いたいとか、同じ仕組みで独自のもの使いたいとかあればお気軽にお声がけくださいという感じで締めのご挨拶と代えさせていただきます。

ArtDirection/Illust/Design: Eri Hosokawa
Programming: Junpei Qawasaki
Sensor: Akihiro Chaya

では。

Dimensions Recordは、あらゆる立体物を音に変換するレコードプレイヤーです。
ターンテーブルの上に乗った立体物は、
その凹凸が音に変換され、スピーカーから音楽として再生されます。

普段目に見えない音のかたちを、見て、触って、変化させる。
そんな新しい音楽体験を提供します。
　
　
　

立体レコード

HACKist展「Digital Fragments」用に作成したプロトタイプ1号機の本作品では
子供から大人まで触っていただけるよう、
「立体レコード」として積み木バージョンとレゴバージョンの2種類を用意。

積み木バージョンではシンプルな形状から、
簡単に配置を変えることで音の変化をわかりやすく、
レゴバージョンではより複雑な音の変化を作り出し、
立体物としての造形と、音の表現を同時に作りこむことができるようにしました。
　
　
　

しくみ

ターンテーブルの上に設置した超音波センサーで立体物の凹凸を読み取り、
その高さに応じて、音の高さも変化します。

センサーは2点で別々に高さを読み取り、
それぞれが別々の音を同時に音を鳴らすことで和音を奏でます。

センサーのコントロールにはArduinoを使用し、
PCに接続、Funnelと連携させたFlashから実行しています。
　
　
今はまだプロトタイプですが、
将来的には、もっと多くの音色で、複雑な音階を作り出せるようになり、
直感的で視覚的な楽曲制作ができたり、
様々な立体物を音として記録することも可能になるかもしれません。
　
　
　
制作：笹垣洋介
サウンド制作：原一弘

先日開催したHACKist展「DIGITAL FRAGMENTS」で展示した「Clippable CODE」という作品についてご紹介します。

突然ですが、みなさんはデジタルアートはお好きですか？
最近は色々なところでデジタルアート系の展示会がおこなわれていて、目にする機会も多くなってきたのではないでしょうか。
デジタルアートは、アナログアートにはできないインタラクティブな表現を使ったものが多くて、個人的には大好きです。

できれば、スマートフォンの壁紙にして持ち歩きたいところですが、なかなか展示会などでは撮影禁止だったりして持ち帰ることはできません…。

ということで、今回はデジタルコンテンツを切り取って持ち帰れるようにするための仕組みを作りました。

Clippable CODEとは？

「Clippable CODE」は、デジタルコンテンツに「切り取り機能」を追加してスマートフォンやタブレットなどの端末で持ち帰ることを可能にする仕組みを作品化したものです。
今回の展示では、HACKistブログの背景アニメーションを作った小井さんのmetrogramをお借りして、それを持ち帰れるようにしました。

切り取り操作はタッチディスプレイをタッチしておこないます。
タッチディスプレイ上のデジタルコンテンツの好きなところをタッチすると、その位置に切り取り線が出現します。切り取り線の隅には2カ所丸い円がついていて、その部分を指でドラッグすることで、切り取り範囲を変えることができます。

切り取りたい範囲が決まったら、切り取り線の中をタップすることでその部分が切り取られます。するとその部分が静止画としてキャプチャされ、中央にQRコードが表示されます。

この時キャプチャされた画像はサーバー上に送信されており、表示されたQRコードをスマートフォンやタブレットで読み取ることで、キャプチャした画像が見られる専用ページに飛ぶことができます。

あとはその画像を保存して壁紙にするなりSNS上でシェアするなり、自由に楽しむことができます。

技術的には全てWeb技術をベースに実装されています。
デジタルコンテンツとそれを切り取る部分は全てWebブラウザ上で動いており、それがサーバー（Node.js）と連携することで、切り取った画像をスマホで持ち帰れるようになっています。

今後の展望

現在はまだ静止画としてしか持ち帰ることができませんが、ゆくゆくは動きのあるデジタルコンテンツをそのまま持ち帰れるようにしたいと考えています。

また、今回の展示ではアート作品を持ち帰るための仕組みとして展示していましたが、デジタルコンテンツであれば同じように適用することができるため、サイネージ分野などにも応用が可能です。

例えば、街や商業施設の案内板にこの仕組みを導入し、目的地までの地図を切り取ってスマホに送ることができるようにしつつ、QRコードから飛んだ先の専用ページで切り取ったエリアの店舗情報もあわせてレコメンドするなどの拡張も可能です。

個人的には、このような仕組みが色々なデジタルアート系の展示会などで使われるようになって、気に入った作品を持ち帰れるのが当たり前のような世の中になったら非常に嬉しいです。

――――――――――――――
コンテンツ提供：小井
実装：進藤

先日のHACKist展「Digital Fragments」で展示した、<ヤバい>という作品について説明します。

※以下、作品名を<ヤバい>、作品名以外の形容詞・感嘆詞を「ヤバい」と表記します。

<ヤバい>とは

本作品<ヤバい>は、体験者の発する「ヤバい！」という音声から、状況のヤバさを計測し、
タイポグラフィとして表現するインスタレーションです。

普段何気なく発している言葉について、再認識を促すために制作しました。

ヤバさをはかってみよう

体験者は手元の入力ボタンを押しながら、
最近体験した「ヤバい」ことを想像しつつ、「ヤバい！」と発声します。

発せられた声から、「悪いヤバさ」なのか「良いヤバさ」なのかを<ヤバい>が点数化し、
点数に対応するタイポグラフィを説明文とともに表示します。

自分の声によって表示されたタイポグラフィは、その場でステッカーとしてお渡ししました。

ヤバさをはかる仕組み

<ヤバい>は、入力された音声から「体験者のテンションが高いのか・低いのか」、また「ヤバさの程度が大きいのか・小さいのか」を算出します。
「テンション」の算出には「ピッチ(音の高さ)」を、「程度」の測定には「音量(音の大きさ)」を使用しました。

「テンションが上がると人の声は高くなり、反対にテンションが下がると声も低くなる」という考えのもと、
音声のピッチを抽出して、一定の基準より高ければ「良いヤバい」、低ければ「悪いヤバい」とシンプルに振分けています。

さらに、声の音量を測定して抽出したピッチの値と掛け合わせて点数を算出しています。

<ヤバい>の活用方法としては、例えば商品を試用できるキャンペーンイベント等で、
その商品がどれだけ「(良い意味で)ヤバい」のかを可視化する装置として使うことができたりするのではと思います。

最近はヤバくないことにもついつい、相づち的に「ヤバい」と言ってしまうこともありますので、
本作品が自分の言葉について再考するきっかけになれれば幸いです。

ーーーーーーーーーーーーーーーーーーーーー
企画：手塚 健太郎 / 加藤 愛
デザイン：手塚 健太郎
プログラム：加藤 愛
スペシャルサンクス : 徳永 茜（イラスト）

先日のDigital Fragmentsで展示した「without words（言葉はいらない）」というウェアラブルデバイスをご紹介させていただきます！

without wordsとは

シンプルかつエモーショナルな、コミュニケーション用ウェアラブルデバイスです。
言葉を使わず、例えば遠く離れた恋人同士、家族同士など、大切な人とのつながりを光で感じることができます。

機能はとてもシンプル。対になっているブレスレットを身につけ、横についているスイッチを押すだけ。自分側のスイッチを押すと、相手側のブレスレットが光り、相手側のスイッチを押すと自分のブレスレットが光ります。

相手のことをふと思った瞬間にスイッチを押してみたり、なんとなーく連打してみたり…ちょっと押し付けがましいかもしれませんが、でも自分側のブレスが光った瞬間って、少なくとも相手は今自分のことを想っている瞬間なんだなって感じると、なんだか嬉しくなりませんか？

コミュニケーションはもはや言葉がなくても成り立つのでは？

昔は手紙を書いて想いをしたためていたのが、今やLINEのスタンプだけでやりとりが成立する時代。

そこで、もしかして皆つながりは求めているけれど、SNS疲れと言われるくらいだし、多数と連絡をとるのが面倒くさい、と感じているのでは？SNSの機能をそぎ落としていって、さらにシンプルにしていったら、どうなるだろう？？と考え、出来たのがこの作品です。

何か用事があるわけではないけれど、ふと相手に信号を送ったら、相手もちょうど見ていて信号が返ってきて…と、そこには気持ちも、言葉も、何も込められていない、ただのLEDの光しかないけれど、それでもそこに「つながり」はあるのではないでしょうか。

どんな技術？

without wordsはbluetoothで通信しています。（なので現状のプロトタイプでは20~30m範囲が限界）
使っているのはこちら、超簡単！無線マイコンTWE-Lite DIP（トワイライト・ディップ）です。

実はこれBluetoothのペアリング作業も、プログラミング開発作業もなく、今回初めて電子工作にチャレンジした私でもつくれちゃう超お手軽無線マイコンなんです。

今回はプロトタイプということで、20~30mが限界ですが、今後はwifiやネットワークと連携して海外にいてもやりとりできるようにしたり、アプリ連動でお互い何度信号を送り合ったかが数値化されたり、という拡張もしたいなぁと思っています！

ちなみに、今回使ったTWE-Liteマイコンですが、100個くらいの連携も可能だそうです。お値段もBluetoothのマイコンにしては比較的安め。今回使ってみて色々と勉強になったので、次何か作るなら複数を使うというのもありそうです。

では！

【Credit】
制作 : 佐野彩香

最近、IoT（モノのインターネット）やスマート家電などという言葉は耳にすることが多くなりましたが
ITなどの新しもの好きの人以外は、まだまだ実物を身近に体験することは少ないと思います。

そこでスマート家電を身近に体験してもらえるように、スマホサイトから電気をつけたり、消したり、家電などデバイスを操作できるコンテンツ「でんせつ 電接 / 電切」を先日のHACKist展示会「DIGITAL FRAGMENTS」にて展示しました。

スマホでQRコードを読んでスマホサイトにアクセスするだけで
会場の照明を操作したり、おもちゃを動かすことができるコンテンツとなっています。

展示会でアプリをインストールしてもらうのはハードルが高いのでスマホサイトから、会場のデバイスを操作できるように設計し、来場した多くの人にコンテンツを楽しんでいただくことができました。

node.js、WebSocketやWebRTCを使ってスマホとPCを遠隔で接続する事によって、スマホにアプリを入れることなく、スマホをコントローラー化することが可能です。

展示は終了してしまいましたが、スマホをコントローラーにすることができるHiSESSIONサービスの一例として、
ALTERATION WALL は絶賛公開中なので、こちらを是非、体験していただけたらと思います。
（スマホから写真を投稿してパソコンにインスタレーションを作り上げることができます！）

イベントなどで応用したいなどありましたら、気軽にお問い合わせください。

―――――――――――――――――
制作 : 高野 祥宏

先日行われたDigital Fragments展でのクリエイティブの紹介をします！

■ 100近い写真の合成

お配りしたDMやシール、入り口に置かれていた大きなA0版のポスター
実はこれ…このように実際の紙で作られています！

100近いパーツを吊って撮影し、ひとつひとつをPC上で合成することで形を作り上げています。
一瞬CGに見えるかと思いますが、近くでみると紙の素材などのアナログ感があります。

■ アナログ、デジタル？ 壊れているのか、作られているのか？

今回の展示名「Digital Fragments」は、
”作品”というデジタルの欠片が集まり、
ひとつのHACKistのステイトメントを表すという意味がありました。

ひとつひとつが物体というアナログなものでありながら、
裏では強靭なデジタル技術がそれを支えている作品。
それらをひとつの紙の欠片とし、それらが大きな力となる様子を
コンピュータ上での合成により表現しました。

また、HACKistの活動の場は、
破壊と構築を繰り返す実験場のような場であることを表すため、
壊れている様子なのかはたまた作られている様子なのか
捉え方によってかわるような形を作りました。

■ デザインからデジタルへのアプローチ

お手元に持ち帰られたDMやシールがありましたら、
この裏側を知って再び見て頂けたら嬉しいです！

HACKistは、企画・技術に加え、デザインにも力を注いでいます！

HACKistを今後ともよろしくお願いいたします。

　
【Credit】
ArtDirector : 長谷川昇平
Designer : 加藤咲
Assistant : 手塚健太郎、澁井貴史

先日のDigitalFragmentsで展示した「Customize Journey」の紹介をします！

Customize Journeyとは、iPad上でカスタマイズしたオリジナルロケットを、スクリーン上の宇宙に旅立たせて楽しむ作品となっています。
「イベントの参加者に何らかの足跡を残してもらい、会場の盛り上がり具合を把握したい」という私的な要望から作るに至っています。

飛ばしたロケットは大体20~30分滞在するので、滞在しているロケットの数から、盛り上がり具合を把握する事が出来ます。
滞在しているロケットを参考に、自分のロケットを他のロケットより格好良くカスタマイズしましょう。

上記iPadの画面から、Head、Body、Wing、Jetの4か所のパーツをカスタマイズする事が出来ます。
選んだパーツによってスペックが変わり、飛び方や速度も変わるので、個性を存分に発揮できるようになっています。
ちなみにこのパーツ群、どんな組み合わせでも不自然なくハマるよう、デザイナー加藤 咲の匠の技術が使われています。

カスタマイズが完了したら、右のバーを上までグッと上げてもらう事で、オリジナルロケットをスクリーン上の宇宙に旅立たせてあげる事が出来ます。

他のロケットと共に、旅に出るオリジナルロケットの勇姿を、手を振って見てあげてください。
ちなみに飛び立つ仕組みはNode.jsです。

以下、操作の流れをまとめた動画になります。

今後の展開としては、自分で作ったロケットをスマートフォンで持ち帰ってもらえるよう改良中です。
スマートフォン上でのロケットは、数日後着陸し、ロケットのパーツに応じたアイテムを持ち帰っている、というストーリーになっています。
そちらを含めて近日中に、URLを公開させて頂きます！

それではまた、宇宙で！

―――――――――――――――――
スタッフクレジット：
サウンド:小野 翔太郎
デザイナー:加藤 咲
プログラマー:宮林 竜平