Javascriptによるプロジェクションマッピングシステム(開発予定)

1. Webエンジニアのための
プロジェクションマッピング
社内勉強会@スタジオアルカナ
スタジオアルカナ
遠藤勝也
2016/06/09
1

2. プロジェクションマッピングとは？
• 立体物にグラフィックスを投影する技術
• プロジェクタの性能向上，低価格化により
数年前から注目を集めている

3. 3

4. 4

5. MadMapper
• 有料(無料のデモ版あり)
• Syphonで映像を送れる
• 使いやすい
5

6. Processing,
oF, Cinder
MadMapperSyphon

7. 7

8. 8

9. 9

10. 10

11. 11

12. Webエンジニアのための
プロジェクションマッピング
12

13. Webエンジニアのための
13

14. ブラウザを使った
プロジェクションマッピングをしよう！
14

15. 機能（予定）
• 操作用ウィンドウ，投影用ウィンドウを生成
• p5.jsなどで投影コンテンツを生成
• 投影用ウィンドウは最大化する
• マウスで投影した面を変形
15

16. p5.js
• Javascript版のProcessing
• 関数などはProcessingとほとんど同じ
16

17. ありがとうございました