1. Time Displacementとは

Time Displacementは、グレースケール画像のピクセル明度（8bitの場合は0〜255）を時間変化のパラメータとすることで複雑なズレや変形の視覚効果を生み出す手法。Motion GraphicsやKinetic Typography、Slit Scanに応用されることが多く、After EffectsやTouch Designerで制作することができる。

Slit Scanに関しては別の講義ノートで紹介する。

2. 処理の流れ

Time Displacementでは最初に何らかの動きのある映像やアニメーションが必要となる。静止画をTime Displacement処理しても変化はない。

3. 参考チュートリアルとゴール

ここでは、Time DisplacementのKinetic Typographyへの応用事例として以下のチュートリアルを参考に進める。

本演習では以下のKinetic Typography表現を実現する。

4. 準備

TouchDesignerを起動後、スタートアップオペレータは削除して、Paletteを閉じる。

5. 文字のアニメーション

5.1 Text TOP他

• Text TOP

  • Textタブ - Text：任意のテキストを入力（ここではAkiraNakayasu）
  • Fontタブ - Font：任意の書体を選択（ここではArial）
  • Fontタブ - Auto-Size Font：Auto-Fit Always
  • Commonタブ - Output Resolution：1280 x 720

• Transform TOP

• RGB Key TOP

• Out TOP

  • Backdorop Display：ON

5.2 LFO CHOP他

• LFO CHOP

  • Type：Gaussian（0〜1のガウス曲線）
  • Frequency：0.3

• Math CHOP

  • To Range：0.1〜1

• Null CHOP

  • Transform TOPのScale Xへパラメータリンク

6. Time Displacement処理

Transform TOPとRGB Key TOPの間に以下のオペレータを図のように追加する。

• Texture 3D TOP

  • Cache Size：128

• Time Machine TOP

• Ramp TOP

  • Phase：absTime.seconds*0.1
  • Period：0.3
  • Extend Left：Mirror
  • Commonタブ - Resolution：1280 x 720
  • Commonタブ - Pixel Format：32-bit float (RGBA)

7. 疑似的な色ズレ効果

色ズレや色収差は印刷プロセスや光学レンズ性能が原因で発生するもので、本来できるだけ発生を抑えるようにする一方で、これらをデジタルで生成される正確すぎる画像や映像に対して意図的に付け足すことで味付けすることも多い。

参考）イラストが大変身！色収差（色ずれ）を使った余韻のある画面作り

既存のTransform TOP（下図ではtransform1）とTexture 3D TOPの間に、さらにTransform TOPを追加して、以下のパラメータを設定する。

• Transformタブ - Translate X：0.005
• Commonタブ - Channel Mask：R

（補足）Channel Maskの理解

Transform TOPのChannel Maskを利用した色ズレは、例えば下図のようにRにマスクを設定した場合は、元の位置（0,0）では赤（Red）で表示され、ずれた位置がシアン（Green + Blue）となり、2つが重なった場所が白（Red + Green ＋ Blue）となる。今回の演習ではズレを小さくすることで、白文字に対して少しだけ赤やシアンがはみ出る視覚効果を実現している。

8. より発展的な表現のチュートリアル紹介

以下はマウスの操作や動きを加えたもの。

グリッドなズレや変形を実現した表現。Time Displacementからは若干外れる？かも。

SOPを利用した3Dのテクスチャを応用した手法。