Tag Archives: cross

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

Cross CHOP tutorial.

The Cross CHOP. TouchDesigner 088. 2014.
The Cross CHOP is a multi-input Channel Operator that allows you to interpolate between input values.

1
00:00:00,200 –> 00:00:03,067
Let’s examine the cross CHOP.

2
00:00:03,067 –> 00:00:12,900
The cross CHOP allows you to
switch between multiple inputs,
but interpolate between the
incoming values.

3
00:00:12,900 –> 00:00:20,167
You can use integers as cross
values to simply switch between
inputs.

4
00:00:20,167 –> 00:00:31,133
I’ve created a box SOP with its
“sizex” parameter referencing
the cross CHOP channel named
“chan1”.

5
00:00:31,133 –> 00:00:35,733
This will help you visualize the
cross CHOPs’ effect.

6
00:00:35,733 –> 00:00:49,367
The interpolation is straight,
or linear, so a cross value of
.5 will blend the first 2 inputs
at 50% each.

7
00:00:49,367 –> 00:00:51,367
The cross CHOP is a commonly
used operator that can
compliment or replace standard
switching.