WISS2014:TextAlive

TextAlive:

インタラクティブでプログラマブルなKinetic Typography制作環境
加藤 淳 中野 倫靖 後藤 真孝
産業技術総合研究所

1

背景WISS2014:TextAlive

Kinetic Typographyとは

2

背景

WISS2014:TextAlive

Kinetic Typographyとは• 静止したテキストよりも、文字情報を印象的に見せられる映像表現の一手法• コミュニケーションツールへの応用研究が多い[Lee, 2006] [Forlizzi, 2003] [水口, 2005] [Strapparava, 2006]など

本研究では、とくに文字が音楽の歌詞と同期して動くものを扱う
時間軸の制約が加わり、動画制作が難しくなる
3

問題

WISS2014:TextAlive

汎用動画制作ツールでの動画制作
Typographyの要素を文字毎に指定例）字形、サイズ、色…

動きをゼロから設計例）出現タイミング、軌跡…

Adobe After Effects CC

膨大な手作業4

問題

WISS2014:TextAlive

専用動画制作ツールでの動画制作
動きをテンプレートから選んでパラメタ調整
自由度に限界Mr. Softie

発声タイミングを各文字に手動で設定
膨大な手作業

Kinedit

TypeMonkey
5

概要

WISS2014:TextAlive

TextAlive問題

膨大な手作業

自由度に限界
提案手法

動画の自動生成とインタラクティブな編集

テンプレートのLive Programming

インタラクティブでプログラマブルな

Kinetic Typography制作環境
6

インタラクティブな制作環境

WISS2014:TextAlive

TextAlive:

インタラクティブでプログラマブルなKinetic Typography制作環境

動画の自動生成とインタラクティブな編集

7

WISS2014:TextAlive

デモ・発声タイミングの自動推定
・インタラクティブなタイミング訂正

8

インタラクティブな制作環境

WISS2014:TextAlive

発声タイミングの自動推定

歌詞

音楽

再生可能な動画

発声タイミングを手動で設定する手間を削減
9インタラクティブな制作環境

WISS2014:TextAlive

インタラクティブなタイミング訂正

タイミング訂正

再生中の動画に反映

タイミング自動推定の誤りも容易に訂正可能
10

WISS2014:TextAlive

デモ・文字・単語・フレーズごとの編集

11インタラクティブな制作環境

WISS2014:TextAlive

文字・単語・フレーズごとの編集

歌詞の構造を利用して見た目や複雑な動きを設計
12

インタラクティブな制作環境

WISS2014:TextAlive

文字・単語・フレーズごとの編集

歌詞の構造を利用して見た目や複雑な動きを設計
13

インタラクティブな制作環境

WISS2014:TextAlive

TextAliveの処理の流れ

発声タイミングの自動推定[4] M. Goto: A Chorus-Selection
Method for Musical Audio
Signals and Its Application to aMusic Listening Station, 2006.

[3] H. Fujihara, et al.:
LyricSynchronizer, 2011.

インタラクティブなタイミング訂正
文字・単語・フレーズごとの編集

インタラクティブな制作環境を実現
14

プログラマブルな制作環境

WISS2014:TextAlive

TextAlive:

インタラクティブでプログラマブルなKinetic Typography制作環境

テンプレートのLIVE PROGRAMMING

15

WISS2014:TextAlive

デモ・テンプレートのLive Programming

16

プログラマブルな制作環境

WISS2014:TextAlive

Live Programming

動画制作

テンプレート開発

コンテンツ制作とプログラミングをスムーズに往復
17

プログラマブルな制作環境

WISS2014:TextAlive

Live Programmingの実現方法• テンプレートはクラスとして実装• 状態情報はpublicフィールドにあると仮定「Save」ボタンを押した時の処理（概要）:

編集中のテンプレートを利用しているアニメーションのシリアライズ（JSON化）
テンプレートインスタンスおよびクラス情報の破棄
新クラスのコンパイルとクラスローダーによる読み込み
アニメーションをJSON表現からデシリアライズ（状態情報の復元はベストエフォート）
18

プログラマブルな制作環境

WISS2014:TextAlive

一行コメントによる制作環境GUIの拡張@ui Slider(最小,最大値)@ui Radio(項目,値,…)@ui Track()

プログラマは…

各テンプレートのデバッグを容易に行える
エンドユーザは…

各テンプレートのパラメタ調整を容易に行える
19

WISS2014:TextAlive

デモ・一行コメントによるGUI拡張

20

プログラマブルな制作環境

WISS2014:TextAlive

TextAliveの処理の流れ[4] M. Goto: A Chorus-Selection
Method for Musical Audio
Signals and Its Application to aMusic Listening Station, 2006.

[3] H. Fujihara, et al.:
LyricSynchronizer, 2011.

テンプレートのLive Programming
一行コメントによる制作環境GUI拡張

プログラマブルな制作環境を実現
21

おわりに

WISS2014:TextAlive

TextAlive:

インタラクティブでプログラマブルなKinetic Typography制作環境

おわりに

22

おわりにWISS2014:TextAlive

TextAlive

インタラクティブでプログラマブルな

Kinetic Typography制作環境

23

おわりに

WISS2014:TextAlive

TextAlive

インタラクティブでプログラマブルな

http://textalive.jp
Kinetic Typography制作環境

本日公開！
24

おわりにWISS2014:TextAlive

未来ビジョン

統合開発環境(IDE)は超☆便利！

$ vi MyCode.java

Vim? Emacs? ……CUI??
*.viml？ *.el? Atom?

25おわりにWISS2014:TextAlive

Programmability = いじりやすさ

いじりにくいグラフィカル・インタラクティブ
統合開発環境(IDE)は超☆便利！

自己進化可能な道具例）http://textalive.jp$ vi MyCode.java

いじりやすい文字ベース Vim? Emacs? ……CUI??
*.viml？ *.el? Atom?

26

おわりに

WISS2014:TextAlive

TextAlive

インタラクティブでプログラマブルな

Kinetic Typography制作環境

http://textalive.jp
27