Tag Archives: UV

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 11 2014

Box SOP tutorial.

The Box SOP. TouchDesigner 088. 2014.
The Box SOP is a fundamental and very powerful Surface Operator.

1
00:00:02,000 –> 00:00:08,000
Here’s a demo of the box SOP.

2
00:00:08,000 –> 00:00:13,500
If we click the viewer active
button on the bottom right of
the operator.

3
00:00:13,500 –> 00:00:17,800
You’ll see that since this is a
three-dimensional operator,

4
00:00:17,800 –> 00:00:22,000
we can use the left mouse button
and move to rotate.

5
00:00:22,000 –> 00:00:25,200
We use the middle mouse button
and drag to zoom.

6
00:00:25,200 –> 00:00:29,033
Right click will bring up a
context menu.

7
00:00:29,033 –> 00:00:30,667

8
00:00:30,667 –> 00:00:36,033
We can select orthographic view
ports , perspective viewport
option.

9
00:00:36,033 –> 00:00:44,133

10
00:00:44,133 –> 00:00:47,600
Right click and drag to move.

11
00:00:47,600 –> 00:00:49,600

12
00:00:49,600 –> 00:00:54,500
Here are the box parameters.

13
00:00:54,500 –> 00:00:59,200
Size in Touch Designer units.

14
00:00:59,200 –> 00:01:04,267
Here’s a simple network showing
the application of

15
00:01:04,267 –> 00:01:07,067
a 2 dimensional map to a
material.

16
00:01:07,067 –> 00:01:10,300
A texture operator- in this case
the ramp.

17
00:01:10,300 –> 00:01:14,233
Applied to a material which is
then applied to the SOP

18
00:01:14,233 –> 00:01:16,633
using the material SOP.

19
00:01:16,633 –> 00:01:17,967

20
00:01:17,967 –> 00:01:23,633
In the box SOP parameters we
have options for texture
coordinate generation.

21
00:01:23,633 –> 00:01:33,033

22
00:01:33,033 –> 00:01:34,467
Normal computation.

23
00:01:34,467 –> 00:01:39,533
As you can see here we are not
computing normals so we have no
shading.

24
00:01:39,533 –> 00:01:45,500

25
00:01:45,500 –> 00:01:51,533
Right click in the active
viewport to pull up the context
menu.

26
00:01:51,533 –> 00:01:54,267
3d navigation.

27
00:01:54,267 –> 00:01:59,100

28
00:01:59,100 –> 00:02:01,467
We have another context menu,

29
00:02:01,467 –> 00:02:04,833
the display options.

30
00:02:04,833 –> 00:02:07,033

31
00:02:07,033 –> 00:02:11,733
Here we have options for how we
can identify and view our 3d
points.

32
00:02:11,733 –> 00:02:18,300

33
00:02:18,300 –> 00:02:24,033
We can view our point
identifications and locations in
3d.

34
00:02:24,033 –> 00:02:26,233

35
00:02:26,233 –> 00:02:35,333
Middle mouse and hold for
information about any node in a
pop up.

36
00:02:35,333 –> 00:02:40,100
As you can see here for surface
operators we will get
information

37
00:02:40,100 –> 00:02:44,567
about the number of points, the
location of points.

38
00:02:44,567 –> 00:02:46,000

39
00:02:46,000 –> 00:02:50,000
I’ve consolidated the corner
points on the Box SOP.

40
00:02:50,000 –> 00:02:57,767
Now we have a total of 8 points
that are joined instead of 24
points.

41
00:02:57,767 –> 00:03:01,067

42
00:03:01,067 –> 00:03:04,100
Another simple example network.

43
00:03:04,100 –> 00:03:09,267
Box SOPS can take an input.

44
00:03:09,267 –> 00:03:14,667
By using an input the box SOP
will automatically

45
00:03:14,667 –> 00:03:21,433
scale itself to the bounding box
of the input geometry.

46
00:03:21,433 –> 00:03:27,200
We have a sphere that is then
deformed using a noise SOP

47
00:03:27,200 –> 00:03:29,300
and animated.

48
00:03:29,300 –> 00:03:31,067
I’ll turn off the animation.

49
00:03:31,067 –> 00:03:38,767
Our box SOP has become a
bounding box for the size of the
input geometry

50
00:03:38,767 –> 00:03:41,633

51
00:03:41,633 –> 00:03:45,333
I’ll animate the noise SOP
again.

52
00:03:45,333 –> 00:03:52,633
As you can see, the box SOP
will adjust in realtime

53
00:03:52,633 –> 00:03:58,333
to the scale of the incoming
geometry.

54
00:03:58,333 –> 00:04:00,333

Posted In
Tagged