Tag Archives: TOP

Nov 12 2014

MULTI-IN TOPs tutorial.

The MULTI-IN TOPs. TouchDesigner 088. 2014.
This tutorial covers the main multi-in TOPs in TouchDesigner. These Operators allow you to combine 2D images in powerful yet standard methods. This is a special tutorial covering 12 TOPs.

1
00:00:00,233 –> 00:00:06,033
In this tutorial, we will
examine 12 multi in TOPs.

2
00:00:06,033 –> 00:00:19,667
These TOPs are commonly used to
combine, or blend, texture
operators together using a
variety of techniques and pixel
weighting calculations.

3
00:00:19,667 –> 00:00:22,467
Let’s look at the add TOP.

4
00:00:22,467 –> 00:00:35,833
We have 2 constant TOPs, 1 with
a resolution of 256 x 256, and
the 2nd with a resolution of 512
x 512.

5
00:00:35,833 –> 00:00:46,433
The add TOP, as with all of the
TOPs we’ll examine here, must
know which of the inputs to
consider as the fixed layer.

6
00:00:46,433 –> 00:00:55,700
If we set the “Fixed Layer” to
layer 2, the add TOP will be set
to the resolution of layer 2.

7
00:00:55,700 –> 00:01:08,633
With a “Pre-Fit Overlay” setting
of “Native Resolution”, the
non-fixed layer will be added to
the other layer at its native
resolution.

8
00:01:08,633 –> 00:01:14,467
It will not be stretched to fill
the fixed layer’s resolution.

9
00:01:14,467 –> 00:01:24,833
The “Extend Overlay” parameter
tells the add TOP if and how to
fill the unused space.

10
00:01:24,833 –> 00:01:36,233
By pressing the “Viewer Active”
tab, and right clicking on any
TOP, we can access the “Display
Pixel Values” option.

11
00:01:36,233 –> 00:01:50,433
When using TOPs like the add TOP
to combine images, sometimes we
need to examine exact pixel
values, in order to fine tune
our settings.

12
00:01:50,433 –> 00:02:03,867
We can see the result of the add
operation, so if we need to, we
can go back to our source inputs
and adjust them to create
desired output.

13
00:02:03,867 –> 00:02:07,800
Next we’ll examine the composite
TOP.

14
00:02:07,800 –> 00:02:18,400
The composite TOP can accept an
arbitrary amount of inputs, and
you can choose from 16 different
composite operation types.

15
00:02:18,400 –> 00:02:26,933
We are compositing 2 different
colorful ramp TOPs, using the
“Divide” operand.

16
00:02:26,933 –> 00:02:31,600
Let’s look at the effects of
some transformation settings.

17
00:02:31,600 –> 00:02:40,867
Remember, we always have 1 fixed
layer; the rest of the layers
are considered overlay layers.

18
00:02:40,867 –> 00:02:57,000
When I turn the “Extend Overlay”
to “Zero”, the composite TOP
draws an RGBA value of 0 in the
extra space created by
offsetting the overlay layer’s
transform.

19
00:02:57,000 –> 00:03:05,700
We must tell the composite TOP
what to do with the extra space
created by the offset.

20
00:03:05,700 –> 00:03:17,100
An extend condition of “Hold”
will repeat the first or last
rows or columns of pixels in the
overlay.

21
00:03:17,100 –> 00:03:31,400
As with other operators in Touch
Designer, we have the ability to
tile or loop out-of-range values
with a number of different
options.

22
00:03:31,400 –> 00:03:42,300
By experimenting with these
settings you can greatly extend
the basic functions of these
multi in TOPs.

23
00:03:42,300 –> 00:03:46,200
Here’s another example of the
composite TOP.

24
00:03:46,200 –> 00:03:55,133
This time we have 4 inputs;
there are 4 rectangle TOPs with
various color and shape
settings.

25
00:03:55,133 –> 00:04:01,167
I’m using the “Add” operand to
composite the images together.

26
00:04:01,167 –> 00:04:13,167
I have input 1 set as the fixed
layer, and when I adjust
transformation parameters, this
will affect all the other
inputs.

27
00:04:13,167 –> 00:04:28,233
Since the composite TOP can
accept any number of inputs, it
treats the 1st input as layer 1,
and the entire grouping of the
rest of the inputs as layer 2.

28
00:04:28,233 –> 00:04:37,867
When I change the fixed layer to
input 2, you’ll see that
transformations only affect the
1st input.

29
00:04:37,867 –> 00:04:50,400
There is a way to manipulate the
transforms of the individual
inputs in the 2nd layer; by
using the “Transform Step”
parameter.

30
00:04:50,400 –> 00:05:03,167
This value is an offset, and it
wont allow you to affect each
input individually with specific
transformation settings.

31
00:05:03,167 –> 00:05:11,433
Let’s take a look at how the
pivot point location will affect
rotation and scale
transformations.

32
00:05:11,433 –> 00:05:21,800
The UV space of the texture
operator is 0 to 1, left to
right, and bottom to top.

33
00:05:21,800 –> 00:05:29,133
So a pivot value of .5 equates
to the center of the UV space.

34
00:05:29,133 –> 00:05:44,467
When I change the pivot
location, the transformations
are offset from this new
location, affecting the entire
layer, which, in this case, is a
group of 3 inputs.

35
00:05:44,467 –> 00:05:56,767
By exploring the parameters in
the transform tab, you can
create complex designs and
animations from simple texture
inputs.

36
00:05:56,767 –> 00:06:00,700
Next, we’ll look at the cross
TOP.

37
00:06:00,700 –> 00:06:07,400
The cross TOP creates an evenly
weighted blend between the 2
inputs.

38
00:06:07,400 –> 00:06:18,167
You can selectively transform
the overlay input; the cross TOP
can be used to create specific
texture blend values.

39
00:06:18,167 –> 00:06:23,067
Next, let examine the difference
TOP.

40
00:06:23,067 –> 00:06:32,433
Difference blending will
subtract the pixel value in the
1st input, from the pixel value
in the 2nd input.

41
00:06:32,433 –> 00:06:38,867
This network has 2 inputs of the
same size and pixel format.

42
00:06:38,867 –> 00:06:49,133
Under the “Common” tab, we have
options for determining which
pixel values are included in the
difference calculation.

43
00:06:49,133 –> 00:06:53,367
This is the “Channel Mask”
parameter.

44
00:06:53,367 –> 00:07:01,333
When I click the “Alpha” button,
I eliminate the alpha channel
from the difference calculation.

45
00:07:01,333 –> 00:07:06,800
We’ll explore channel masking in
greater detail very soon.

46
00:07:06,800 –> 00:07:09,767
Let’s look at the inside TOP.

47
00:07:09,767 –> 00:07:20,667
The inside TOP uses the alpha
channel of input 2 to determine
what parts of input 1 will be
drawn.

48
00:07:20,667 –> 00:07:28,867
We have inputs of 2 different
resolutions, but they have
matching aspect ratios.

49
00:07:28,867 –> 00:07:43,133
When using multi in TOPs like
the inside TOP, it’s always
important to know how resolution
and aspect will affect the
alignment of the blended image.

50
00:07:43,133 –> 00:07:53,867
I’m changing the scale
transform, and you can see how
to changing which layer is fixed
will affect the blended image.

51
00:07:53,867 –> 00:08:03,767
The “Transform” tab in the
parameters panels will give you
the flexibility you need to make
fine tuned adjustments.

52
00:08:03,767 –> 00:08:16,333
You can use channel masking to
affect the final output, but you
can also use it to troubleshoot
or adjust your image
combinations.

53
00:08:16,333 –> 00:08:26,033
It can sometimes be difficult to
see the effect on all pixels, or
to determine where is specific
problem might be.

54
00:08:26,033 –> 00:08:32,000
Channel masking can help you
isolate compositing issues and
fix them.

55
00:08:32,000 –> 00:08:35,767
Now let’s examine the matte TOP.

56
00:08:35,767 –> 00:08:46,300
The matte TOP uses a 3rd input
to determine what parts of the
first 2 inputs can be seen.

57
00:08:46,300 –> 00:08:50,433
I’m using a noise TOP as the 3rd
input.

58
00:08:50,433 –> 00:09:02,033
I need to use the alpha channel
to create the matte, so I must
set the “Alpha” channel output
parameter to “Noise”.

59
00:09:02,033 –> 00:09:08,467
The matte TOP can use a variety
of the 3rd input’s channels as a
matte.

60
00:09:08,467 –> 00:09:15,867
Here, the noise TOP has no alpha
output, so I could use it’s
luminance instead.

61
00:09:15,867 –> 00:09:26,667
The matte TOP has a “Switch
Inputs” parameter; this allows
you to blend the first 2 inputs,
or to switch them completely.

62
00:09:26,667 –> 00:09:35,767
Switch values of 0 or 1 have the
same effect as re-wiring the
inputs.

63
00:09:35,767 –> 00:09:40,200
Next, we’ll examine the multiply
TOP.

64
00:09:40,200 –> 00:09:46,600
The multiply TOP multiplies the
2 input’s pixel values.

65
00:09:46,600 –> 00:09:53,933
We are using a rectangle TOP for
input 1, and a constant TOP for
input 2.

66
00:09:53,933 –> 00:10:02,667
I can adjust the rectangle TOP’s
“Background Alpha” value to
isolate features of this texture
operator.

67
00:10:02,667 –> 00:10:17,467
I can use the “Display Pixel
Values” option to accurately
gauge exact input settings, in
order to achieve an exact
multiplication settings.

68
00:10:17,467 –> 00:10:29,133
I’m satisfied with my
transformation, alignment, and
channel masking settings, so
I’ll focus on color and
luminance pixel adjustments.

69
00:10:29,133 –> 00:10:42,400
I’ll use the color picker to
adjust my incoming pixel values,
in order to create the exact
pixel values I need from the
multiplication blend.

70
00:10:42,400 –> 00:10:59,033
Most operations won’t require
this level of fine tuning, but
it’s very important to know that
you can access exact per pixel
values to fine tune your texture
networks.

71
00:10:59,033 –> 00:11:02,800
Now let’s look at the outside
TOP.

72
00:11:02,800 –> 00:11:11,633
In this example, I have 2 inputs
whose resolutions are close, but
not matched.

73
00:11:11,633 –> 00:11:20,033
There are several approaches I
can take, if I need to match the
2 resolutions.

74
00:11:20,033 –> 00:11:30,933
I can choose to make one of the
2 inputs the fixed layer, which
will determine the outside TOP’s
resolution.

75
00:11:30,933 –> 00:11:40,667
I can also choose if and how the
overlay layer will be scaled to
match the fixed layer.

76
00:11:40,667 –> 00:11:50,200
I can also use use channel
masking to see the areas the 2nd
input is removing from the 1st.

77
00:11:50,200 –> 00:11:57,900
These techniques combine to give
you many options for image
alignment.

78
00:11:57,900 –> 00:12:12,667
In many cases, a network such as
this is only part of a longer
chain, so it’s very important to
keep track of how you are
determining a master alignment
and resolution.

79
00:12:12,667 –> 00:12:15,933
Let’s take a look at the over
TOP.

80
00:12:15,933 –> 00:12:27,467
This is a very commonly used
TOP; you can use it to cascade a
series of TOPs, one after
another, each on TOP of the
last.

81
00:12:27,467 –> 00:12:33,967
I’ll set the 1st input as the
overlay, and set it to “Native
Resolution”.

82
00:12:33,967 –> 00:12:42,400
In this example, I want to use
the rectangle TOP as a button,
or user interface element.

83
00:12:42,400 –> 00:12:48,233
I need to scale and place it
precisely on the background.

84
00:12:48,233 –> 00:12:52,467
I can type in new values in the
parameter panel.

85
00:12:52,467 –> 00:13:00,100
When I middle mouse click on any
parameter in Touch Designer, the
value ladder will pop up.

86
00:13:00,100 –> 00:13:08,567
I can then drag left or right to
raise or lower the value.

87
00:13:08,567 –> 00:13:11,700
Now let’s examine the screen
TOP.

88
00:13:11,700 –> 00:13:19,900
I set up this network to
showcase the actual mathematical
formula being used by the screen
TOP.

89
00:13:19,900 –> 00:13:28,900
You can find information about
the blending algorithms used in
Touch Designer on the wiki, or
elsewhere on the Internet.

90
00:13:28,900 –> 00:13:33,800
It’s extremely helpful to
understand how these TOPs work.

91
00:13:33,800 –> 00:13:43,133
Advanced users can create their
own pixel operations, if the
available operators are not
flexible enough.

92
00:13:43,133 –> 00:13:52,533
Here, I started with a ramp TOP,
then scaled it down and rotated
it 180 degrees.

93
00:13:52,533 –> 00:14:06,700
You may expect a screen
operation to create a perfect
50% grey bar, but by examining
the math behind the screen
function, you’ll see that’s not
the case.

94
00:14:06,700 –> 00:14:20,867
At the midpoint of the
overlapped ramps, where both
inputs have a 50% grey value,
the screen function creates a
grey value of 75%.

95
00:14:20,867 –> 00:14:28,967
I’ve included a short Python
snippet that will help you
understand the math behind the
screen TOP.

96
00:14:28,967 –> 00:14:37,933
“a” is the pixel value of input
1, “b” is the pixel value of
input 2.

97
00:14:37,933 –> 00:14:44,867
This next sample is similar, but
the 2nd input is an un-rotated
ramp.

98
00:14:44,867 –> 00:14:57,933
In order to understand the math
behind TOP operations, its very
beneficial to set up
experimental networks and study
their results.

99
00:14:57,933 –> 00:15:01,100
Let’s look at the subtract TOP.

100
00:15:01,100 –> 00:15:09,367
The subtract TOP subtracts the
pixel value of input 2 from the
pixel value of input 1.

101
00:15:09,367 –> 00:15:17,333
Even very simple blending TOPs
like the subtract TOP can
sometimes give confusing
results.

102
00:15:17,333 –> 00:15:31,933
For example, if I include the
alpha channel in this operation,
I’ll see the result of the alpha
subtraction, even though I don’t
necessarily see the alpha
channels in the inputs.

103
00:15:31,933 –> 00:15:46,800
As I noted before, in most
cases, a simple network like
this is only part of a much
longer chain, and spotting
issues early can help you
troubleshoot later.

104
00:15:46,800 –> 00:15:50,033
Let’s examine the under TOP.

105
00:15:50,033 –> 00:16:01,867
I’ve built this network to show
you another method of achieving
the desired image and resolution
alignment in TOP networks.

106
00:16:01,867 –> 00:16:10,567
We use an info CHOP to expose
the resolution of the fixed
layer, which is input 1.

107
00:16:10,567 –> 00:16:18,500
The info CHOP gives you access
to a large amount of information
about operators in general.

108
00:16:18,500 –> 00:16:29,800
Here, I am interested in only
the movie in TOP’s resolution,
so I can set the scope to
monitor only those channels.

109
00:16:29,800 –> 00:16:38,833
I use a simple Python snippet to
reference the movie in TOP’s
resolution, thereby linking the
two.

110
00:16:38,833 –> 00:16:49,100
Now the “Pre-Fit Overlay”
settings on the under TOP have
no visible effect; the two
inputs are already matched.

111
00:16:49,100 –> 00:16:51,100
I hope you will will experiment
with these setups, and begin to
understand and build more
complex TOP networks.

Nov 12 2014

Ramp TOP tutorial.

The Ramp TOP. TouchDesigner 088. 2014.
The Ramp TOP is one of the most widely used Texture Operators.

1
00:00:00,900 –> 00:00:03,267
Let’s examine the ramp TOP.

2
00:00:03,267 –> 00:00:09,333
I’ve set up 5 example networks,
and let’s take a look at the
first one.

3
00:00:09,333 –> 00:00:18,667
The ramp TOP is a powerful
operator that creates gradients,
or ramps, of four distinct types
or styles.

4
00:00:18,667 –> 00:00:22,633
Here’s a ramp TOP with default
settings.

5
00:00:22,633 –> 00:00:28,800
The ramp is comprised of an
arbitrary series of tabs, or
notches.

6
00:00:28,800 –> 00:00:35,433
Each tab has a position and an
RGBA value.

7
00:00:35,433 –> 00:00:41,267
By left clicking in the value
field, I can add new tabs.

8
00:00:41,267 –> 00:00:48,933
Then I adjust the hue,
saturation, and value sliders to
create the colors I desire.

9
00:00:48,933 –> 00:00:58,033
The four types of gradient
shapes are vertical, horizontal,
radial, and circular.

10
00:00:58,033 –> 00:01:05,767
Now let’s examine another ramp
TOP parameter, the “Interpolate
Notches” setting.

11
00:01:05,767 –> 00:01:15,633
Our first example used a linear
interpolation method, which
creates a smooth blend across
the ramp tabs, or keys.

12
00:01:15,633 –> 00:01:25,200
In this example, we use the step
method, which creates discrete
hard-edged steps from value to
value.

13
00:01:25,200 –> 00:01:34,367
The ramp TOP uses a specially
formatted table DAT to supply
it’s ramp key settings.

14
00:01:34,367 –> 00:01:43,833
By changing values in the cells,
we can directly manipulate the
ramp TOP without using the
parameters panel.

15
00:01:43,833 –> 00:01:55,933
I’ll adjust the positional steps
between my 4 key entries to
specific positions, creating
exactly 4 subdivisions of 25%
each.

16
00:01:55,933 –> 00:01:58,433

17
00:01:58,433 –> 00:02:04,333
Next, I’ll adjust the RGBA
values to very specific numbers.

18
00:02:04,333 –> 00:02:10,067
This method allows us to create
extremely accurate color fields.

19
00:02:10,067 –> 00:02:14,233

20
00:02:14,233 –> 00:02:22,033
This network is designed to help
us visualize the “Extend”
parameters of the ramp TOP.

21
00:02:22,033 –> 00:02:27,900
We’re using a slider to animate
the “Phase” parameter of the
ramp TOP.

22
00:02:27,900 –> 00:02:35,367
As I move the slider from left
to right, watch the colour field
in the parameters panel.

23
00:02:35,367 –> 00:02:42,600
You’ll see we are offsetting the
reference points that are the
beginning and end of the ramp.

24
00:02:42,600 –> 00:02:54,367
The gradient created by the ramp
TOP has a beginning and an end,
but we can move the ramp in 2D
space past its natural edges.

25
00:02:54,367 –> 00:03:01,733
Therefore, we need to decide how
we should fill the extra space
in the 2D rendering.

26
00:03:01,733 –> 00:03:05,400
This is the function of the
“Extend” parameter.

27
00:03:05,400 –> 00:03:08,367
I’ll set the extend to “Hold”.

28
00:03:08,367 –> 00:03:14,267
This condition will cause the
ramp TOP to repeat the first and
last values forever.

29
00:03:14,267 –> 00:03:26,967
When I set the extend to “Zero”,
the ramp TOP renders any value
out of the initial ramp value
range as a zero RGBA value.

30
00:03:26,967 –> 00:03:31,600
The other two extend options are
“Mirror” and “Repeat”,

31
00:03:31,600 –> 00:03:43,100
and depending on your
application, using and mastering
the extend parameters can help
you create amazing effects with
the ramp TOP.

32
00:03:43,100 –> 00:03:44,200

33
00:03:44,200 –> 00:03:51,433
This example Illustrates a
simple way to visualize time
with a clock style graphic.

34
00:03:51,433 –> 00:04:04,067
The network uses a clock CHOP to
generate an increasing value
each millisecond, and ends with
a ramp TOP of radial type.

35
00:04:04,067 –> 00:04:11,700
The “Interpolate Notches”
parameter is set to step, and
we use 3 key values.

36
00:04:11,700 –> 00:04:20,900
The position of the middle key
value moves from 1 to 0 over the
course of each second.

37
00:04:20,900 –> 00:04:33,533
I’ve set the “Phase” parameter
to .25, because the ramp TOP
defaults to placing the start of
the radial ramp at the 3 o’clock
position.

38
00:04:33,533 –> 00:04:43,733
The clock CHOP generates the
milliseconds, then we use a math
CHOP to re-range, or normalize
the values.

39
00:04:43,733 –> 00:04:48,467
Next, we use a chop execute DAT.

40
00:04:48,467 –> 00:04:57,567
This is a DAT operator whose
contents can be set to run when
the state of a specified CHOP
changes.

41
00:04:57,567 –> 00:05:02,800
In this case, a single line
Python snippet will run.

42
00:05:02,800 –> 00:05:08,667
I’ve commented the Python script
to show exactly how the code
works.

43
00:05:08,667 –> 00:05:20,600
We extract the normalized value
from the math CHOP, and place it
in the appropriate cell of the
ramp’s table DAT.

44
00:05:20,600 –> 00:05:29,233
As with many techniques in Touch
Designer, there are several
possible ways to achieve the
same results.

45
00:05:29,233 –> 00:05:31,800

46
00:05:31,800 –> 00:05:44,867
In this example, we will create
a rudimentary audio visualizer
using a similar technique as our
last example.

47
00:05:44,867 –> 00:05:46,867
We start with an audio file in
CHOP, then we normalize the
value range with a math CHOP,
and then apply the value to the
middle key of a 3 step ramp TOP.

Posted In
Tagged
Nov 12 2014

Lookup TOP tutorial.

The Lookup TOP. TouchDesigner 088. 2014.
The Lookup TOP is a versatile Texture Operator. This tutorial shows a few examples of how this Operator can help you tweak and analyze 2D images.

1
00:00:00,567 –> 00:00:04,833
Let’s take a look at the lookup
TOP.

2
00:00:04,833 –> 00:00:10,900
Here’s an example project with 3
networks that feature the lookup
TOP.

3
00:00:10,900 –> 00:00:20,567
The lookup TOP is not a very
intuitive operator, but it can
create some amazing and very
useful effects.

4
00:00:20,567 –> 00:00:28,800
The lookup TOP replaces color
values in the first input, with
colors from the second input.

5
00:00:28,800 –> 00:00:39,233
This network is designed to help
you visualize the way the lookup
TOP parameters define those
replacement values.

6
00:00:39,233 –> 00:00:44,767
We start with dark UV and light
UV parameters.

7
00:00:44,767 –> 00:00:51,333
These values represent a UV
position on the second input
TOP.

8
00:00:51,333 –> 00:01:04,567
The component named “VISUALIZER”
contains a simple TOP network
that uses the dark and light UV
values to render some visual
aids.

9
00:01:04,567 –> 00:01:13,133
The white circle represents the
light UV position, and the black
circle represents the dark UV
position.

10
00:01:13,133 –> 00:01:22,200
The grey line between represents
the color range the lookup TOP
will sample from.

11
00:01:22,200 –> 00:01:36,467
As I adjust the dark and light
UV values, you’ll see the
circles update their positions,
and you’ll see the effect of the
lookup TOP change as well.

12
00:01:36,467 –> 00:01:48,533
As I move the dark and light
range into a red solid field,
you’ll see the lookup TOP has
replaced all incoming pixels
with red.

13
00:01:48,533 –> 00:01:51,000

14
00:01:51,000 –> 00:01:57,433
We can use a CHOP instead of a
TOP as our second input.

15
00:01:57,433 –> 00:02:05,600
This technique can be a little
harder to visualize, so I set up
a straightforward example.

16
00:02:05,600 –> 00:02:09,533
We start with a ramp, from black
to white.

17
00:02:09,533 –> 00:02:17,467
I merge 3 wave CHOPS in to a
single CHOP with 3 channels-
“r”, “g”, and “b”.

18
00:02:17,467 –> 00:02:29,900
The initial CHOP values are a
ramp from 1 to 0, which replaces
the original black to white ramp
with a white to black ramp.

19
00:02:29,900 –> 00:02:37,200
Now, I’ll adjust some parameters
of the wave CHOPs. I’ll bring
the red value up.

20
00:02:37,200 –> 00:02:47,100
The red channel no longer ends
on 0, so we are boosting the
amount of red at the end of the
range of values.

21
00:02:47,100 –> 00:02:50,333
I’ll do the same with the green
and blue.

22
00:02:50,333 –> 00:03:01,600
Now, by adding more cycles of
light to dark and back again,
I’m starting to create
overlapping color bands.

23
00:03:01,600 –> 00:03:03,167

24
00:03:03,167 –> 00:03:11,400
The sample range of the CHOP is
normalized to the UV space of
the input TOP.

25
00:03:11,400 –> 00:03:17,567
A good way to visualize the
effect is to follow the vertical
lines in the CHOP.

26
00:03:17,567 –> 00:03:30,800
The point where the R, G, & B
channels intersect that vertical
line, will create a discrete RGB
value for that vertical line in
the lookup TOP.

27
00:03:30,800 –> 00:03:31,800

28
00:03:31,800 –> 00:03:45,133
This example shows a very
powerful method you can use to
extract specific depth ranges
from rendered images, or sensor
inputs like the Kinect.

29
00:03:45,133 –> 00:03:51,767
I’ve created a simple scene in
the container named
“DEPTH_VISUALIZER”.

30
00:03:51,767 –> 00:03:58,733
We start with a geometry
component which is comprised of
a deformed grid.

31
00:03:58,733 –> 00:04:07,133
Remember, you can press the “H”
key to re-center all your
geometry in the viewport.

32
00:04:07,133 –> 00:04:17,567
We have a camera that is wired
to a slider in the network above
this, and we render the geometry
using a render TOP.

33
00:04:17,567 –> 00:04:30,733
We use a depth TOP to show us a
grayscale image of the render
TOP, where white represents far
geometry and black represents
close geometry.

34
00:04:30,733 –> 00:04:35,633
This is how the depth input from
the Kinect is also rendered.

35
00:04:35,633 –> 00:04:39,200
I press the “U” key to go up a
level.

36
00:04:39,200 –> 00:04:42,267
This slider drives the camera
position.

37
00:04:42,267 –> 00:04:58,033
As in the first example, we’ll
use a TOP as our second input,
but this time we’ll sample the
entire left to right UV range,
and fine tune the color band on
the ramp itself.

38
00:04:58,033 –> 00:05:09,967
We want to colorize a range of
near 3D values, a range of
middle 3D values, and a range of
far 3D values.

39
00:05:09,967 –> 00:05:21,767
We can adjust the tab positions
on the ramp TOP, to expand or
contract the range of the
corresponding color field.

40
00:05:21,767 –> 00:05:31,867
In this set up- the green zone
represents near, cyan is middle,
and red is far.

41
00:05:31,867 –> 00:05:42,933
If I contract the red zone, we
move the beginning of the 3D end
range farther away from the
camera.

42
00:05:42,933 –> 00:05:55,767
Using this method, it is
possible to isolate and modify
specific ranges of rendered 3D
values by using only 2D
operators.

43
00:05:55,767 –> 00:05:57,767

Posted In
Tagged
Nov 12 2014

Feedback TOP tutorial.

The Feedback TOP. TouchDesigner 088. 2014.
The Feedback TOP can produce amazing 2D trails, blooms, and other time-based visual efefcts. For beginners, it can be extremely difficult to understand. This tutorial is designed to help you grasp the specific TOP network requirements to get a feedback loop working.

1
00:00:00,200 –> 00:00:02,867
Let’s examine the feedback TOP.

2
00:00:02,867 –> 00:00:11,533
In its simplest form, the
feedback TOP loop consists of 3
operators.

3
00:00:11,533 –> 00:00:14,867
First, we begin with an image to
operate on.

4
00:00:14,867 –> 00:00:22,267
In order to see the effect of
the feedback loop, we need some
sort of animation here.

5
00:00:22,267 –> 00:00:25,367
Next, we need a feedback TOP.

6
00:00:25,367 –> 00:00:36,033
The feedback TOP needs to send
it’s output to an operator that
can combine itself, and the
original image.

7
00:00:36,033 –> 00:00:44,233
The feedback TOP must then
reference that final operator,
which will close the feedback
loop.

8
00:00:44,233 –> 00:00:50,600
In order to see the effect of
the feedback loop, we must
animate the original TOP.

9
00:00:50,600 –> 00:00:57,267
We start with a circle TOP, and
control it’s center position
with a 2D slider.

10
00:00:57,267 –> 00:01:04,400
We normalize the initial slider
values to a range of -.5 to .5.

11
00:01:04,400 –> 00:01:07,400
This becomes the circle’s UV
offset.

12
00:01:07,400 –> 00:01:08,433

13
00:01:08,433 –> 00:01:11,733
Now, I’ll move the 2D slider.

14
00:01:11,733 –> 00:01:17,633
As you can see, the effect of
the feedback loop is very
apparent.

15
00:01:17,633 –> 00:01:25,233
We can use the reset button on
the feedback TOP parameter panel
to clear the effect.

16
00:01:25,233 –> 00:01:27,800

17
00:01:27,800 –> 00:01:32,700
This network illustrates a more
comprehensive feedback loop.

18
00:01:32,700 –> 00:01:43,033
It’s basically a duplicate of
first network, with additional
downstream TOP operations being
performed on the feedback TOP.

19
00:01:43,033 –> 00:01:50,300
The first TOP is a luma level
TOP. It performs a very
important function in the
feedback loop.

20
00:01:50,300 –> 00:02:00,667
By reducing the opacity of the
feedback TOP, each successive
copy in the feedback loop will
fade a little bit more.

21
00:02:00,667 –> 00:02:14,967
As you can see, each slight
transformation we successively
apply to the feedback network
causes the feedback effect to
change or shift with each
repeating copy.

22
00:02:14,967 –> 00:02:23,267
A small shift or change will
gradually grow or shrink over
the life of the feedback loop.

23
00:02:23,267 –> 00:02:31,867
It’s possible to create several
different types of feedback
behaviors, including color
shifts over time.

24
00:02:31,867 –> 00:02:34,067

25
00:02:34,067 –> 00:02:41,767
Now that the feedback loop is
ready, we can use the 2D slider
to see the effects of our
settings.

26
00:02:41,767 –> 00:02:44,133

27
00:02:44,133 –> 00:02:55,800
The concept of feedback loops in
Touch Designer is very powerful,
and you can create very
surprising effects by
experimenting with effect
chains.

28
00:02:55,800 –> 00:02:57,800

Nov 12 2014

Tile TOP tutorial.

The Tile TOP. TouchDesigner 088. 2014.
The Tile TOP is useful for texture mapping, image transformation, and creating kaleidoscopic effects.

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

2
00:00:02,533 –> 00:00:05,833
I’ve set up two example networks
here.

3
00:00:05,833 –> 00:00:11,633
In the first, we’ll examine the
basic tile TOP parameters.

4
00:00:11,633 –> 00:00:14,967
I started this network with a
ramp TOP.

5
00:00:14,967 –> 00:00:23,867
The “Interpolate Notches”
parameter is set to “Step”, so
we can better visualize the
effect of the tile TOP.

6
00:00:23,867 –> 00:00:31,000
We use an add TOP to combine a
horizontal ramp and vertical
ramp.

7
00:00:31,000 –> 00:00:35,933
I’ll reset the tile TOP to its
default parameters settings.

8
00:00:35,933 –> 00:00:44,600
We can middle mouse click on the
operator, then choose “Reset All
Parameters” from the popup menu.

9
00:00:44,600 –> 00:00:53,100
Under the “Tile” tab, I’ll
change some default values to
see the effect of different
tiling settings.

10
00:00:53,100 –> 00:00:54,967

11
00:00:54,967 –> 00:01:02,767
Transpose will “flop” the image,
the bottom right corner will
become the top left.

12
00:01:02,767 –> 00:01:11,433
We can set the tile TOP to
repeat its input either once or
twice in both the X and Y.

13
00:01:11,433 –> 00:01:12,633

14
00:01:12,633 –> 00:01:21,000
The overlap adjustments will
blend the edges back on to it
tile, creating a smooth
interpolation.

15
00:01:21,000 –> 00:01:22,067

16
00:01:22,067 –> 00:01:29,033
In this example we combine two
tiled images to create a
kaleidoscopic effect.

17
00:01:29,033 –> 00:01:34,367
We use a beat CHOP to create a
series of sine waves.

18
00:01:34,367 –> 00:01:40,267
We then apply those animating
values to TOP parameters.

19
00:01:40,267 –> 00:01:46,333
We set the beat CHOP parameter
named “Multiples” to 4.

20
00:01:46,333 –> 00:01:49,933
This generates 4 channels.

21
00:01:49,933 –> 00:01:57,800
Changing the “Period” parameter
will increase or decrease the
animation speed.

22
00:01:57,800 –> 00:02:12,433
We wire the moviein TOP to a
transform TOP, and apply the
value generated by the beat CHOP
channel named “sine1” to the Z
rotation parameter.

23
00:02:12,433 –> 00:02:26,833
The beat CHOP generates of value
range of -1 to 1, so I multiply
that by 180 to create a 360
degree range of rotation.

24
00:02:26,833 –> 00:02:39,233
Using the same method, I apply
the value of the channel named
“sine3” to the “Crop Left”
parameter of the tile TOP named
“tile2”.

25
00:02:39,233 –> 00:02:52,433
You can easily adjust the Python
expressions to create different
animation effects by increasing
or decreasing the value ranges
created by the beat CHOP.

26
00:02:52,433 –> 00:03:00,367
At the end of the network we
combine the two tile TOPs by
using an add TOP.

27
00:03:00,367 –> 00:03:02,367

Posted In
Tagged