Tag Archives: keys

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