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

社内勉強会@スタジオアルカナ スタジオアルカナ

遠藤勝也 2016/06/09

1

プロジェクションマッピングとは？

• 立体物にグラフィックスを投影する技術

• プロジェクタの性能向上，低価格化により数年前から注目を集めている

3

4

MadMapper

• 有料(無料のデモ版あり)

• Syphonで映像を送れる

• 使いやすい

5

Processing, oF, Cinder

MadMapperSyphon

7

8

9

10

11

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

12

Webエンジニアのための

13

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

14

機能（予定）

• 操作用ウィンドウ，投影用ウィンドウを生成

• p5.jsなどで投影コンテンツを生成

• 投影用ウィンドウは最大化する

• マウスで投影した面を変形

15

p5.js

• Javascript版のProcessing

• 関数などはProcessingとほとんど同じ

16

ありがとうございました