Hiro Kubayashi Presents: Take The 'A' Train

DATT 3400 M - Creative Coding II

Final Project

Tools Used: TouchDesigner, Arduino, MediaPipe, ZIGSIM_app

This work is a visual expression piece inspired by the iconic jazz composition Take the 'A' Train by Duke Ellington. Drawing influence from media projections used in live entertainment and immersive experiences, the project explores the dynamic interaction between performers and technology.

使用ツール：TouchDesigner, Arduino, MediaPipe, ZIGSIM_app

本作品は、ジャズの名曲「Take the 'A' Train」（デューク・エリントン）にインスピレーションを受けた視覚表現作品です。ライブエンターテインメントや没入型体験におけるメディア・プロジェクションから着想を得ており、パフォーマーとテクノロジーの相互作用に興味を持って制作しました。

DATT3400 Final Project Presentation

Centered around TouchDesigner, the project consists of seven distinct visual components:

■ Generative Dancing Shapes

Rectangles, triangles, and circles are animated using the Noise SOP, each with different parameters. Their positions are determined by varying grid sizes and values generated by the Noise TOP.

■ Water Animation via ZIGSIM

This effect uses the ZIGSIM app on a smartphone to send motion data to TouchDesigner via OSC. The phone and laptop must be on the same local network for OSC data to transmit correctly.

■ L-System Tunnel

Using the L-system SOP, algorithmic patterns and 3D forms are generated. MediaPipe tracks the user’s face position, which dynamically controls the camera angle and line colors via data from the Analyze SOP.

■ Arduino Distance Sensor and Disappearing Tree

An Arduino-based distance sensor detects the proximity of the user’s hand. When it comes within 25 cm, the dancing tree visuals disappear.

■ Noisy Nest of Shapes

Starting from simple square forms, strong noise effects are applied to generate visuals resembling spider webs. Colors are defined by a Ramp TOP and multiplied with a Render TOP.

■ Dancing Trees

Using the L-system SOP, tree structures with branches and leaves are created. A Noise SOP is used to apply random scaling to animate the trees, and a Transform SOP offsets them along the X-axis.

■ Water Drawing with Hand

This effect tracks the user’s thumb using MediaPipe and the ZIGSIM app to animate a water-like circle. The water flows toward the upper-right of the screen when the value is set to 0.6. When the value is 0.5, the water remains stationary. Webcam input is overlaid with the animation for added visual depth.

TouchDesignerを中心に、以下のような7つの視覚要素を構成しています：

■ ジェネラティブ・ダンシング・シェイプ

Noise SOPを用いて、矩形・三角形・円が異なるパラメータでアニメーションされます。GridサイズとNoise TOPによってそれぞれの形状の位置が決定されます。

■ ZIGSIMによる水のアニメーション

スマートフォンのZIGSIMアプリからOSCでデータを送信し、水の流れの動きを制御しています。PCと同一ネットワーク上で動作する必要があります。

■ L-systemトンネル

L-systemによるアルゴリズム模様を生成し、MediaPipeによって顔の位置でカメラアングルや線の色を制御します。

■ Arduino距離センサーと樹木の消失

手がセンサーに近づくと、踊る木が消える仕掛け。25cm以内で消失するように設定しています。

■ ノイズ形状の巣

四角形をベースに強いノイズを加え、蜘蛛の巣のようなビジュアルを生成。Ramp TOPとRender TOPで色を乗算しています。

■ ダンシング・ツリー

L-system SOPを用いた枝と葉の生成。Noise SOPでランダムなスケール変化を加え、Transform SOPでX軸に分布させています。

■ 手で描く水の動き

ZIGSIMとMediaPipeで親指の位置をトラッキングし、水の中心点としてアニメーションを開始。画面右上へと水が流れる動きが生まれます。

View the source code on GitHub:

https://github.com/hiro9884/DATT3400-Hiromune-Kubayashi/tree/main/Final%20Project

Page updated

Report abuse