Wave Expression

사인/코사인 파동을 이용한 부드러운 웨이브 움직임을 만드는 익스프레션입니다.

Preview

사인/코사인을 이용한 규칙적인 주기 운동입니다. phase를 다르게 하면 물결 효과를 만들 수 있습니다.

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

Code

기본 사인 웨이브 (Position Y에 적용)

// Wave Expression
// 부드러운 위아래 움직임

amp = 50;         // 진폭 (움직임 크기)
freq = 1;         // 주파수 (초당 사이클)
phase = 0;        // 위상 (시작점 오프셋)

value + Math.sin(time * freq * 2 * Math.PI + phase) * amp;

연속 웨이브 (여러 레이어)

// 복제된 레이어들이 물결처럼 움직임
amp = 30;
freq = 2;
delay = 0.2;  // 레이어 간 딜레이

phase = (index - 1) * delay * 2 * Math.PI;
value + Math.sin(time * freq * 2 * Math.PI + phase) * amp;

양방향 웨이브 (X, Y 동시)

// Position에 적용
ampX = 30;
ampY = 50;
freq = 1;

x = value[0] + Math.sin(time * freq * 2 * Math.PI) * ampX;
y = value[1] + Math.cos(time * freq * 2 * Math.PI) * ampY;

[x, y];

Parameters

파라미터	설명
amp	진폭 - 움직임의 크기
freq	주파수 - 초당 왕복 횟수
phase	위상 - 시작점 오프셋 (라디안)
delay	레이어 간 시간 차이

Wave Types

사인 웨이브 (Sine)

// 부드러운 곡선
Math.sin(time * freq * 2 * Math.PI) * amp;

코사인 웨이브 (Cosine)

// 사인과 90도 위상차
Math.cos(time * freq * 2 * Math.PI) * amp;

삼각 웨이브 (Triangle)

// 직선적인 왕복
amp * (2 * Math.abs(2 * ((time * freq) % 1) - 1) - 1);

사각 웨이브 (Square)

// 급격한 전환
amp * Math.sign(Math.sin(time * freq * 2 * Math.PI));

Examples

천천히 떠다니기

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

낮은 주파수로 천천히 위아래로 떠다닙니다.

amp = 20;
freq = 0.3;

value + Math.sin(time * freq * 2 * Math.PI) * amp;

빠른 진동

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

높은 주파수로 빠르게 진동합니다.

amp = 10;
freq = 5;

value + Math.sin(time * freq * 2 * Math.PI) * amp;

점점 커지는 웨이브

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

시간이 지남에 따라 진폭이 점점 커집니다.

baseAmp = 10;
growthRate = 20;
freq = 2;

amp = baseAmp + time * growthRate;
value + Math.sin(time * freq * 2 * Math.PI) * amp;

스케일 펄스 효과

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

Scale에 적용하여 심장 박동처럼 맥동하는 효과입니다.

// Scale에 적용
baseScale = 100;
pulseAmp = 10;
freq = 2;

s = baseScale + Math.sin(time * freq * 2 * Math.PI) * pulseAmp;
[s, s];

Advanced

복합 웨이브

// 여러 주파수 합성
amp1 = 30;
freq1 = 1;
amp2 = 10;
freq2 = 3;

wave1 = Math.sin(time * freq1 * 2 * Math.PI) * amp1;
wave2 = Math.sin(time * freq2 * 2 * Math.PI) * amp2;

value + wave1 + wave2;

감쇠 웨이브

// 시간이 지나면서 줄어드는 웨이브
amp = 50;
freq = 3;
decay = 0.5;

currentAmp = amp * Math.exp(-time * decay);
value + Math.sin(time * freq * 2 * Math.PI) * currentAmp;

Tips

Wiggle과의 차이

• Wiggle: 랜덤하고 예측 불가능한 움직임
• Wave: 규칙적이고 예측 가능한 주기적 움직임

위상(phase) 활용

여러 레이어에 같은 웨이브를 적용하되 phase를 다르게 하면 물결이 퍼져나가는 효과를 만들 수 있습니다.

index 활용

(index - 1) * 0.2처럼 index로 phase를 계산하면 복제된 레이어들이 자동으로 시차를 가집니다.