Touchdesigner is a visual programmation langage used to create multimedia interactive content in real time. It is mostly used by artists and programmers to create artwork, performances and installations.
Touchdesigner allow 2D and 3D production, including rendering and composing tools, video and audio inputs and outputs, multi-screens support, video mapping, animation, 3D engine, and programmation tools.
Programming in TD is based on the connexion between different nodes, which all have parameters controling their operations.
Uses : mapping, VJing, spectator/environment/sound-visual interaction
Inputs :
- sound
- MIDI controller
- datas : OSC, Serial (from Arduino, ...)
- etc
Outputs :
- real-time video (video-mapping, led-mapping, ...)
- datas : OSC, Serial (from Arduino, ...)
- etc
Augmenta laser wall interactive visual
Augmenta 3D camera calibration
Pixel mapping with 9 leds bars
Pixel mapping with a MIDI controler
Borischimp504 - photogrammetry
B2bk - photogrammetry
Kaoru Tanaka - generative visuals
Roelof Knol - interactive installations
No One's Image - generative visuals
Karlskene - generative visuals with laser and projection
Simon Alexander-Adams - generative visuals
The Interactive & Immersive HQ
Network in the middle, palette on the left (you can close it), parameters on the right.
On top, differents little parameters of TD, layout etc, on the bottom, the timeline.
To open the nodes menu, you can either double-click on the background or press tab on your keyboard.
6 categories of nodes :
- COMP (Components), representing different types of controls and various nodes.
- TOP (Texture Operators), allowing operations on 2D images.
- CHOP (Channel Operators), used for animations and audio.
- SOP (Surface Operators), native 3D objects of TD, handling 3D points, polygones, and other 3D primitives.
- MAT (Materials), used to apply materials and shaders on 3D renders.
- DAT (Data Operators), used for texts, scripts and data arrays.
Les nodes les + utilisées
Geo+Camera+Lightto create a 3D render.
Noise: random as a 2D image, easy to animateComposite: blend multiple images with different operation typesLevel: change the brightness, contrast, opacity, ..., of an imageLookup+Ramp: recolorize an image with the color of the gradient in the RampMovie File In: import an image or a videoRender: render a 3D object or scene into a 2D imageTransform: change the size, position, orientation, of an image, add a background behind transparent pixelsMovie File Out: export an image or video
Audio File In: import an audio fileConstant: create constant datas to use in the projectFilter: smooth a data stream to avoid a too noisy inputLimit: constrain a data stream between a maximum and a minimum with different operationsMath: apply math operations on dataMouse In: get the X and Y position of the mouse cursorKeyboard In: get keyboard events
Grid: create a 3D gridSphere: create a sphereTwist: bend ou twist 3D objects with different operationsText: create a 3D text objectTransform: change the size, position, rotation, ..., of a 3D object
Constant: a material with a full constant colorLineouWireframe: a material with just the polygons outlinePhong: a material with a color map, a normal map, ...
Each categories have a color, and you cannot connect nodes from different categories. To connect a CHOP to a TOP in your network for example, you can either use a CHOPToTop node or link the parameter you want in the CHOP to a parameter in the TOP. The link will then be a dotted line instead of a full line.
Each node can be customized with a multitude of parameters particular to each, and allow the link of parameters between differents nodes, and to get data from any part of the TD project.
To open the parameters, press 'p'.
To connect nodes, you can either do a regular link from one node's output to another node's input, if they are the same type of node (same color).
To get a node to "look at" another node, whether they are the same type (in a Feedback TOP for example) or different types (CHOP to, SOP to, etc), you just need to drag and drop the observed node on the observing node.
You can also drag and drop the observed node (here : Audio Oscillator CHOP) in the slot in the parameters of the observing node (here : CHOP to TOP), or write its name.
To get some datas from a node (most of the time, CHOPs) into the parameters of another node, you need to first click on the little + at the bottom right of the node, to activate the "Viewer Active" mode.
The look of the node should change, and you can then drag and drop the channel name into a slot in the parameters of another node. Here the chan1 of an Audio Oscillator CHOP, into the period of a Noise TOP. A list of export options appears, you should select "CHOP Reference" as the export to keep it in real time.
You can also write "op('NameOfTheNode')['NameOfTheChannel']" in the parameter.
To find help quickly about a node that you don't know or don't understand, you can right-click on the node and click Operator Snippets to open a Touchdesigner page with one or multiple examples of how to use the node :
You can also click Help to open the Touchdesigner documentation page about the node :
To animate a Noise TOP, you can write "absTime.seconds" in the Translate parameters of the Transform tab in the parameters.
You can make it scroll horizontally in translate X, scroll vertically in the translate Y, and the best results are often with translate Z (when the noise type is 3D or 4D).
The basic feedback loop network : one texture TOP, going to a Feedback TOP, going to a modifier TOP (level, blur, etc), going to Composite TOP with the texture TOP.
In the parameters of the Feedback TOP, we drag and drop the Composite TOP in the Target TOP slot, to have the grey arrow link between the TOPs closing the loop.
In the parameters of the Level TOP, in the Post tab, we set the opacity to a lower value like 0.9, to decrease the opacity of the layers as they go through the feedback loop.
In the parameters of the Composite TOP, we chose a operation mode like Add, or Atop.
My tutorial about using the Feedback TOP.
To export a .mov video : create a Movie File Out TOP at the very end of your network, chose a name and a place for the file in the file slot. To start a recording, activate the Record button in the parameters, and deactivite the Record button to stop the recording.
You can and should uncheck "Realtime" in the middle of the top menu, so your video doesn't skip frames if TD start lagging.
To send the video on a media server, create a Syphon/Spout Out TOP at the very end of the network.
Create an Audio File in CHOP, in the parameters you can active Mono to have one channel instead of a stereo sound.
You can put your own sound or keep the example one from TD.
Link it to a Math CHOP, go to the tab Range, change the From Range, I put -0.7 and 0.7 because it's the range I see on my CHOP.
Then change the To Range, I put 0.2 and 0.3 because it looked best.
Click on the little cross on the bottom right of the node to activate the active viewer.
Create a Circle TOP, in the parameters Radius X and Y, drag and drop the chan1 from the Math TOP, and select CHOP Reference in the slot.
To create a basic 3D geometry network, you need 5 nodes.
- a SOP of your choice
- a
Geometry COMP - a
Camera COMP - a
Light COMP - a
Render TOP - a MAT of your choice
You start by creating a SOP of your choice, here a Sphere SOP.
Create a Geomtry COMP by dragging directly the out link of the Sphere and hitting tab.
The sphere should appear in the Geo. Create a Camera COMP and a Light COMP, then a Render TOP. Grey arrow links should appear between the three COMP and the render.
Then create a MAT of your choice, here a Phong MAT, and drag it on the Geometry COMP, and select Parm: Material.
With the Phong MAT, you use any TOP as a texture for the material by dragging and dropping the TOP on the "Color Map" parameters of the Phong.
Create a Mouse In CHOP.
Create a Circle TOP, set the radius to something smaller like 0.05, and the resolution to something bigger like 1280*720.
Connect it to a Transform TOP.
In the Transform TOP parameters, drag and drop "tx" from the Mouse In CHOP in the Translate X parameter, and do the same for "ty".
If the circle isn't matching exactly the position of the cursor, we can remap the position so it matches the resolution of the image.
Add two Select CHOP after the Mouse In, and choose tx and ty in "Channel Names" in each Select, to have a CHOP for each channel.
Add a Math CHOP after each Select and go to the "Range" tab of the parameters.
Most of the time, the position tx of the mouse will go from -1 (left side of the screen) to 1 (right side), and ty will go from around -0.6 (bottom of the screen) to 0.6 (top of the screen). You want to "From Range" to be these values in each Math CHOP.
You can then arrange the "To Range" value by moving your mouse to the edges of the display of the Transform TOP, and setting the range to a value where the circle center position match your cursor position around the edges and in the middle of the display.
I used -0.6, 0.6 for tx and -0.7, 0.7 for ty.
The Range tab in a Math CHOP works by giving the current minimum and maximum of a value, and the new minimum and maximum that you chose, so the value is recalculated proportionally.
-
MediaPipe for TD (EN) : use the face tracking, hand tracking and skeleton tracking to create interaction with a webcam (like with a Kinect).
-
Audioreactive visual in TD (EN) : create visuals based on the audio spectrum of a sound.
-
Feedback loop in TD (EN) : understand and use the feedback loop.
-TD <-> Arduino: communicate via Serial between Touchdesigner and Arduino.
-
Text effects in TD (EN) : different text animations.
-
Using Kantan for video-mapping in TD (EN) : use TD to do video-mapping (does not work very well).
-
Using Augmenta with TD (EN) : use Augmenta to create interactive projections (old method).
-
Touchdesigner ressources from the MIR lab (advanced).