第6回: データ,ビジュアライゼーション

目次

データを扱う

データを作る

データを扱う際はDATを使用しますが,DATは主に

  • Text
  • Table
  • Communication
  • Script

などがあります.
このうちCommunicationはUSBでつないだデバイスや無線機器との通信です.ScriptはPythonという言語を使って作っていくロジックです.これについては第10回で扱う予定です.今回は基本的にはコーディングせずに組んでいくことを考えます.

Text DAT

Text DATは文字列を入力することができるDATです.単純に文字列を入力する以外にも,Scriptを書いて,それをRun ScriptすることによりScriptを実行することもできます.

Table DAT

Table DATはExcelやNumbersのような表形式のデータを入力することができます.また,表形式のデータを選んで読み込むこともできます.

RowとColumn

データを扱っていると,データを調整する必要が出ることが多々あります.その際TouchDesignerではRowとColumnという言葉頻出します.それそれが縦と横のどちらの要素を扱っているのかこんがらがってしまわないために以下の図の用に覚えるとわかりやすいでしょう.

DATのパラメータリンク

DATのパラメータリンクはこれまでの様にドラッグ・アンド・ドロップでリンクすることは不可能です.Table DATのCellをリンクさせたい場合は

op('オペレータ名')[R, C]

とScriptを書くことで取得できます.

編集する

Select DAT

これまで同様に使用することができますが,RowとColumnに注意する必要があります.また,最初のRow or Columnを含むのかどうかも忘れずに考慮しましょう.

Merge DAT

Mergeもこれまで同様に使用することができます.

Switch DAT

Switchもこれまで同様に使用することができます.

ビジュアライゼーション

ビジュアライゼーション(視覚化)は色々な情報(数,音,時間,場所,関係,文字,流れ)をわかりやすく見せたり,感情に訴えかけるような魅力ある視覚に落とし込むようなことを指し,情報デザインの取り組みのうち大きな一つの柱です.
ビジュアライゼーションの手法1つ1つの詳しい解説は後期インフォグラフィックス演習で是非習得していただきたいですが,Data Viz Projectを観るとだいたいイメージを掴むことができます.

Data Viz Project: https://datavizproject.com/

事例

Japan Earthquakes 2011 Visualization Map

また,日本のデータビジュアライゼーションでわかりやすいものの例として3.11周辺の地震の発生日時とその場所の関係があります.ひと目で3月11日付近にかなり大きなピークがあり,その後もしばらく続いたことがわかります.

Ryoji Ikeda “supersymmetry”

先程の視覚化とは異なり,データを扱いながらも,わかりやすく理解させるというより,その膨大さや複雑さを視覚的・空間的に展開することで圧倒的な感動・感傷を与えていることがわかります.


TouchDesignerはビジュアライゼーションと相性が良いです.データに従って図形を複製したり,それらに色や大きさなどを反映することができるためです.実際に見ていきたいと思います.

csv

csv(Commna Separated Value)はコンマで区切られた並べたデータ群のことです.現在公開されているオープンデータはcsv形式であることが多いです.TouchDesignerでcsvファイルを読み込む際は,ファイルをドラッグ・アンド・ドロップすると,自動的にTable DATで表形式で読み込まれます.

オペレータタイプ変換

オペレータタイプ変換はそれぞれのタイプ(TOP, CHOP…)の相互の変換を指し,TouchDesignerの強力な機能の一つであるといえます.それぞれのオペレータタイプ変換のOPは以下の表の通りです.

名称 注意点
CHOP to TOP CHOP -> TOP.TOPは縦が1pxになるので,その後Fit TOPなどで調整が必要
DAT to CHOP DAT to > outputDAT to > First Row is, DAT to > First Column isを調整
SOP to CHOP 特になし
CHOP to SOP 特になし
DAT to SOP DAT to > PointsDAT to > VerticesDAT to > Primitivesの情報が必要
CHOP to DAT CHOP to > Include Namesをオンにすることでチャネル名を取得可能
SOP to DAT SOP to > Extractでどの要素を抽出するか選択する

インスタンシング

Geometry COMPのInstancingを使うことで,大量にPrimitiveをコピーしてリアルタイムに描画することが可能です.Instancingは,リアルタイムコンピュータグラフィックスにおけるGPU Instancingを指します.

CPUとGPU

GPUとはGpaphics Processing Unitの略で,3Dグラフィックスを高速に描くためのパーツです.とはいいつつ,近年ではその構造を利用して,深層学習(ディープラーニング)や,他の汎用計算に利用されることも多くあります.GPUがなぜ速いのかということについては,The Book of Shadersの図がとてもわかりやすいので引用します.

The Book of Shaders: https://thebookofshaders.com/?lan=jp


図の通りですが,CPUは複雑な処理ができる代わりにタスクを1つずつ順番に終わらせていく太い土管のような存在なのに対して,GPUは単純な計算を大量に行える代わりにそれぞれ複雑な処理をするには適していない大量のストローのような存在です.TouchDesignerのインスタンシングはこのGPUの特性を使ったGPU Instancingを実装してあるおかげでリアルタイムに大量のSOPを処理することができます.


CPUのイメージ図(The Book of Shaders シェーダーとは?より引用)



GPUのイメージ図(The Book of Shaders シェーダーとは?より引用)

インスタンシングのパラメータ

インスタンシングのパラメータにリンクしたオペレータのチェンネル名をアサインすることによってサンプル数だけコピーし,サンプルの値を適用することができます.
パラメータとその概要は以下の表の通りです.

パラメータ 概要
Translate(X, Y, Z) 座標移動
Rotate(X, Y, Z) 回転
Scale(X, Y, Z) 拡大縮小
Pivot(X, Y, Z) 支点
Texture(U, V, W) テクスチャ
Color(R, G, B)

画像からデータビジュアライゼーション

参照するオペレータをTOPにすることでそのピクセルのRGBA値をインスタンシングのパラメータとして用いることができます.しかし,TOPの解像度が高すぎると,横x縦px分複製されるので最悪TouchDesigerが固まってしまいます.解像度をCommon > ResolutionからEighth(1/8)くらいに予め落としてからインスタンシングするようにしましょう.

csvからデータビジュアライゼーション

csvからデータビジュアライゼーションしてみましょう.covid-19.csvをダウンロードして使用します.

csvデータをいかにインスタンシングしやすいように処理するかということが一番のポイントです.

課題

授業内課題

図のようにairports.csvからデータビジュアライゼーションしなさい

要件

  • 緯度,経度,標高の関係をマッピングすること
  • ファイル名を学籍番号+名前(ローマ字).toe として添付して提出(例: 11111111SeiyaAoki.toe)
  • csvファイルとプロジェクトファイルを同一フォルダに入れて,Zip化して添付すること

締切: 2021年5月14日16:10
提出先: 情デサーバー 06_授業内/

来週までの課題

今日の内容を使って,データビジュアライゼーションしなさい.

要件

  • ファイル名を学籍番号+名前(ローマ字).toe として添付して提出(例: 11111111SeiyaAoki.toe)
  • csv,画像など使うデータは問わない
  • 使用したファイルとプロジェクトファイルを同一フォルダに入れて,Zip化して添付すること

締切: 2021年5月20日23:59
提出先: 情デサーバー 06_週課題/