textalive - jun kato...3 wiss2014:textalive kinetic typography とは...
TRANSCRIPT
![Page 1: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/1.jpg)
1
WISS2014:TextAlive
TextAlive:インタラクティブでプログラマブルな
Kinetic Typography制作環境
加藤淳 中野倫靖 後藤真孝産業技術総合研究所
![Page 2: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/2.jpg)
2
WISS2014:TextAlive
Kinetic Typographyとは背景
![Page 3: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/3.jpg)
3
WISS2014:TextAlive
Kinetic Typographyとは
• 静止したテキストよりも、文字情報を印象的に見せられる映像表現の一手法
• コミュニケーションツールへの応用研究が多い[Lee, 2006] [Forlizzi, 2003] [水口, 2005] [Strapparava, 2006]など
文字が音楽の歌詞と同期して動くものを扱う本研究では、とくに
時間軸の制約が加わり、動画制作が難しくなる
背景
![Page 4: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/4.jpg)
4
WISS2014:TextAlive
汎用動画制作ツールでの動画制作
Typographyの要素を文字毎に指定例)字形、サイズ、色…
動きをゼロから設計例)出現タイミング、軌跡…
Adobe After Effects CC
膨大な手作業
問題
![Page 5: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/5.jpg)
5
WISS2014:TextAlive
専用動画制作ツールでの動画制作
動きをテンプレートから選んでパラメタ調整
TypeMonkey
Mr. Softie
Kinedit
発声タイミングを各文字に手動で設定
自由度に限界
膨大な手作業
問題
![Page 6: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/6.jpg)
6
WISS2014:TextAlive
TextAlive
Kinetic Typography制作環境
インタラクティブで プログラマブルな
問題
膨大な手作業 自由度に限界提案手法
動画の自動生成とインタラクティブな編集
テンプレートのLive Programming
概要
![Page 7: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/7.jpg)
7
WISS2014:TextAlive
動画の自動生成とインタラクティブな編集
TextAlive:インタラクティブでプログラマブルなKinetic Typography制作環境
インタラクティブな制作環境
![Page 8: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/8.jpg)
8
WISS2014:TextAlive
デモ・発声タイミングの自動推定・インタラクティブなタイミング訂正
![Page 9: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/9.jpg)
9
WISS2014:TextAlive
発声タイミングの自動推定
歌詞 音楽 再生可能な動画
発声タイミングを手動で設定する手間を削減
インタラクティブな制作環境
![Page 10: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/10.jpg)
10
WISS2014:TextAlive
インタラクティブなタイミング訂正
タイミング訂正 再生中の動画に反映
タイミング自動推定の誤りも容易に訂正可能
インタラクティブな制作環境
![Page 11: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/11.jpg)
11
WISS2014:TextAlive
デモ・文字・単語・フレーズごとの編集
![Page 12: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/12.jpg)
12
WISS2014:TextAlive
文字・単語・フレーズごとの編集
歌詞の構造を利用して見た目や複雑な動きを設計
インタラクティブな制作環境
![Page 13: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/13.jpg)
13
WISS2014:TextAlive
文字・単語・フレーズごとの編集
インタラクティブな制作環境
歌詞の構造を利用して見た目や複雑な動きを設計
![Page 14: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/14.jpg)
14
WISS2014:TextAlive
TextAliveの処理の流れ
[3] H. Fujihara, et al.: LyricSynchronizer, 2011.
[4] M. Goto: A Chorus-Selection Method for Musical Audio Signals and Its Application to a Music Listening Station, 2006.
発声タイミングの自動推定
インタラクティブなタイミング訂正
文字・単語・フレーズごとの編集
インタラクティブな制作環境を実現
インタラクティブな制作環境
![Page 15: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/15.jpg)
15
WISS2014:TextAlive
テンプレートのLIVE PROGRAMMING
TextAlive:インタラクティブでプログラマブルなKinetic Typography制作環境
プログラマブルな制作環境
![Page 16: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/16.jpg)
16
WISS2014:TextAlive
デモ・テンプレートのLive Programming
![Page 17: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/17.jpg)
17
WISS2014:TextAlive
Live Programming
コンテンツ制作とプログラミングをスムーズに往復
プログラマブルな制作環境
動画制作 テンプレート開発
![Page 18: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/18.jpg)
18
WISS2014:TextAlive
• テンプレートはクラスとして実装• 状態情報はpublicフィールドにあると仮定
Live Programmingの実現方法
編集中のテンプレートを利用しているアニメーションのシリアライズ(JSON化)
テンプレートインスタンスおよびクラス情報の破棄
新クラスのコンパイルとクラスローダーによる読み込み
アニメーションをJSON表現からデシリアライズ(状態情報の復元はベストエフォート)
「Save」ボタンを押した時の処理(概要):
プログラマブルな制作環境
![Page 19: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/19.jpg)
19
WISS2014:TextAlive
一行コメントによる制作環境GUIの拡張プログラマブルな制作環境
各テンプレートのパラメタ調整を容易に行える
各テンプレートのデバッグを容易に行えるプログラマは…
エンドユーザは…
@ui Radio(項目,値,…) @ui Track()@ui Slider(最小,最大値)
![Page 20: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/20.jpg)
20
WISS2014:TextAlive
デモ・一行コメントによるGUI拡張
![Page 21: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/21.jpg)
21
WISS2014:TextAlive
TextAliveの処理の流れ
[3] H. Fujihara, et al.: LyricSynchronizer, 2011.
[4] M. Goto: A Chorus-Selection Method for Musical Audio Signals and Its Application to a Music Listening Station, 2006.
テンプレートのLive Programming
プログラマブルな制作環境を実現
一行コメントによる制作環境GUI拡張
プログラマブルな制作環境
![Page 22: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/22.jpg)
22
WISS2014:TextAlive
おわりに
TextAlive:インタラクティブでプログラマブルなKinetic Typography制作環境
おわりに
![Page 23: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/23.jpg)
23
WISS2014:TextAlive
TextAlive
Kinetic Typography制作環境
インタラクティブで プログラマブルな
おわりに
![Page 24: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/24.jpg)
24
WISS2014:TextAlive
TextAlive
Kinetic Typography制作環境
インタラクティブで プログラマブルな
おわりに
http://textalive.jp
本日公開!
![Page 25: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/25.jpg)
25
WISS2014:TextAlive
未来ビジョン
統合開発環境(IDE)は超☆便利!
$ vi MyCode.java
Vim? Emacs? ……CUI??*.viml? *.el? Atom?
おわりに
![Page 26: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/26.jpg)
26
WISS2014:TextAlive
Programmability = いじりやすさ
統合開発環境(IDE)は超☆便利!
$ vi MyCode.java
Vim? Emacs? ……CUI??
おわりに
*.viml? *.el? Atom?
自己進化可能な道具例)http://textalive.jp
文字ベース
グラフィカル・インタラクティブ いじりにくい
いじりやすい
![Page 27: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い](https://reader033.vdocuments.us/reader033/viewer/2022053014/5f117782e59f617c290d799e/html5/thumbnails/27.jpg)
27
WISS2014:TextAlive
TextAlive
Kinetic Typography制作環境
インタラクティブで プログラマブルな
おわりに
http://textalive.jp