ブラウザを使ったプロジェクションマッピング及びライブコーディングツールの試作について

1. Webエンジニアのための
プロジェクションマッピング
（とりあえず完結編）
社内勉強会@スタジオアルカナ
スタジオアルカナ
遠藤勝也
2016/08/18
1

2. 今回作った物
• ブラウザを使った
プロジェクションマッピングツール
• コンテンツは動的にプログラム可能
• コンテンツのプログラミングにはp5.jsを使用
2

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

4. プロジェクタ側
4

5. 5

6. ディスプレイ側
6

7. 7

8. 構成
CSS
<canvas>
<img>
Ace
8

9. 感想
• 助手さん
「クリエイティブコーダー受けしそう」
• 後輩A
「かっこいいと思う」
• 自分
「コードは書きにくいけど、
コンテンツとコードは一緒に見せたい」
9

10. まとめ
• 最終的にライブコーディングツールになった
• 研究室での反応が良かった
• そのうちアプリやサービスにして公開したい
10

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