textalive - jun kato...3 wiss2014:textalive kinetic typography とは...

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

Upload: others

Post on 28-Jun-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

1

WISS2014:TextAlive

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

Kinetic Typography制作環境

加藤淳 中野倫靖 後藤真孝産業技術総合研究所

Page 2: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

2

WISS2014:TextAlive

Kinetic Typographyとは背景

Page 3: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

3

WISS2014:TextAlive

Kinetic Typographyとは

• 静止したテキストよりも、文字情報を印象的に見せられる映像表現の一手法

• コミュニケーションツールへの応用研究が多い[Lee, 2006] [Forlizzi, 2003] [水口, 2005] [Strapparava, 2006]など

文字が音楽の歌詞と同期して動くものを扱う本研究では、とくに

時間軸の制約が加わり、動画制作が難しくなる

背景

Page 4: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

4

WISS2014:TextAlive

汎用動画制作ツールでの動画制作

Typographyの要素を文字毎に指定例)字形、サイズ、色…

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

Adobe After Effects CC

膨大な手作業

問題

Page 5: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

5

WISS2014:TextAlive

専用動画制作ツールでの動画制作

動きをテンプレートから選んでパラメタ調整

TypeMonkey

Mr. Softie

Kinedit

発声タイミングを各文字に手動で設定

自由度に限界

膨大な手作業

問題

Page 6: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

6

WISS2014:TextAlive

TextAlive

Kinetic Typography制作環境

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

問題

膨大な手作業 自由度に限界提案手法

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

テンプレートのLive Programming

概要

Page 7: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

7

WISS2014:TextAlive

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

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

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

Page 8: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

8

WISS2014:TextAlive

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

Page 9: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

9

WISS2014:TextAlive

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

歌詞 音楽 再生可能な動画

発声タイミングを手動で設定する手間を削減

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

Page 10: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

10

WISS2014:TextAlive

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

タイミング訂正 再生中の動画に反映

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

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

Page 11: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

11

WISS2014:TextAlive

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

Page 12: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

12

WISS2014:TextAlive

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

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

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

Page 13: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

13

WISS2014:TextAlive

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

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

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

Page 14: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

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 とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

15

WISS2014:TextAlive

テンプレートのLIVE PROGRAMMING

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

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

Page 16: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

16

WISS2014:TextAlive

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

Page 17: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

17

WISS2014:TextAlive

Live Programming

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

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

動画制作 テンプレート開発

Page 18: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

18

WISS2014:TextAlive

• テンプレートはクラスとして実装• 状態情報はpublicフィールドにあると仮定

Live Programmingの実現方法

編集中のテンプレートを利用しているアニメーションのシリアライズ(JSON化)

テンプレートインスタンスおよびクラス情報の破棄

新クラスのコンパイルとクラスローダーによる読み込み

アニメーションをJSON表現からデシリアライズ(状態情報の復元はベストエフォート)

「Save」ボタンを押した時の処理(概要):

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

Page 19: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

19

WISS2014:TextAlive

一行コメントによる制作環境GUIの拡張プログラマブルな制作環境

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

各テンプレートのデバッグを容易に行えるプログラマは…

エンドユーザは…

@ui Radio(項目,値,…) @ui Track()@ui Slider(最小,最大値)

Page 20: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

20

WISS2014:TextAlive

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

Page 21: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

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 とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

22

WISS2014:TextAlive

おわりに

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

おわりに

Page 23: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

23

WISS2014:TextAlive

TextAlive

Kinetic Typography制作環境

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

おわりに

Page 24: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

24

WISS2014:TextAlive

TextAlive

Kinetic Typography制作環境

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

おわりに

http://textalive.jp

本日公開!

Page 25: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

25

WISS2014:TextAlive

未来ビジョン

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

$ vi MyCode.java

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

おわりに

Page 26: TextAlive - Jun Kato...3 WISS2014:TextAlive Kinetic Typography とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

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 とは •静止したテキストよりも、文字情報を印象的に見せ られる映像表現の一手法 •コミュニケーションツールへの応用研究が多い

27

WISS2014:TextAlive

TextAlive

Kinetic Typography制作環境

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

おわりに

http://textalive.jp