TDA Sandbox #3 “TouchDesignerのプラグインを使う”

本記事は下記のイベント用のものです。

仏教美術×テクノロジーアート

バイタルサイン・超高画質・SNS・XR・都市データ等

Buddhist art x technology art

Vital signs, ultra-high resolution, SNS, XR, urban data, etc.

時空とココロをテクノロジーアートで繋ぐ Technology art beyond imagination.

The urban 3D data neighborhood

応募作品はディスプレイやスマホで鑑賞するものが多く、インタラクティブな作品はほとんどありません！

TouchDesignerのユーザーがいないため、応募するだけで目立つことができます。

Most submissions are designed to be viewed on displays or smartphones, with very few interactive works!

Since there are no TouchDesigner users, simply submitting your work will make you stand out.

完成イメージ：完成イメージとしては、MIDIコントローラーのフェーダーを上下させることで、ビルの上に配置されたキューブが変わり、光を放ちます。この光はビルの階数に連動しており、MIDIコントローラーで指定した階数に対応するビルの上にあるキューブが点灯します。

13113_shibuya-ku_city_2023_citygml_1_op　ダウンロードしたPLATEAUデータ　Downloaded PLATEAU data

PLATEAU_TouchDesigner_pluginSample　今回のハンズオンサンプルデータ　Sample data for this hands-on session

PLATEAU-TouchDesigner-Plugin-main　プラグインファイル　plugin File

下記のマニュアを使い説明します。

The following maneuvers are used to explain the process.

PLATEAU_TouchDesigner_pluginSample

TouchDesignerでは、昔のゲームのように、横方向を x軸、高さ方向を y軸 として先に決定し、残りの奥行きを z軸 として扱います。

地図の場合は、通常の地図と同様に、東西が x軸、南北が y軸 になり、残りの高さが z軸 となります。

In TouchDesigner, the coordinate system resembles old video games, where the horizontal direction is assigned to the x-axis, the vertical direction to the y-axis, and the remaining depth to the z-axis.

For maps, as with conventional maps, the east-west direction corresponds to the x-axis, the north-south direction to the y-axis, and the remaining elevation is assigned to the z-axis.

About the contents of the file output by PLATEAU-TouchDesigner-Plugin.toe

PLATEAU-TouchDesigner-Plugin.toeの「出力オプション」で「属性情報を出力する」を選択して出力する場合、下記の３つのファイルが出力されます。

When “Output Attribute Information” is selected in “Output Options” in PLATEAU-TouchDesigner-Plugin.toe, the following three files will be output.

　　（出力されるのはbldgデータのみで、他の地物は出力されません。Only bldg data is output, no other landmarks are output.）

ポリゴンデータ生成時に時に使用している平面直角座標系の基準緯度経度

Reference latitude and longitude of the plane rectangular coordinate system used when generating polygon data

もとのデータは平面直角座標系で作成されているため、TouchDesignerの原点から離れた位置にポリゴンデータが配置されることがよくあります。そのため、「出力オプション」で「中心点を設定地点に合わせる」を選択した場合、中心点をTouchDesignerの原点に合わせるようにしています。ここで示されるのは、その際に使用される値です。

仕組みについては、下記の記事を参照してください。

The original data is created in the plane rectangular coordinate system, so polygon data is often placed at a position far from the origin in TouchDesigner. Therefore, when the "Output Options" setting "Align Center Point to Specified Location" is selected, the center point is aligned to TouchDesigner's origin. The values used for this alignment are presented here.

For details about the mechanism, please refer to the article below.

出力したファイルを識別する、ファイル番号　File number to identify the output file Timestamp 1727083567_621993

オブジェクトID

各ビルの重心座標

各ビルの重心を平面直角座標に変換した値　Coordinates of the center of gravity of each building

各ビルの重心を平面直角座標に変換し、オフセットの値に変換した値　

Value obtained by converting the center of gravity of each building to plane rectangular coordinates and then to the value of the offset

各ビルの最低地上高・最上地上高

Minimum and maximum height above ground for each building

ビル名等の属性情報、読み込むデータによって名前や列数は変わる。

The name and number of columns will vary depending on the building name and other attribute information and the data to be read.

各ビルのLOD1の頂点情報を緯度経度・高さで表記

Vertex information of LOD1 for each building in terms of latitude, longitude, and height

メモ：csvファイルは読み込んだ時はテキストデータなので、convertDATを使って、表にしています。

Note: csv files are text data when read in, so we use convertDAT to convert them into tables.

Organizing MIDI controller signals.

MIDIコントローラーをTouchDesignerで使用することで、インタラクティブアートの制作がより直感的でリアルタイムな操作が可能になります。ノブやフェーダー、パッドを使って映像やインタラクションのパラメータを即座に調整でき、音や動きとのシンクロが容易になります。また、自由なマッピング設定により、操作性をカスタマイズできるため、作品の表現を豊かにし、観客とのダイナミックなインタラクションが可能です。さらに、コンパクトで携帯性が高く、インスタレーション現場でのセットアップが簡単です。これにより、観客の参加を引き出す魅力的な体験を創出できます。 今回は、よく使われているnanoKONTROL2を仕様します。

Using a MIDI controller with TouchDesigner allows for more intuitive and real-time interaction in creating interactive art. By utilizing knobs, faders, and pads, you can instantly adjust parameters for visuals and interactions, making it easier to synchronize with sound and motion. Additionally, customizable mapping settings enable tailored operability, enriching artistic expression and enabling dynamic interactions with the audience. Its compact and portable design also simplifies setup in installation environments, helping to create engaging experiences that invite audience participation.

In this guide, we will use the popular nanoKONTROL2.

このtoxファイルを使うことで、物理的なMIDIコントローラー・UIの両方で操作可能になります。

nanoKONTROL2が無い方はUIで操作してください。

By using this tox file, you can operate it with both physical MIDI controller and UI.

If you do not have nanoKONTROL2, please use the UI to operate it.

Only the number of floors specified by the MIDI controller from the attribute information is set to 1.

メモ①：MIDIからきている信号は０～１になっている。このままでは、ビルの階数と突合できないので、mathCHOPを使って、属税情報内の最大～最小階数（０階～６４階）の整数になるようにしている。

OP→Integerを”Floor”にすると、整数になる。

Rangeにmax_nullCHOPとmini_nullCHOPの値を入れる。

Note 1: MIDI signals are received as values ranging from 0 to 1. However, these values cannot directly correspond to building floors. To resolve this, a Math CHOP is used to scale the values to integers representing the building's floor range (e.g., 0 to 64 floors).

Set the OP → Integer parameter to "Floor" to convert the values into integers.

For the Range, input the values from max_nullCHOP and mini_nullCHOP.

メモ②：Expressionを仕様して、該当するビルのみ１にする。

express1のexpressionに

記入すると、指定された、階数のみ１になる

Note 2: Use an Expression to set the value to 1 for the specified building only.

In express1, write the following in the expression field:

This ensures that only the specified floor is set to 1.

メモ①：Translate X Y Z　に　tx 　ty 　tz　を　入れる（キューブの位置）

メモ②：Scale X Y Z　に　scale　を　入れる（キューブの大きさ）

メモ③：Instance2の　Color　R　G　B　に　rgb　を　入れる（キューブの色）

メモ④：constantMATはキューブの光らせたい色に設定

Note 1: Input tx, ty, and tz into Translate X, Y, Z to set the cube's position.

Note 2: Input scale into Scale X, Y, Z to adjust the cube's size.

Note 3: Input rgb into Instance2 → Color R, G, B to set the cube's color.

Note 4: Configure the constantMAT to the desired glowing color for the cube.

メモ：PLATEAU_TouchDesigner_pluginがポリゴンデータと属性情報と平面直角座標を揃えて出力しているので、入れるだけでぴったり合う

Note: The PLATEAU_TouchDesigner_plugin outputs polygon data, attribute information, and plane rectangular coordinates aligned perfectly, so simply inputting the data ensures precise alignment.

メモ：都市情報は大きいので値を1000程度にしないと、ビルに光があたりません。

Note: Urban data values are large, so they need to be scaled down to around 1000; otherwise, the lighting won't properly affect the buildings.

メモ①：都市データは大きいのでカメラのViewのFarを3000程度にする。

メモ②：カメラの軌道はcircleSOPとLFOCHOPで指定

メモ③：カメラの視点はNullCOMPで指定

Note 1: Urban data is large, so set the Camera View Far to around 3000.

Note 2: Specify the camera's orbit using circleSOP and LFOCHOP.

Note 3: Define the camera's viewpoint using NullCOMP.

メモ①：bloomでいい感じに光らせる

メモ②：textTOPのTextのTextにint(op('floor_null')[0]) と入れて、選択中の階数を表示させる

Note 1: Use Bloom to create a pleasing glow effect.

Note 2: In textTOP, input int(op('floor_null')[0]) into the Text → Text field to display the currently selected floor.