Tag Archives: animation

Nov 12 2014

Sequencer CHOP tutorial.

The Sequencer CHOP. TouchDesigner 088. 2014.
The Sequencer CHOP allows you to create complex animation sequences. This is a specialized Channel Operator, and it can be difficult to master.

1
00:00:00,833 –> 00:00:05,133
Let’s examine the sequencer
CHOP.

2
00:00:05,133 –> 00:00:16,067
The sequencer CHOP is an
operator that allows you to
create and control complex
animation sequences.

3
00:00:16,067 –> 00:00:24,400
The sequences are held in CHOPs,
and referenced by a table DAT.

4
00:00:24,400 –> 00:00:33,633
Each CHOP can represent a simple
animation state, or a complex
animation.

5
00:00:33,633 –> 00:00:43,467
In this network I’ve built a
series of 5 animations that
control a character.

6
00:00:43,467 –> 00:00:51,433
The character is a simple face
with 5 possible animatable
features.

7
00:00:51,433 –> 00:01:02,733
We can animate the eyes and the
mouth, with simple values for
rotation, position, and scale.

8
00:01:02,733 –> 00:01:12,567
Each of the 5 constant CHOPs
holds 5 animation states for
each facial feature.

9
00:01:12,567 –> 00:01:24,333
The sequencer CHOP gives us the
ability to dynamically choose
any state we want, and blend
them together over time.

10
00:01:24,333 –> 00:01:31,367
We can combine static, or still
states, with complex animations.

11
00:01:31,367 –> 00:01:41,033
The face character is a network
of TOPs and SOPs that lives
inside a container component.

12
00:01:41,033 –> 00:01:45,400
I’ve built a mouth from a line
SOP.

13
00:01:45,400 –> 00:01:55,967
We can animate the 3 points on
the line: 2 for the left and
right side, and 1 for the
middle.

14
00:01:55,967 –> 00:02:01,000
The eyes are constructed from a
rectangle TOP.

15
00:02:01,000 –> 00:02:11,067
We vary the rotation and scale
of the rectangle to create
expressive animations.

16
00:02:11,067 –> 00:02:18,633
I won’t go into detailed
explanation of this network, you
can explore it on your own.

17
00:02:18,633 –> 00:02:33,200
The most important note is that
I use Python expressions to
reference the values stored in
the constant CHOPs above this
container.

18
00:02:33,200 –> 00:02:46,100
These values are the rotation,
position, and scale values that
drive the facial animation.

19
00:02:46,100 –> 00:02:56,000
Now that we’ve seen how the face
is constructed, let’s look again
at the complete network.

20
00:02:56,000 –> 00:03:03,967
The sequencer CHOP is now
referencing the constant CHOP
named “BASE”.

21
00:03:03,967 –> 00:03:14,000
I can adjust the values of the
base animation state, and see
the results applied to the face
character.

22
00:03:14,000 –> 00:03:22,500
By doing this, you will realize
that to create a new animation
state is a simple matter.

23
00:03:22,500 –> 00:03:35,167
You can copy the “BASE”
operator, add it to the
sequence, and adjust the
parameters to create a new
facial expression.

24
00:03:35,167 –> 00:03:42,100
This is the method I used to
create the following 4 animation
states.

25
00:03:42,100 –> 00:03:54,067
The last animation is here to
showcase the ability of the
sequencer CHOP to combine static
states with complex animations.

26
00:03:54,067 –> 00:03:58,933
I created this animation from 5
noise CHOPs.

27
00:03:58,933 –> 00:04:07,167
Each will generate random
states, over time, for each of
the 5 facial features.

28
00:04:07,167 –> 00:04:19,233
For this, or any animation, to
work properly with the sequencer
CHOP, you need to pay close
attention to how your channels
are named.

29
00:04:19,233 –> 00:04:26,367
I’m using 2 Python scripts to
control the sequencer CHOP.

30
00:04:26,367 –> 00:04:40,767
The logic is simple: 1st, copy
the contents of the table DAT
named “felipeSequence” to the
DAT named “sequencer1_sequence”.

31
00:04:40,767 –> 00:04:51,333
The reason we use a custom table
to create our sequence will
become apparent in a moment.

32
00:04:51,333 –> 00:04:54,800
Next, we reset the sequencer
CHOP.

33
00:04:54,800 –> 00:05:06,800
This forces the sequencer to
load the 1st entry in the table
DAT, which in turn, points to
the 1st animation CHOP.

34
00:05:06,800 –> 00:05:10,833
Now, our sequence is loaded and
ready.

35
00:05:10,833 –> 00:05:17,567
This script simply tells the
sequencer CHOP to step to the
next sequence.

36
00:05:17,567 –> 00:05:20,533
Now let’s step through some
animations.

37
00:05:20,533 –> 00:05:24,167
Pay attention to the sequencer’s
table DAT.

38
00:05:24,167 –> 00:05:32,200
You’ll see that at the end of
each sequence, the row
containing that sequence is
deleted.

39
00:05:32,200 –> 00:05:36,533
The second row of the table DAT
is never deleted.

40
00:05:36,533 –> 00:05:41,833
That’s why I use it to store a
base animation state.

41
00:05:41,833 –> 00:05:46,267
Let’s step through the entire
process again.

42
00:05:46,267 –> 00:05:50,000
I run the “LOAD_SEQUENCE”
script.

43
00:05:50,000 –> 00:05:59,833
This fills the sequence table
with our custom contents, and
resets the sequencer so it’s
ready to play the next
animation.

44
00:05:59,833 –> 00:06:07,800
I’ll make an adjustment here:
the “blendtime” parameter
between the first and second
animations.

45
00:06:07,800 –> 00:06:17,633
I must reset the sequencer, and
you’ll see the change in blend
time when I step to the next
animation.

46
00:06:17,633 –> 00:06:25,100
The sequencer CHOP can play
animations independently of
Touch Designer’s master
timeline.

47
00:06:25,100 –> 00:06:35,133
Therefore, you can use it to
create animations that react to
user input or any other realtime
events.

48
00:06:35,133 –> 00:06:45,400
The sequencer CHOP is a very
powerful tool that requires a
very specific network design to
work properly.

49
00:06:45,400 –> 00:06:47,400
When you master the process of
building these networks, you can
begin to create very amazing
animation effects.

Nov 12 2014

Speed CHOP tutorial.

The Speed CHOP. TouchDesigner 088. 2014.
The Speed CHOP can be utilized as the core of complex animation engines in TouchDesigner.

1
00:00:00,100 –> 00:00:02,433
Let’s take a look at the speed
CHOP.

2
00:00:02,433 –> 00:00:08,500
The speed CHOP uses an input
value as a rate of change.

3
00:00:08,500 –> 00:00:11,867
It outputs this change over
time.

4
00:00:11,867 –> 00:00:18,633
In this example, we will use a
constant CHOP to set the rate of
change.

5
00:00:18,633 –> 00:00:26,267
With a value of 1, the rate of
change is 1 times 60 per second.

6
00:00:26,267 –> 00:00:32,000
The output of the speed CHOP
will increase by 1 every second.

7
00:00:32,000 –> 00:00:39,667
With a value of .5, the speed
CHOP will increase by .5 every
second.

8
00:00:39,667 –> 00:00:50,567
We can use the speed CHOP to
easily create time or animation
engines that are independent of
the global frame rate of Touch
Designer.

9
00:00:50,567 –> 00:00:51,300

10
00:00:51,300 –> 00:00:57,533
This example network shows the
basics of a commonly used
animation engine.

11
00:00:57,533 –> 00:01:02,667
We want an animation to be
driven by user input.

12
00:01:02,667 –> 00:01:08,567
When the button is clicked, its
state changes from 0 to 1.

13
00:01:08,567 –> 00:01:16,567
A chop execute DAT will run a
Python expression that resets a
speed CHOP.

14
00:01:16,567 –> 00:01:17,400

15
00:01:17,400 –> 00:01:26,433
We use the output of the speed
CHOP to drive an animation, in
this case the size of a
rectangle.

16
00:01:26,433 –> 00:01:34,000
In the rectangle TOP, I multiply
the speed CHOP value by 20, so
we can better see its effect.

17
00:01:34,000 –> 00:01:39,333
When I click the button, its
state changes from 0 to 1.

18
00:01:39,333 –> 00:01:43,767
I’ve set the speed CHOP’s limit
type to “Clamp”.

19
00:01:43,767 –> 00:01:49,800
This forces the speed CHOP to
hold at a maximum value, in this
case 10.

20
00:01:49,800 –> 00:01:56,967
If the button state is 0, the
“Reset” parameter of the speed
CHOP will be pulsed.

21
00:01:56,967 –> 00:01:59,700
This resets the speed CHOP.

22
00:01:59,700 –> 00:02:01,200

23
00:02:01,200 –> 00:02:09,300
This user interaction can take
place at any point on the Touch
Designer master timeline.

24
00:02:09,300 –> 00:02:11,300

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