구형 나선에 대한 호기심으로 만들어진 시각화

(visualrambling.space)

5P by GN⁺ 4일전 | ★ favorite | 댓글 1개

3D 공간에서 객체 이동을 파라메트릭 함수로 표현하는 방법에 대한 개념 소개임
원, 나선 그리고 구형 나선 경로까지 점차 복잡한 경로를 수학적으로 만드는 과정 설명임
각 좌표축(x, y, z)을 시간의 함수로 정의함으로써 다양한 움직임이 구현 가능함
특별히 구형 나선의 경우, 반지름 변화를 주는 삼각함수의 곱셈으로 3차원 나선 경로 생성임
이러한 방식은 임의의 경로로 객체를 이동시킬 수 있음을 보여주는 창의적인 예시임

3D 공간에서의 객체 이동 탐구

이 글은 3D 공간에서 객체를 이동시키는 다양한 방법과, 특히 구형 나선(spherical helix) 경로를 어떻게 수학적으로 정의하고 구현하는지에 대한 개인적인 탐구 결과임

헬릭스와 3차원 이동의 기초

헬릭스는 스프링처럼 회전하면서 감기는 3차원 구조를 의미함
구형 나선은 구의 표면을 따라 나선 형태로 돈다는 개념임
3D 공간에서 객체의 위치는 x, y, z 3개 축의 좌표로 결정됨
- x축: 좌우 이동을 담당
- y축: 상하 이동에 해당
- z축: 앞뒤(깊이) 방향 변화
객체의 위치를 시간(t) 에 따라 수학 함수를 사용해서 정의하면 이동 경로를 만들 수 있음

파라메트릭 함수와 단순한 경로 예시

예: x 위치를 10 * cos(πt/2)로 정의하면, 2초마다 -10에서 10까지 왕복하는 코사인 파형 이동이 됨
같은 방식으로 y 위치를 10 * cos(πt/2)로 지정하면 수직 방향 왕복 운동도 가능함
x, y에 서로 다른 함수(예: x = 10 * cos(πt/2), y = 10 * sin(πt/2))를 쓰면 서로 위상이 다른 운동이 되고, 이 둘을 합치면 원형 경로가 생성됨
함수에 시간이 비례하는 항(예: x = 0.03 * t * cos(πt/2))을 곱하면, 반지름이 점점 커지는 패턴 즉 나선(spiral) 경로를 만들 수 있음

구형 나선(spherical helix) 경로 만들기

기존 평면의 나선과 달리 구형 나선은 3차원 경로를 필요로 함
- z의 값에 10 * cos(0.02 * πt) 등을 사용해 앞뒤 위치를 점진적으로 변화시킬 수 있음
x, y에는 sin(0.02 * πt) 같은 삼각함수 곱 활용으로, 반지름이 중간에서 가장 커지고 양끝에서 작아지는 효과 연출
x와 y 모두 이러한 곱을 적용함으로써, 원운동을 하면서 구의 표면(즉, 3차원적으로) 나선을 따라 이동하는 경로 생성 가능
이와 같은 함수 조합으로 구형 나선 경로의 수학적 구현 완성

요약 및 활용

모든 3D 경로는 x, y, z를 각각 시간의 파라메트릭 함수로 정의해 만들 수 있음
이는 단순 원, 나선부터 복잡한 경로까지 수학적으로 지정 가능함을 의미함
이러한 접근을 통해 복잡한 운동도 사실상 혼돈이 아닌 명확히 정의된 수학 경로임을 시각적으로 이해할 수 있음

visualrambling.space는 Damar가 다양한 주제를 배우고 시각적으로 이야기하는 개인 프로젝트임

▲

GN⁺ 4일전 [-]

Hacker News 의견

예전 해양 항해에는 이러한 곡선(룸브 라인, loxodrome)이 매우 중요했음
항해 중 같은 방위를 유지하는 것이 훨씬 쉽기 때문임
그래서 선원들은 최대한 이런 경로를 따르려 했음
이렇게 해서 룸브 라인이라는 개념이 나옴
Rhumb line 위키백과 참고
Mercator 지도는 이러한 방위를 계산하는 데 더 쉬움을 제공했음
Mercator projection 위키백과 참고
이 설정 자체가 계속 새로운 수학적 발견을 낳아 옴
예를 들어, 극좌표 투영(polar projection)에서 보면 로그 나선이 됨
옆에서 보면 파동 팩켓(wave packet)이 됨
그 수학적 흥미로움 때문에 Paul Erdos마저 도전하게 됨
참고 논문: Spiraling the Earth with C. G. J. Jacobi. Paul Erdös
사족이지만 오늘은 Hacker News에서 구면기하학(spherical geometry) 이야기가 많이 올라오는 날인 것 같음
관련 토론 링크:
1번
2번
3번
- 하지만 OP(원글)에 나온 나선 곡선은 룸브 라인(loxodrome, rhumb line)이 아님
  곡선이 표면상 일정 간격을 가진 형태인데 룸브 라인은 정의상 항상 같은 각도로 자오선을 가로지르기 때문에 극지방에 가까워질수록 선이 더 조밀해지는 특성이 있음
  수식으로도,
  x = 10 · cos(π·t/2) · sin(0.02·π·t)
  y = 10 · sin(π·t/2) · sin(0.02·π·t)
  z = 10 · cos(0.02·π·t)
  이 식을 구면좌표(R=10)로 바꿔보면,
  λ(t) = π/2 · t (longitude)
  φ(t) = π/2 - 0.02·π·t (latitude)
  미분하면 d(λ)/d(φ) = -25(상수값)
  진짜 룸브 라인은 d(λ)/d(φ)가 tan(α) · sec(φ) 형태여서 위도에 따라 변함
  즉, 이 곡선은 룸브 라인이 아님
  교차각이 변하는 곡선이 궁금하다면 이 시각화 링크에서 살펴보길 추천
덕분에 영감을 받아서 2022년에 만들었던 재미있는 구면 관련 프로젝트를 소개해봄
spheredisksample 프로젝트
오늘 같은 트렌드에 딱 맞는 프로젝트라고 생각함
사람들이 좋아할 만한 sphere-resample 프로젝트도 함께 추천
Rhumb line 등과 관련된 토론이 달린 이 포스팅도 함께 잊지 않고 참고하면 좋겠음
시각화가 정말 멋지다고 생각함
한 가지 더 기대했던 부분은 “일정한 속도로 움직일 수 있을까?”에 대한 내용이었음
경로를 따라 점을 배치하는 게 목적이면 상관없지만, 실제로 움직이는 걸 보면 시작과 끝에서 훨씬 느리게 이동하는 현상을 볼 수 있음 (거의 반지름에 의해 결정됨)
만약 일정한 속도로 이동하고 싶거나, 심지어 느려졌다 빨라졌다 하는 이징(easing) 함수까지 적용하고 싶다면 어떤 방법이 있을지 궁금함
아마도 수학적으로 멋진 트릭이 있을 것 같음
수식 미분해서 속도 함수를 만든 뒤, 피타고라스 공식으로 dx, dy, dz를 처리하고, 속도 함수의 역함수를 써서 t'로 다시 파라미터화(reparameterization)해야 할 거라고 얼추 생각만 해봄
하지만 이 부분은 너무 수학에 익숙하지 않아서, 말로만 떠드는 느낌이 듦
- 일정한 속도로 움직이려면 “유클리드 파라미터화(Euclidean parameterization)”가 필요함
  즉, t값이 움직인 유클리드 거리와 비례하게 조정돼야 함
  애니메이션에서 경로 따라 움직일 때 항상 필요한 개념임
  하지만 대개 닫힌 식(closed-form solution)이 없는 경우가 대부분이라 수치적으로(계산적으로) 해결해야 함
  실제로는, 각 t마다 원하는 거리(ds)에 해당하는 dt를 이진 탐색이나 보간법(interpolation search) 등으로 찾아냄
  이렇게 해서 그 결과값을 저장해서 일정 간격의 점으로 폴리라인을 만드는 것이 실용적인 접근임 (곡선이 시간에 따라 계속 변하지 않는 한)
- 질문에서 언급한 수학적 트릭은 바로 “호 길이 파라미터화(arc length parameterization)”임
  곡선의 호 길이(arc length) 함수의 역함수와 합성하는 작업임
  특정 곡선군 몇 가지를 제외하면, 대부분 닫힌 식이 없어서 계산적으로 접근함
- t를 느리게 움직이자는 직감이 맞긴 함
  t에 따라 각도 속도가 유지되지만, 반지름 역시도 t에 따라 변하기 때문임
  일종의 Archimedean spiral 개념임
  속도의 크기를 상수로 만들어서 파라미터화 하면 더 일정한 이동이 가능함
  단, 반지름이 0에서 시작하기 때문에 어떤 방식으로든 극한값(limit)을 처리해야 함
  게임 등에서 경로를 따라가야 한다면 Z축 기준으로 경로와 접선을 타깃팅하고, 반복적으로 속도에 제약을 주면서 드래그해서 bead toy처럼 이동시키는 단순화 방식도 실용적임
“…사실 혼돈적(chaotic)인 것이 아님. 단순히 수학적 함수로 정의된 경로임”이라는 부분에 대해,
제시된 함수가 실제로 혼돈 현상을 보여주는지는 알 수 없으나, 혼돈의 개념 자체가 본질적으로 결정론적 수학 함수에서 나타나는 현상(초기 조건에 극도로 민감하게 반응)임
아마 글쓴이가 “random” 혹은 “non-deterministic” 대신 “chaotic”이란 단어를 선택한 것 같음
- 위와 같은 기술적인 지적이 매우 중요하다고 생각함
  Hacker News 독자라면(또는 그래야만 한다면) 이런 구분이 흥미로울 것임
  수학적으로 혼돈은 극도로 초기 조건에 민감한 결정론적 시스템임
  결과가 무작위처럼 보이지만, 실제로는 무작위성(randomness)과 개념적으로 완전히 다름
- 혼돈이란 용어 자체가 결정론적 수학함수에서 발생하는 성질이란 데 동의함
  하지만 일상적인 사전적 정의에서는 “완전한 무질서와 혼란”, “우연이 지배하는 상태”, “복잡한 자연 시스템의 예측 불가성” 따위를 의미함
  일상적으로 글을 읽는 이들의 기대와 언어 습관에 맞추기 위해, 수학적 엄밀함보다는 이해하기 쉬운 언어로 설명하는 방식도 충분히 의미 있다고 생각함
피드백을 하나 주자면, 모바일에서 네비게이션 방식이 예상과 달랐음
어떻게 조작하는지 몰라서 스크롤을 시도했음
화면 터치가 다음 페이지로 넘어가길래 “아, 그렇구나”라고 생각함
오른쪽을 눌렀더니 다음 페이지로 이동해서 나중에 클릭을 한 번 더 했을 때 왼쪽을 눌러 뒤로 가기를 시도했으나, 오히려 두 페이지를 건너뛰게 되었음
이로 인해 일부 화면을 놓쳐서 조금 아쉬웠음
큰 문제는 아니지만, 약간의 안내가 있었다면 혼란을 덜고 더 집중할 수 있었을 것임
- 첫 슬라이드에 사용법 안내가 있음
  그래도 보조적으로 swipe 동작을 추가해도 좋을 것 같음 (개인적으로는 tap 조작을 선호함)
  소셜 미디어 앱의 “카드 스택” 인터페이스를 닮으려면 swipe도 자연스러울 것 같음
내용이 기본적인 기초 수준이라 아이들이 수학을 배울 때 참고하기에 좋아 보임
원(circle) 공식(x = r cos t, y = r sin t) 같은 수학 개념도 중간중간 언급했으면 더 좋았을 것 같음
추가로 확장하기 좋은 주제로는 극좌표(polar coordinate)와 선형대수(벡터, 변환, 3d 공간에서의 변환 등)가 있음
저자 본인이 이런 주제에 익숙하지 않다면 3blue1brown 유튜브 영상을 추천함
프로그래머 입장에선 코딩, 라이브러리나 실제 3D 오브젝트(버텍스, 변형 등)를 다루는 부분이 빠졌기 때문에, 그 부분까지 다뤄주면 더 좋겠음
구면 헬릭스에서 z축 이동의 “정확성”에 대해 궁금했음
z = c * t 같이 여러 함수로 단순 이동할 수 있고, 이 함수는 “껍질(peels)”의 두께, 일관성, 균일성 등이 달라짐
여기서 쓰인 함수는 시각적으로 멋져 보이지만, 나선 간 거리의 일정함(혹은 균일한 면적 분할 등)이라는 관점에서 목표를 어떻게 잡는 게 좋을지 궁금함
이 함수가 어떤 과정을 거쳐 선정된 것인지, 아니면 그저 보기에 좋아서 그냥 고른 것인지 궁금함
- 아마도 이 함수는 프로그래밍이 편리하고 눈에 보기 좋기 때문에 단순히 선택된 것 같음
  진짜 “정확한” 방식은 3D 공간에서 점이 일정 속도를 유지하며 이동(예: 진짜 지구 위에서 배가 움직일 때처럼)하는 것일 거라고 생각함
  그 경우 수식(코드 예제 참고)
  const degrees = Math.PI / 180
  const bearing = 5 * degrees
  const k = Math.tan(bearing)
  const v = 0.001
  const phi = (t) => vt/Math.sqrt(1 + kk)
  const theta = (t) => k*Math.ln(Math.tan(phi(t)/2))
  x, y, z 좌표로 변환
  const x = (t) => Math.sin(phi(t)) * Math.cos(theta(t))
  const y = (t) => Math.sin(phi(t)) * Math.sin(theta(t))
  const z = (t) => Math.cos(phi(t))
  실제로는 tan(phi/2)의 로그 함수까지 써야 하고, 이건 미분방정식을 풀어서 나오는 형태임
  아마도 저자는 이 정도 복잡한 방식(ln(tan(phi/2)))까지 쓰지 않은 것 같다고 생각함
- 경로의 속도를 일정하게 만드는 것(velocity constant)이 핵심임
  도함수를 설정해서 속도를 상수로 만든 뒤, z에 대해 풀거나, t’로 재파라미터화(reparameterization)하는 방식으로 접근 가능함
  z = c * t를 선택하는 것은 경로의 파라미터화와 실제 궤적을 동시에 결정하는 영향이 있음
애니메이션이 아주 부드러워서 인상적임
최근에 구 상에 N개의 점을 분산시키는 문제를 다룰 일이 있었는데, 그 과정에서 “fibonacci-sphere”라는 간단한 알고리즘을 발견함
이 방식도 구면 위에 나선을 생성하여 점을 배치하는 용도로 쓰임
관련 논문: fibonacci-sphere 논문 PDF
Acko.net이 아직 언급되지 않은 것에 놀람
비슷한 도구를 활용해 복소수와 프랙탈, 특히 Julia fractal을 시각적으로 설명하는 훌륭한 블로그 포스트가 있음
관련자라면 꼭 읽어보길 추천
How to fold a julia fractal - Acko.net 블로그
3D Desmos에서 이 곡선 식을 직접 조작해볼 수 있음 Desmos 3D 시각화 링크
이 나선의 파라메트릭 방정식이 구면 좌표계에서 선형적이라는 점도 흥미로움
좌표 변환 위키백과 참고
공유해줘서 고맙고, 정말 흥미롭게 봤음

답변달기