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

（とりあえず完結編）

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

遠藤勝也 2016/08/18

1

今回作った物

• ブラウザを使った プロジェクションマッピングツール

• コンテンツは動的にプログラム可能

• コンテンツのプログラミングにはp5.jsを使用

2

実際にマッピングした様子

3

プロジェクタ側

4

5

ディスプレイ側

6

7

構成

CSS<canvas><img>

Ace

8

感想• 助手さん

「クリエイティブコーダー受けしそう」

• 後輩A「かっこいいと思う」

• 自分「コードは書きにくいけど、 コンテンツとコードは一緒に見せたい」

9

まとめ

• 最終的にライブコーディングツールになった

• 研究室での反応が良かった

• そのうちアプリやサービスにして公開したい

10

ご清聴ありがとうございました

11