Category Archives: TOPs

Nov 12 2014

Switch TOP tutorial.

The Switch TOP. TouchDesigner 088. 2014.
The Switch TOP allows you to control image flow in TOP networks.

1
00:00:00,467 –> 00:00:02,733
Let’s examine the switch TOP.

2
00:00:02,733 –> 00:00:13,667
The switch TOP is a simple
operator, but it can help you
understand concepts that are
essential to the Touch Designer
2D workflow.

3
00:00:13,667 –> 00:00:24,200
In this network, the swith TOP
has 3 inputs, and I’m using a
slider to change the index
parameter of the switch TOP.

4
00:00:24,200 –> 00:00:30,100
By default the slider outputs of
floating point range of 0 to 1.

5
00:00:30,100 –> 00:00:35,567
We use a math CHOP to re-range
the values from 0 to 2.

6
00:00:35,567 –> 00:00:46,967
The TOP named “moviein1” is
index 0, “moviein2” is index 1,
“moviein3” is index 2.

7
00:00:46,967 –> 00:00:48,667

8
00:00:48,667 –> 00:00:54,467
We’ll use a Python expression to
reference the re-ranged slider
values.

9
00:00:54,467 –> 00:00:55,800

10
00:00:55,800 –> 00:01:06,800
We click the “viewer active”
button on the null CHOP, then
drag the channel name to the
index parameter of the switch
TOP.

11
00:01:06,800 –> 00:01:10,833
We could also type the Python
expression by hand.

12
00:01:10,833 –> 00:01:14,967
Lets look at the “Blend between
inputs” parameter.

13
00:01:14,967 –> 00:01:21,633
Without blending, the switch TOP
changes between inputs in
discreet steps.

14
00:01:21,633 –> 00:01:31,400
Its important to realize that in
some situations, blending can
increase operational overhead,
and slow down Touch Designer.

15
00:01:31,400 –> 00:01:42,667
I’ll turn blending back on, and
we’ll examine how the switch TOP
deals with discrepancies in
image sizes.

16
00:01:42,667 –> 00:01:49,733
We can middle mouse click on any
operator in Touch Designer to
display an information popup.

17
00:01:49,733 –> 00:02:04,033
The image size of “moviein1” is
800 by 450, “moviein2” is 512 by
512, and “moviein3” is 1600 by
900.

18
00:02:04,033 –> 00:02:08,767
I’ll change to switch TOP back
to its default settings.

19
00:02:08,767 –> 00:02:18,167
Under the common tab, we have
two important parameters, the
output resolution and the output
aspect.

20
00:02:18,167 –> 00:02:19,500

21
00:02:19,500 –> 00:02:31,200
As I switch between inputs, we
see the switch TOP changes its
resolution and aspect to match
the incoming operator.

22
00:02:31,200 –> 00:02:46,867
If I enable blending, we see
that even though there is a
smooth transition between the
input images, the resolution and
aspect of the switch TOP still
jumps in discrete steps.

23
00:02:46,867 –> 00:02:55,167
In cases where all the input
images are the same size, this
is obviously not a problem.

24
00:02:55,167 –> 00:02:56,967

25
00:02:56,967 –> 00:03:04,633
We can override this behavior by
adjusting the output resolution
and aspect parameters.

26
00:03:04,633 –> 00:03:08,333
I’ll change the resolution to a
custom size.

27
00:03:08,333 –> 00:03:14,800
We can choose between some
standard options, or create any
resolution we like.

28
00:03:14,800 –> 00:03:16,033

29
00:03:16,033 –> 00:03:22,100
Now, I change the “Output
Aspect” parameter to
“Resolution”.

30
00:03:22,100 –> 00:03:26,867
This matches the aspect to our
new custom resolution

31
00:03:26,867 –> 00:03:28,700

32
00:03:28,700 –> 00:03:36,067
Now we can switch between inputs
of varying sizes without jumps
in resolution.

33
00:03:36,067 –> 00:03:38,067

Nov 12 2014

Convolve TOP tutorial.

The Convolve TOP. TouchDesigner 088. 2014.
The Convolve TOP can create convolution image processing and effects by using a kernel (or convolution matrix).

1
00:00:00,167 –> 00:00:02,967
Let’s examine the convolve TOP.

2
00:00:02,967 –> 00:00:13,133
A convolution is an image
processing technique in which
the final pixel is the weighted
sum of its neighboring pixels.

3
00:00:13,133 –> 00:00:16,867
This example network has 3
convolve TOPs.

4
00:00:16,867 –> 00:00:26,400
A convolution operation is based
on a matrix which gives some
weight to each one of the
neighboring pixels.

5
00:00:26,400 –> 00:00:36,000
The convolve TOP must use a
table DAT as its coefficient
table, also known as the
convolution kernel.

6
00:00:36,000 –> 00:00:42,633
I’ve wired several common
convolution effects into a
switch DAT.

7
00:00:42,633 –> 00:00:54,267
We can use an over TOP to create
a side-by-side before and after
comparison to visualize the
convolve TOP effect.

8
00:00:54,267 –> 00:00:55,500

9
00:00:55,500 –> 00:01:04,533
As I change the index value of
the switch DAT, we’ll see effect
of the different convolutions.

10
00:01:04,533 –> 00:01:10,867

11
00:01:10,867 –> 00:01:16,333
In this example, we’ll create a
“Sobel” edge detection.

12
00:01:16,333 –> 00:01:24,667
The network begins with a select
TOP, which creates an instance
of the originating movie in TOP.

13
00:01:24,667 –> 00:01:27,200

14
00:01:27,200 –> 00:01:35,933
We run two passes, first a
vertical edge detection, then a
horizontal.

15
00:01:35,933 –> 00:01:40,800
We use a composite TOP to
combine the results.

16
00:01:40,800 –> 00:01:42,800

Nov 12 2014

Constant TOP tutorial.

The Constant TOP. TouchDesigner 088. 2014.
The Constant TOP is a fundamental Texture Operator.

1
00:00:00,400 –> 00:00:02,533
Let’s look at the constant TOP.

2
00:00:02,533 –> 00:00:06,933
The constant top creates a solid
color texture.

3
00:00:06,933 –> 00:00:09,767
I’ll add a new constant TOP.

4
00:00:09,767 –> 00:00:16,667
I press the “C” key to show only
the texture operators that begin
with the letter “C”.

5
00:00:16,667 –> 00:00:21,133
We can click the color parameter
to launch the color swatch
pop-up.

6
00:00:21,133 –> 00:00:22,233

7
00:00:22,233 –> 00:00:27,100
I can move the alpha slider to
adjust the density of the alpha
channel.

8
00:00:27,100 –> 00:00:27,933

9
00:00:27,933 –> 00:00:36,167
Under the Common tab, we can
choose from some standard
rendering resolutions.

10
00:00:36,167 –> 00:00:38,700

11
00:00:38,700 –> 00:00:48,700
In this example, I use a beat
CHOP to adjust the alpha channel
parameter of the constant TOP.

12
00:00:48,700 –> 00:00:50,667

13
00:00:50,667 –> 00:00:55,767
I’ll click the “viewer active”
button on the bottom right of
the operator.

14
00:00:55,767 –> 00:00:59,267
We’ll take a look at the beat
CHOP parameters.

15
00:00:59,267 –> 00:01:00,867

16
00:01:00,867 –> 00:01:08,833
We can adjust the period
parameter to increase or
decrease the beat timing.

17
00:01:08,833 –> 00:01:10,133

18
00:01:10,133 –> 00:01:17,000
Here we have a Python expression
written in the alpha parameter
of the constant TOP.

19
00:01:17,000 –> 00:01:18,267

20
00:01:18,267 –> 00:01:29,900
This expression references the 0
to 1 value created by the beat
CHOP, and applies it to the
alpha channel of the constant
TOP.

21
00:01:29,900 –> 00:01:35,400
Here is a simple technique we
can use in Touch Designer to
create expressions.

22
00:01:35,400 –> 00:01:36,500

23
00:01:36,500 –> 00:01:45,900
We click the “viewer active” tab
of the operator, and drag the
channel name to the parameter
field.

24
00:01:45,900 –> 00:01:46,367

25
00:01:46,367 –> 00:01:53,300
We can quickly create a
reference to that channel with
an editable Python expression.

26
00:01:53,300 –> 00:01:55,433

27
00:01:55,433 –> 00:02:05,600
In this example we use the noise
CHOP to create a random RGB
color value for the constant
TOP.

28
00:02:05,600 –> 00:02:08,100
We have 3 noise CHOPs.

29
00:02:08,100 –> 00:02:19,233
The first is set to generate
animating noise of a value range
of -1 to 1 in a channel named
“r”.

30
00:02:19,233 –> 00:02:28,867
The “me.time.frame” Python
expression references the number
of the current cooking frame for
that operator.

31
00:02:28,867 –> 00:02:36,033
Since that value is always
updating, we can use it to
create a simple animation
engine.

32
00:02:36,033 –> 00:02:40,700
We name channel created by this
noise CHOP “r”.

33
00:02:40,700 –> 00:02:45,067
The second noise CHOP differs in
only two settings.

34
00:02:45,067 –> 00:02:56,167
First, the seed parameter, which
is the basis for the noise
generation, and second, the
channel name, which is “g”.

35
00:02:56,167 –> 00:03:08,800
We can change the channel name
to anything we want, but since
we are referencing this channel
by name in the constant TOP,
we’ll leave the channel named
“g”.

36
00:03:08,800 –> 00:03:09,933

37
00:03:09,933 –> 00:03:19,267
The third noise CHOP, with a
channel name “b” for blue, also
has a discrete noise parameter
setting.

38
00:03:19,267 –> 00:03:21,467

39
00:03:21,467 –> 00:03:33,967
We wire all 3 noise CHOPs to a
math CHOP, and re-range our
incoming values to a range of 0
to 1.

40
00:03:33,967 –> 00:03:43,633
Now, using Python expressions,
we reference the 3 different
values created by the noise
CHOPs by channel name.

41
00:03:43,633 –> 00:03:52,167
We then assign them to the
“colorr”, “colorg”, and “colorb”
parameters of the constant TOP.

42
00:03:52,167 –> 00:03:54,167

Nov 12 2014

Circle TOP tutorial.

The Circle TOP. TouchDesigner 088. 2014.
The Circle TOP generates 2D circles and ellipses. It’s a very flexible Texture Operator.

1
00:00:02,500 –> 00:00:07,700
Here is an example of the circle
TOP.

2
00:00:07,700 –> 00:00:12,767
The circle TOP parameters.

3
00:00:12,767 –> 00:00:19,867
We can adjust by typing in
values.

4
00:00:19,867 –> 00:00:25,267
Here we are adjusting the x
radius value.

5
00:00:25,267 –> 00:00:30,967

6
00:00:30,967 –> 00:00:40,267
We are dynamically changing the
X and Y arc angle parameters.

7
00:00:40,267 –> 00:00:46,633

8
00:00:46,633 –> 00:00:54,467
Using a beat CHOP as the
animation engine,

9
00:00:54,467 –> 00:00:58,533
we create a sine wave.

10
00:00:58,533 –> 00:01:03,967
The range of the sine wave is -1
to 1

11
00:01:03,967 –> 00:01:08,600
and the period, as you can see,
is adjustable.

12
00:01:08,600 –> 00:01:10,967

13
00:01:10,967 –> 00:01:21,333
The output of the beat CHOP is
wired into a math CHOP.

14
00:01:21,333 –> 00:01:33,467
Re-ranging the -1 to 1 input
range to a 0 to 30 output range.

15
00:01:33,467 –> 00:01:46,133
In a second math CHOP we
re-range the output from 0 to
-30.

16
00:01:46,133 –> 00:01:50,533
Now using a python expression,

17
00:01:50,533 –> 00:02:04,100
we pull the value of the math
CHOP and apply it to the arc
angle parameter for the circle.

18
00:02:04,100 –> 00:02:09,600
Here we use a simple Python
expression

19
00:02:09,600 –> 00:02:17,067
to grab the values from the math
CHOP channels.

20
00:02:17,067 –> 00:02:22,300

21
00:02:22,300 –> 00:02:31,800
In this example we can explore
more of the circle TOP
parameters.

22
00:02:31,800 –> 00:02:42,367
By clicking any color parameter
we’ll pull up a pop-up color
swatch selection menu.

23
00:02:42,367 –> 00:02:49,067
We’ve activated the polygonal
drawing mode for this circle
TOP.

24
00:02:49,067 –> 00:02:57,733
As you can see we are
dynamically changing the number
of sides

25
00:02:57,733 –> 00:03:03,900
and dynamically updating the
circles’ rotation.

26
00:03:03,900 –> 00:03:09,500
We start with a wave CHOP and
animate the phase

27
00:03:09,500 –> 00:03:18,167
using a python expression that
references the operators’ time
in seconds.

28
00:03:18,167 –> 00:03:27,767
This creates an animated wave
which we then wire to a limit
CHOP.

29
00:03:27,767 –> 00:03:33,667
We use the limit CHOP to
quantize the incoming values,

30
00:03:33,667 –> 00:03:42,967
effectively notching the smooth
incoming sine wave into a series
of discrete values.

31
00:03:42,967 –> 00:03:44,933

32
00:03:44,933 –> 00:03:54,100
Again we use a python expression
to reference the quantized
values

33
00:03:54,100 –> 00:03:59,767
and apply them to the circle
SOPs number of polygonal sides.

34
00:03:59,767 –> 00:04:02,567

35
00:04:02,567 –> 00:04:11,733
We use a noise CHOP, shown here
with some very basic parameters.

36
00:04:11,733 –> 00:04:20,733
We use a simple Python
expression to create animation
by referencing this operators’
frame count.

37
00:04:20,733 –> 00:04:26,900
We’ve created a simple dynamic
random number generator.

38
00:04:26,900 –> 00:04:29,500

39
00:04:29,500 –> 00:04:40,633
Now we will take the output
generated by the noise CHOP and
apply it to the circle SOPs’
rotation parameter,

40
00:04:40,633 –> 00:04:45,633
again by using a simple Python
expression.

41
00:04:45,633 –> 00:04:47,633