the color makotohirahara
TRANSCRIPT
![Page 1: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/1.jpg)
デジタルデバイスを用いた
インスタレーションの
舞台裏。
5.25 2013平原 真 ( Hirahara Makoto )
![Page 2: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/2.jpg)
INTRODUCTION
![Page 3: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/3.jpg)
00
今日の内容
01 : 自己紹介&作品紹介
02 : システム構成とデータの流れ
03 : こだわりポイント
![Page 4: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/4.jpg)
PROFILE & WORKS
![Page 5: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/5.jpg)
01
平原 真 ( Hirahara Makoto )
1979年生まれ。インタラクションデザイナー。
Web制作会社で2年間勤務の後、フリーランスとなる。
MONGOOSE STUDIOというグループに参加し、デザインイベントへの
出展などの活動を行なう。
現在は、 クリエイティブエンジニアとしてPROTOTYPE Inc. に在籍しつ
つ、個人での作品制作も継続している。
![Page 6: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/6.jpg)
01
Bright Blind
![Page 7: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/7.jpg)
01
Flowerium
![Page 8: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/8.jpg)
TEA HEART CAFE
01
![Page 9: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/9.jpg)
the Color
01
![Page 10: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/10.jpg)
SYSTEM
![Page 11: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/11.jpg)
02
概要
Mac
プロジェクタ
Dr.MX壁面LED
PC 4台
プロジェクタPC 4台
PDPPC
インフレーター
インレット
椅子用LED
IrDA
UDP
USB serial
DMX
UDP
RPC
PDP用 2台椅子用 20台
![Page 12: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/12.jpg)
02
Mac
プロジェクタ
Dr.MX壁面LED
PC 4台
プロジェクタPC 4台
PDPPC
インフレーター
インレット
椅子用LED
IrDA
UDP
USB serial
DMX
UDP
RPC
PDP用 2台椅子用 20台
インフレーター
![Page 13: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/13.jpg)
02
インフレーターインフレーター
マイコンはPSoC、単3電池2本で5時間駆動する。
常にスライダの移動を監視している。
色情報はIrDAモジュールで送信している。
PSoC
内蔵されるアナログブロックを自由
に組み替える事ができるマイコン
IrDA
赤外線通信の規格。ガラケーでの
データ通信等に使用されている。
![Page 14: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/14.jpg)
02
インフレーター
引かれていれば、先端の白
色LEDを光らせ、反射光をカ
ラーセンサーで読み取る。
色に応じて自身のLEDの色
をコントロール。
押されていると、先端のIrDA
モジュールから現在の色・押さ
れるスピードの情報を送信。
自身の色を暗くする。
IrDA信号
![Page 15: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/15.jpg)
02
Mac
プロジェクタ
Dr.MX壁面LED
PC 4台
プロジェクタPC 4台
PDPPC
インフレーター
インレット
椅子用LED
IrDA
UDP
USB serial
DMX
UDP
RPC
PDP用 2台椅子用 20台
インレットの内部
![Page 16: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/16.jpg)
02
インレットの内部
IrDAモジュール
PSoC
Arduino UNO
Ethernet Shield
IrDA信号
シリアル通信
スイッチ
ボタンが押されてい
るかどうかを監視。
UDP
![Page 17: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/17.jpg)
02
UDPでMacにデータを送り続ける
![Page 18: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/18.jpg)
02
Mac
プロジェクタ
Dr.MX壁面LED
PC 4台
プロジェクタPC 4台
PDPPC
インフレーター
インレット
椅子用LED
IrDA
UDP
USB serial
DMX
UDP
RPC
PDP用 2台椅子用 20台
Macの処理
![Page 19: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/19.jpg)
02
Macの処理
Macでは各デバイスの交通整
理をする中央管制のような処
理を行なっている。
・シーケンスシーンの色設定
・各インレットの情報を取得
・LEDの色を制御
・unityへインレット情報送信
開発環境はopenFrameworks
0.071。UIはofxUIを使用。
![Page 20: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/20.jpg)
02
Macの処理
インレットの状態
色がにじむスピードなどの設定
LEDの色
シーケンスモードの色指定UI
シーケンスモードのタイミング設定UI
再生中のシーン
unityとのやり取り
諸情報
![Page 21: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/21.jpg)
02
Mac
プロジェクタ
Dr.MX壁面LED
PC 4台
プロジェクタPC 4台
PDPPC
インフレーター
インレット
椅子用LED
IrDA
UDP
USB serial
DMX
UDP
RPC
PDP用 2台椅子用 20台
unityの処理
![Page 22: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/22.jpg)
02
unityの処理
Macから受信したPDPインレットの情報
を元に、パーティクルの描画を行なう。
パーティクルの動きは、フォースマップ
というテクニックで実現している。フォ
ースマップは、方向ベクトルのデータを
平面上に配置しておき、各パーティクル
はそのベクトルによって自分の動きを決
める。
画像はイメージです。
![Page 23: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/23.jpg)
02
unityの処理
中央のPDPの描画だけでなく、左右の壁
へのプロジェクションの為、2台のPCと
情報を共有している。通信にはRPCを使
用。
また、壁のLEDの色は流体の混ざり具合に
よって決まるため、unityでの計算結果を
Macの管理アプリへ送っている。
![Page 24: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/24.jpg)
02
Mac
プロジェクタ
Dr.MX壁面LED
PC 4台
プロジェクタPC 4台
PDPPC
インフレーター
インレット
椅子用LED
IrDA
UDP
USB serial
DMX
UDP
RPC
PDP用 2台椅子用 20台
DMXでLEDのコントロール
![Page 25: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/25.jpg)
02
DMXでLEDのコントロール
使用したLED照明はDMXに対応した製品。
USB接続でUDPを送信できるDr.MXという製品がCのライブラリーを公開
しているので、ラッピングしてaddonとしてopenFrameworksから制御
Dr.MXNND26221K
DMX512
主に照明機器を制御するための通
信規格。最大512chを256段階の
データを送信できる。
![Page 26: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/26.jpg)
02
概要
Mac
プロジェクタ
Dr.MX壁面LED
PC 4台
プロジェクタPC 4台
PDPPC
インフレーター
インレット
椅子用LED
IrDA
UDP
USB serial
DMX
UDP
RPC
PDP用 2台椅子用 20台
![Page 27: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/27.jpg)
PERSISTENCE
![Page 28: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/28.jpg)
03
こだわりポイント
工夫する余地
一貫性のあるルール
能動的な体験を促す
![Page 29: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/29.jpg)
03
こだわりポイント
色が実体だったら
どんな感じ?
![Page 30: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/30.jpg)
03
色を取る対象を限定しない
確実に動作させるためには、取込む対象を
限定し、IFIDタグやマーカーを仕込む事が
考えられるが、自由な体験のため実際に色
を取得している。
それによって、体験者の体や持ち物ではど
うなるか?という好奇心にも応えている。
![Page 31: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/31.jpg)
03
インフレーターの中でも色が混ざる
途中まで色を吸い、別の色を吸うと、インフレーターの中でも色が混ざ
る。「色が実体だったら」起きそうな事は、実際に起こる。
![Page 32: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/32.jpg)
触覚も再現
インフレーターを押し込むスピードが、画面への流入量に反映される。
また、抵抗感をフェルトの摩擦で表現している。視覚・聴覚だけでなく
触覚でも色を感じられる。
03
![Page 33: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/33.jpg)
椅子とディスプレイの違い
椅子は全体が光って見え、ディスプレイは粒子がはっきりと見える。こ
の違いは、椅子の素材が半透明のアクリルであるため、中に入っている
光る気体が拡散して見えている、という「設定」。
03
![Page 34: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/34.jpg)
繋がってないけど繋がっている
椅子は独立しているタイプと連結しているタイプがある。ハードウェア
としては同じ物だが、隣接する色と混ざっていく計算をして、中で繋が
っているように感じさせてる。
03
![Page 35: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/35.jpg)
APPENDIX
![Page 36: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/36.jpg)
03
連絡先など
技術的なトピックのブログ
http://hrhrblog.blogspot.jp/
ポートフォリオサイト
http://makotohirahara.com/
http://facebook.com/makoto.hirahara
https://twitter.com/HR2
![Page 37: The color makotohirahara](https://reader033.vdocuments.pub/reader033/viewer/2022042815/5576cc56d8b42ae3108b51be/html5/thumbnails/37.jpg)
THANK YOU : )