푸리에 분석으로 원을 이어 라마 그리기

AI 요약

푸리에 변환(Fourier transform)은 신호를 시간 영역에서 주파수 영역으로 바꾸는 방법입니다. 이 글은 이 변환을 그림에 적용합니다. 닫힌 곡선을 여러 주파수의 회전 벡터로 분해하고, 벡터를 꼬리에서 끝으로 이어 붙이면 마지막 벡터 끝이 원래 윤곽을 그립니다. 글에서는 서로 다른 주파수와 반지름, 시작 위상을 가진 원 1,024개로 라마를 그립니다.

원을 이어 곡선을 만드는 원리

각 원은 복소수 하나로 나타냅니다. 복소수의 실수부와 허수부는 2차원 좌표에 해당하며, 크기는 반지름, 각도는 시작 위상을 표현합니다. 복소 지수 함수 e^{it}는 단위원을 따라 회전하므로 주파수를 곱하면 회전 속도를 바꿀 수 있습니다. 여기에 여러 주파수 성분을 합산하면 복잡한 곡선도 근사합니다.

글은 이를 이해하기 위해 선형대수와 내적에서 출발합니다. 벡터를 기저 벡터의 선형 결합으로 표현하듯, 함수를 사인파와 코사인파의 기저 성분으로 표현합니다. 연속 함수의 내적은 적분으로 계산하며, 이 방식으로 각 주파수가 원래 신호에 얼마나 포함됐는지 구합니다.

사각파로 푸리에 급수 살펴보기

푸리에 급수의 예제로 사각파를 다룹니다. 사각파와 각 주파수의 기저 함수 사이 내적을 적분해 계수를 구하고, 계수에 해당하는 사인파들을 더해 원래 파형을 근사합니다. 항을 7개에서 51개로 늘리면 근사가 사각파에 가까워집니다. 불연속 지점 부근에는 진동이 남지만, 더 많은 주파수 성분이 파형의 세부를 채웁니다.

SVG를 샘플링하고 DFT 적용하기

라마 윤곽은 SVG 경로에서 가져옵니다. 글의 코드는 경로를 따라 점을 샘플링하고, 각 점의 x·y 좌표를 복소수로 취급합니다. 예제에서는 샘플 수를 400으로 설정합니다. 샘플 점에 이산 푸리에 변환(DFT)을 적용해 주파수별 복소 계수를 구합니다. 계수의 크기와 위상은 각각 원의 반지름과 시작 각도가 됩니다.

제시한 DFT 구현은 주파수마다 모든 샘플을 순회하는 중첩 반복문으로, 시간 복잡도는 O(N²)입니다. 글은 점 개수가 커질 때 Radix-2 고속 푸리에 변환(FFT)을 쓰면 평균 O(N log N)으로 줄어든다고 설명합니다. 계산한 계수에 복소 지수 함수를 곱해 합산하면 시간에 따른 곡선의 위치를 얻습니다. p5.js로 원과 벡터를 그려 애니메이션을 만들며, 낮은 주파수만으로도 전체 윤곽이 빠르게 잡히고 높은 주파수를 더하면 작은 세부가 채워집니다.

Reddit 반응

• @u/electro042 — 푸리에 에피사이클은 봐도 질리지 않습니다. SVG 경로에서 점을 뽑고, 복소 좌표에 간단한 DFT를 적용한 다음 회전 벡터가 윤곽을 재구성하는 모습을 보는 건 정말 만족스러운 시각화입니다. 경로를 호 길이 기준으로 정규화했나요, 아니면 원본 샘플을 그대로 변환에 넣었나요? 캔버스에서 직접 만들어 볼 때 점 간격이 고르지 않으면, 특히 급한 모서리 주변에서 그림 그리는 속도가 왜곡되더군요. 보통 둘레를 따라 등간격으로 다시 샘플링합니다.
  • @u/lelanthran — 경로를 호 길이 기준으로 정규화했나요? 저는 이 글 작성자가 아닙니다. 이 서브레딧을 흥미롭게 유지하려고 가끔 저질 콘텐츠가 아닌 글을 올릴 뿐입니다.
• @u/Less_Chemist2023 — 푸리에 분석이 라마 그림으로 이어지리라고는 오늘 예상하지 못했습니다.
• @u/naequs — 한 달 전에 나온 관련 글입니다.
• @u/electro042 — 에피사이클로 임의의 2차원 경로를 그리는 모습은 언제 봐도 매혹적입니다. 복소 지수 함수만 칠판에서 보는 대신 이산 푸리에 변환(DFT)을 직관적으로 이해하는 데 가장 좋은 시각화 중 하나입니다. 재미있는 글이네요.

원문: Ade Kau 블로그 / 번역·요약: Trawling