Introduction to TOPs Vid Notes

What you're going to createedit

This tutorial will introduce how to take an image of a butterfly, modify the levels of the image, place it over a larger canvas and then add a background alongside some basic compositing techniques. It is advised to watch the video version of this tutorial as it contains a stronger insight into the best practices whilst using TouchDesigner.

Bring an image into TouchDesigneredit

• Open TouchDesigner and click the X at the top of the palette browser on the left quarter of the screen.
• Double click the network editor to open the OP Create Dialog and under the TOP tab select “Movie File In” to lay down a Movie File In TOP.
• There should now be a new node in your network. Left click the node to open its parameters at the top right quarter of the network editor. If you don't see the parameters press the P key to toggle them on and off.
• In the parameter window where it says file click the plus icon to open up the file browser. Select the butterfly6 file from the directory that opens.

Change the levels of the image you just importededit

• On the right hand side of the node right click the wire out icon and select a Level TOP. Left click to place the level TOP into the network.
• In the level TOP parameters window click the “Pre” tab and set the following values: Black Level: 0.14, Brightness: 1.5.
• The butterfly in the viewer should be much brighter and less saturated than the previous butterfly in the Movie File In TOP.

Set the Resolution of the Vieweredit

• Double click the network below the Movie File In TOP and select a Constant TOP. Under the constant tab in the parameter window set the Alpha value to 0. Under the common tab to the right of the Custom Res parameter there is an arrow. Clicking the arrow brings up the Constant TOPs resolution. Set the resolution to 1280x720.

Compositing the butterfly over the blank vieweredit

• Right click the wire out from the Level TOP you created and place down a Composite TOP.
• Left click the Constants output and then left click the input of the Composite TOP.
• Select the Composite TOP by left clicking the node and then in its parameters under the Composite tab set the Operand parameter to Over. Under the Transform tab set Fixed Layer to Input 2. In the viewer you should now have a butterfly with more checkerboard space around it.

Set the position of the butterfly and add a gradient backgroundedit

• Right click the composite TOPs output and select a Transform TOP.
• Under the Transform TOPs parameters middle clicking the x and y numbers under the Translate parameter you can drag left and right to position the butterfly. You can also enter numbers manually.
• Double click below the Transform TOP and lay down a Ramp TOP. In the Ramp TOPs parameters under the Ramp tab you can set a gradient using the gradient bar. To change the color select the rectangle of the color you wish to change and then under the Hue, Saturation and Value parameters change the colors to a lighter blue and a darker blue.
• Under the common tab change the Ramp TOPs resolution to 1280x720.
• Right click the Transform TOPs output and lay down another Composite TOP.
• Wire the Ramp TOP into the composite TOPs input.
• Set the Composite TOPs operand parameter to Over.

Adding another butterflyedit

• Middle click the Transform TOP and select another Transform TOP from under the TOP tab.
• Select the new Transform TOP and set the Translate parameter to -0.2.
• Set the Scale x and y parameters to 0.3 and 0.3. This will allow the butterflies to be different sizes.
• Left click the output of the new Transform TOP and then left click the input of the second Composite TOP to wire them together.
• In the second Composite TOPs parameters where it says Input OP click the up arrow next to Transform2 to move the Transform TOP above the Ramp.

Viewing the butterflies in Perform Modeedit

• Right click the output of the third Composite TOP (comp3) and select an Out TOP from the TOP tab.
• At the very top left of the screen above the Network Editor there is a ^ icon. Click it to place the project into Perform Mode. To exit Perform Mode press the Esc key.
• The resolution is different from the Out TOPs in Perform Mode due to Perform Mode using the Project1 COMPs width and height. Zoom out of the network until you see Project1 (or you can click the / in the path bar above the Network Editor then click / in the drop down menu)
• Select Project1 and in its parameters under the Layout tab set the width parameter to 1280 and the height parameter to 720
• Click the ^ icon at the top left of the screen above the Network Editor to switch to Perform Mode. You can then press the Escape Key to close Perform Mode.

Extra - Making the butterflies wings flap using a transforms scale parameteredit

• Double click the network and under the CHOP tab whilst holding shift click the following: LFO, Math and Null. You should now have 3 new nodes.
• In the Math CHOPs range parameters set the From Range from -1 to 1 and the To Range from 0.2 to 1.
• Right click the null and select CHOP Export. The CHOP Export Dialog should now appear
• Left click the first Transform TOP (transform1) whilst keeping the chop export dialog open above and to the side, then left click and drag the chan1 text to the value in the Transforms Scale x parameter. A small arrow and a plus icon will appear, let go of the drag and the parameter should turn blue. If all has worked correctly the butterflies will now flap their wings in time to the LFO CHOP.