VEJ様でのセミナー資料 プログラムで映像を作るとどんなこと出来るか、 どんなツールがあるか、の超入り口的なお話

1. プログラムで映像をつくるとは？？
超入門編！！
神田 竜

2. 目次
• 自己紹介
• 作例紹介
• 触ってみよう

3. 自己紹介
• 神田竜
• Kezzardrix名義で活動
• フリーランスのプログラマ
• VJ
• SjQ++
• VMO
• HEXPIXELS
• 展示の手伝いとか

4. 自己紹介
• LINEスタンプなども出しました
• ケザドリ

5. 自己紹介
• クリエイターケザドリ

6. 自己紹介
• ヒップホップケザドリ

7. 自己紹介
• ケザジジケザババ

8. 本日よろしくお願い致します!!!

9. 作例紹介

10. 映像仕事多い

11. ほぼ全てプログラミングして作る

12. プログラミング映像の利点
• レンダリング待ちがない！
• リアルタイムに色々出来る！
→ 何かに反応
→ パラメータを変更可
• かゆいところに手が届く！
→ 便利な機能を思いついたら自分で作る
→ デバイスと組み合わせるとか

13. オーディオリアクティブVJ
• https://www.youtube.com/watch?v=eryQb3e
77r8
• http://www.creativeapplications.net/maxmsp
/hexpixels-c-punks-a-unit-for-realtime-visual-
expression/
• パラメータやシーンをリアルタイムで操作
• ミキサーをプログラミング

14. SjQ++
• https://vimeo.com/77019029
• オーディオビジュアルな即興演奏バンド
• 楽器を個別にセンシング
• 演奏を聞いて映像を変える
• 映像を見て演奏を変える
→ お互いにフィードバックする

15. SDKezzardrix
• https://vimeo.com/160073609
• レーザー担当のMotoi Shimizu君とのユニット
• レーザーとPJをキャリブレーションして使う

16. パフォーマンス
• Dividual Plays
• 安藤洋子 + YCAMによるプロジェクト
• http://special.ycam.jp/ram/
• 自作モーションキャプチャを利用
• https://vimeo.com/121890356
→ 客ではなくダンサーに見せる映像
→ダンスの動きのアイデアになる情報を作る

17. 展示案件
• 天吊のセンサーカメラ(KinectV2)で人を検知
• ネットに出せません案件

18. 映像制作
• LITEのMV
• https://www.youtube.com/watch?v=tTVs1Mo
R2kA
• 事前に楽器のファイルをバラで貰って解析
• リアルタイムで動かしてキャプチャ
• Take20くらい撮った
• 初回のを未編集で採用。。。

19. まとめ
• 普通の映像制作じゃ無理なこと
→ インタラクティブ、他セクションとの連携
• 普通の映像制作じゃめんどいこと
→ 事前解析、データベース、ランダマイズ

20. んじゃ、実際どんな感じで作るの？

21. 何使うの？
&
どんな流れで作るの？

22. プログラミング環境の種類
• 色々あります
• ビジュアルプログラミング
• コードをガリガリ書くもの
• ゲームエンジン
↓
それぞれ特性が違う！

23. ビジュアルプログラミング

24. ビジュアルのプログラミング？

25. ビジュアルでプログラミング！

26. ビジュアルプログラミング
• GUIを使って開発
• 多くの環境が、箱と箱を線で繋いで開発
→ パッチング
→ 動かしながら開発できる
• プログラミング初心者でも参入しやすい

27. Max7
• Cycling74が開発
→ https://cycling74.com/
• 音楽と映像を同時に扱える
• 業界標準
• 元々は音楽用のソフト
→ 音響処理が超得意

28. Max7
• 有料
• 昔は高かったけど、今は安い

29. Pure data
• https://puredata.info/
• Maxにも関わっていた音楽家が立ち上げ
• 無料
• 音響処理は強い
• 映像も扱える
• 編集のこなれ具合でいうとMaxには劣る
→ パッチの整理とか

30. VVVV
• https://vvvv.org/documentation/jp.propagand
a
• Windowsのみ
• 有志が開発したプラグインが凄い
• DirectXによるレンダリング

31. Touch Designer
• http://www.derivative.ca/
• Windowsのみ
• GUIが独特
• 照明の制御などにも使われる

32. まとめ
• プログラミングの入門にはかなり良い
• Maxがオススメ
• かゆいところに手が届かないことがある
→ 自分で箱自体を作ることも可能
→ ソースが公開されてるので頑張って書く
• GUIを描画しているので、少し重い

33. ２、コードベース

34. コードベース
• エディタを使ってコードを書く
• コードからアプリケーションを生成

35. コードベース
• 利点
• （ほぼ）なんでも好きなように出来る
→ 足りない機能は自分で開発可能
• 欠点
• 全部自分で書かないといけない
→ カメラの設定、物体の質感
→ 設定を保存したかったら保存機能を開発

36. コードベース
• 多くの環境が開発と実行が分かれている
→ 動かしながらコードを変えられない
→ コードがアプリケーションを吐くまで待つ
→ コンピュータがコードを解釈
→ アプリに固める処理をやる
→ コンパイル

37. 閑話休題

38. プログラミング言語の話

39. 言語は色々あります
• C言語
• C++
• C#
• Java
• JavaScript
→ 全部文法が違う
→ 文法は違うけど、基本は同じ
→ 英語とか日本語と同じ

40. 今日紹介するのは
• それらの言語で書かれた便利なコード集
• アートとかデザイン向けの機能
• ツールキット
• ライブラリ
→ 便利な機能は先人が作ってくれている
→ ウィンドウを作るとか誰が開発しても同じ
→ その上で中身のネタを作る
• 言語そのものがわかれば拡張可能

41. クリエイティブコーディング
• oFとかProcessingとかをまとめてこう呼ぶ
• Cinderがカンヌをとったくらいから？
• バズワード

42. Processing
• https://processing.org/
• 教育向け
• Javaベースの言語

43. Processing
• 難易度は比較的低め
• 開発環境の導入がしやすい
→ 落としたらすぐに動く
• Javaで動いているのでちょっと重い

44. openFrameworks
• http://openframeworks.cc/ja/
• 通称oF
• 日本では恐らく一番人気

45. openFrameworks
• 様々なオープンソースのコードを利用
→ 映像生成
→ 動画再生
→ サウンド
→ デバイスなど
• これらを繋ぐ「糊」のようなもの
• アドオンと呼ばれる拡張機能を有志が開発
→ http://ofxaddons.com/

46. openFrameworks
• 利点
• C++ベースなので速い
• 日本のユーザー多めでコミュニティもある
→ 質問がしやすい
• C++が難しい
• C++は果てしない

47. Cinder
• https://libcinder.org/about
• oFと同じくC++
• モダンOpenGLなど、新しい機能を積極的に取
り入れる

48. Cinder
• 映像のかなり深いところまで開発しやすい
• oFよりもエンジニア向けに色々設計されてる
• 初心者向けではない
→ exampleも難しめ
→ 映像プログラミングの深いところを知らな
いと意味不明なコードが多い

49. Three.js
• http://threejs.org/
• Javascirptベースのツールキット
• WebGLが動く
→ スマホでも３Dが表示できる

50. ちょっとoF書いてみます？

51. openFrameworks
• void 〜()というブロック
• 関数と呼ぶ
→ 仕事毎に役割分担するようなもの
• それぞれの関数に処理を分けて書く

52. openFrameworks
• setup
→ アプリ全体で使う設定
→ アプリ起動時に一度だけ呼ばれる
• update
→ 毎フレームの更新処理
• draw
→ 描画処理

53. まとめ
• 細かいことは色々出来る
• リッチな表現などをやろうとすると大変そう

54. ゲームエンジン
• ゲームを開発する用途に作られたもの
• GUIで操作
• コードもかける
• 便利な機能が盛りだくさん
• デザイナーでも作業できる
• 自分で拡張するのも可能
• 出来ないことは出来ない

55. ゲームエンジン
• 昔はゲーム会社だけが大金払って使用
• モバイルゲームなどの普及でゲーム開発も
個人へ
• 個人でも使えるようにライセンス緩和
• 売り上げが少なければタダで使える

56. ゲームエンジン
• ゲーム作んないけどアートとか展示に便利そ
う
• oFで全部作ると
→ 最新のレンダリングテクニックの実装大変

57. Unity
• http://japan.unity3d.com/
• 最新バージョンは5
• 昔は有料だった機能もタダで使えるように
• デスクトップアプリ、モバイルアプリ、web開発
など幅広く対応
• アセットストアが充実
→ 金の力で解決だ

58. Unreal Engine
• https://www.unrealengine.com/ja/what-is-
unreal-engine-4
• ゲーム業界での実績が凄い
• 立ち上げた瞬間から絵が綺麗
→ハイスペックのPCでないと動かない

59. Unityを体験してみる
• GUIで操作
• マテリアルの設定とかすぐ
• コードも書ける
→ 外部エディタで書く
→ 言語はC#かJavaScript
• drawがないので描画はUnity任せ
→ 拡張しようとすると色々めんどい
→ でも、僕ら的にはそこが一番楽しい