Wiggle() Expression 루핑만들기

에프터 이펙트의 wiggle 함수는 다음과 같은 형식으로 사용됩니다.

wiggle(frequency, amplitude, octaves = 1, amplitude_mult = 0.5, time = t);

 

• frequency: 초당 wiggle 발생 빈도.

• amplitude: wiggle의 진폭.

• octaves: 노이즈의 복잡성, 기본값은 1입니다.

• amplitude_mult: 각 옥타브에서 진폭의 곱셈 값, 기본값은 0.5입니다.

• time: wiggle을 평가할 시간, 기본값은 현재 시간입니다.

 

위의 예제에서 1과 0.5는 각각 octaves와 amplitude_mult 값을 나타냅니다. 이는 wiggle 함수의 노이즈 복잡성과 각 옥타브의 진폭 곱셈 값을 설정합니다. 기본값으로 설정된 이 값들은 보통 건드리지 않아도 됩니다.

 

3초 루핑이 되는 위치값에 대한 Wiggle 모션을 만들기 위해서 0초에 위치값하고 3초에 위치값이 같아야 합니다.

 

 

wiggle() Expression 에서 frequency, amplitude 만 남기고 적용해도 되지만, time값을 조정해야되서 기본이 되는 값으로 모두 작성해 주었다.

 

frequency = 1; // wiggles per second

amplitude = 200; // amount of pixels to wiggle

wiggle(frequency, amplitude, 1, 0.5, time);

 

루핑 영상의 핵심은 처음과 끝이 자연스럽게 연결되도록 만드는 것입니다. 이는 영상이 반복될 때 시각적으로 불연속성이 없도록 보장하여, 끊김 없이 계속해서 반복되는 효과를 만듭니다. 이 원리를 이해하는 것은 다양한 그래픽 애니메이션에서 매우 중요합니다. wiggle 함수는 무작위로 값을 변동시켜 움직임을 만들기 때문에, 기본적으로는 루핑되지 않습니다. 이를 해결하기 위해서는 wiggle 함수의 시작과 끝 값을 동일하게 만들어야 합니다. 이는 표현식을 통해 다음과 같은 단계로 구현할 수 있습니다

 

 

이해를 돕기 위해 두 개의 다른 색의 별을 사용하여 같은 Wiggle Expression을 적용한 예제를 살펴보겠습니다. 여기서 파란 별은 노란 별의 3초 전 상태를 나타내도록 설정했습니다. 에프터 이펙트에서 각 레이어의 Wiggle Expression이 서로 다른 랜덤값을 가지므로, 같은 Seed 값을 설정하여 동일한 랜덤값을 갖도록 해야 합니다. 이를 위해 seedRandom() 메서드를 사용합니다.

 

다음은 이 과정을 자세히 설명한 단계별 가이드입니다.

 

1. Wiggle Expression 설정

 

먼저, Wiggle Expression을 두 개의 별(노란 별과 파란 별)에 동일하게 적용합니다. Wiggle Expression은 주기적으로 위치를 무작위로 변동시키는 데 사용됩니다.

 

2. Seed 값을 설정하여 동일한 랜덤값 생성

 

에프터 이펙트에서 동일한 Wiggle Expression을 사용하더라도, 각 레이어는 기본적으로 서로 다른 랜덤값을 생성합니다. 이를 방지하고 같은 랜덤값을 가지도록 하기 위해 seedRandom() 함수를 사용하여 Seed 값을 설정합니다. Seed 값은 랜덤값을 생성할 때 사용하는 초기값으로, 동일한 Seed 값을 사용하면 동일한 랜덤값을 얻을 수 있습니다.

 

3. 파란 별의 Wiggle Expression 설정

 

파란 별의 위치는 노란 별의 3초 전 상태를 나타내도록 설정합니다. 이를 위해 시간 오프셋을 적용합니다. 다음은 이 설정을 구현한 예제 코드입니다.

 

Yellow Star Expression

seedRandom(1);

frequency = 1; // wiggles per second

amplitude = 200; // amount of pixels to wiggle

wiggle(frequency, amplitude, 1, 0.5, time);

Blue Star Expression

seedRandom(1);

frequency = 1; // wiggles per second

amplitude = 200; // amount of pixels to wiggle

wiggle(frequency, amplitude, 1, 0.5, time-3);

 

이런 배경으로 바탕으로 노란 별에서 파란 별로 2개의 위치값을 블렌딩해준다. 그러기 위해 linear() Expression을 사용해서 0초에서 3초로 시간이 경과할 때 노란 별의 위치값을 파란 별의 위치값으로 넘겨주었습니다.

 

frequency = 1; // wiggles per second
amplitude = 200; // amount of pixels to wiggle
secondsToLoop = 3; // time to loop in seconds

// Calculate the remainder of the current time to create a 3-second loop.
t = time % secondsToLoop;

// Calculate the wiggle value for the current cycle
wiggle1 = wiggle(frequency, amplitude, 1, 0.5, t);

// Calculate the wiggle value for the previous cycle (to match the start and end values)
wiggle2 = wiggle(frequency, amplitude, 1, 0.5, t - secondsToLoop);

// Use linear interpolation to create the loop effect over the current time
linear(t, 0, secondsToLoop, wiggle1, wiggle2);

 

secondsToLoop 값이 원하는 루핑되는 시간이 됩니다. 이상으로 wiggle()를 루핑할 수 있는 방법에 대해 알아봤습니다.