p5.js 아르키메데스 나선 그리기

p5.js와 ChatGPT로 만드는 인터랙티브 나선 애니메이션

파이썬 manim의 정적인 한계를 넘어, p5.js와 ChatGPT를 활용하여 사용자와 상호작용하는 아르키메데스 나선 애니메이션을 만드는 방법을 단계별로 알아봅니다. 기본 코드부터 마우스 휠 줌 기능 추가까지, 웹에서 생동감 넘치는 시각화를 구현하는 과정을 직접 확인해보세요.

---

목차

• 1. 들어가며: 왜 p5.js 인가?
• 2. ChatGPT로 기본 나선 그리기
• 3. 상호작용 추가하기: 마우스 휠 줌 기능
• 4. 마무리

---

1. 들어가며: 왜 p5.js 인가?

수학이나 물리 시각화에 많이 사용되는 manim이라는 파이썬 라이브러리가 있습니다. 결과물의 품질은 뛰어나지만, 동영상을 렌더링하는 방식이라 실시간으로 사용자와 상호작용할 수 없다는 아쉬움이 있습니다. 하지만 웹 기반의 p5.js를 사용하면 이 한계를 쉽게 극복할 수 있습니다.

오늘은 p5.js와 ChatGPT를 활용하여, 한 점이 그리는 궤적을 따라 아르키메데스 나선을 만들고, 그 점을 화면 중앙에 고정시켜 마치 카메라가 따라가는 듯한 효과를 주는 애니메이션을 제작해보겠습니다.

2. ChatGPT로 기본 나선 그리기

• ChatGPT 프롬프트

먼저, ChatGPT에게 다음과 같이 요청했습니다.

"아르키메데스 나선을 그리는 p5.js 코드를 만들어 줘. 나선을 그리는 점은 캔버스 중앙에 고정되어야 하고, 이 점의 움직임을 추적해서 나선 전체를 표시해야 해."

• 생성된 코드와 결과

ChatGPT는 아래와 같이 핵심 로직이 담긴 코드를 바로 생성해주었습니다. translate() 함수를 사용해 동적으로 좌표계를 이동시켜 점을 중앙에 고정하는 아이디어가 돋보입니다.

let angle = 0;
let a = 0; // 나선 시작 반경
let b = 5; // 나선 사이의 간격
let trail = []; // 점의 자취를 저장할 배열

function setup() {
  createCanvas(600, 400); // 캔버스 크기 조절
  background(255);
}

function draw() {
  // 데카르트 좌표계로 나선 위의 점을 계산
  let r = a + b * angle;
  let x = r * cos(angle);
  let y = r * sin(angle);
  trail.push(createVector(x, y));

  // 캔버스 배경을 다시 그림
  background(255);
  push(); // 현재 좌표계 저장
  
  // 현재 그리는 점(x, y)이 항상 화면 중앙에 오도록 캔버스를 이동
  translate(width / 2 - x, height / 2 - y);
  
  stroke(0);
  noFill();
  beginShape();
  for (let v of trail) {
    vertex(v.x, v.y);
  }
  endShape();
  
  pop(); // 이전 좌표계로 복원

  // 화면 중앙에 고정된 점을 그림
  fill(255, 0, 0);
  noStroke();
  ellipse(width / 2, height / 2, 8, 8);

  // 각도를 증가시켜 나선을 확장
  angle += 0.05;
  
  // 10바퀴를 돌면 리셋
  if (angle > TWO_PI * 10) {
    angle = 0;
    trail = [];
  }
}

아래는 위 코드를 실행한 결과입니다. 빨간 점은 항상 중앙에 고정되어 있고, 나선이 움직이는 것처럼 보입니다.

3. 상호작용 추가하기: 마우스 휠 줌 기능

여기서 한 단계 더 나아가, 사용자가 마우스 휠로 나선을 확대하거나 축소할 수 있도록 기능을 추가해달라고 요청했습니다. p5.js의 mouseWheel() 이벤트와 scale() 함수를 활용하면 간단하게 구현할 수 있습니다.

수정된 코드와 결과는 다음과 같습니다. 마우스를 아래 캔버스 위에 올리고 휠을 움직여보세요.

let angle = 0;
let a = 0;
let b = 5;
let trail = [];
let zoom = 1.0; // 확대/축소 배율 변수

function setup() {
  createCanvas(600, 400);
}

function draw() {
  const r = a + b * angle;
  const x = r * cos(angle);
  const y = r * sin(angle);
  trail.push(createVector(x, y));

  background(255);
  push();
  // 확대/축소 배율(zoom)을 적용하여 좌표계 이동
  translate(width / 2 - x * zoom, height / 2 - y * zoom);
  scale(zoom); // 캔버스 전체를 확대/축소
  
  stroke(0);
  noFill();
  beginShape();
  for (let v of trail) {
    vertex(v.x, v.y);
  }
  endShape();
  pop();
  
  fill(255, 0, 0);
  noStroke();
  ellipse(width / 2, height / 2, 8, 8);

  angle += 0.05;
  if (angle > TWO_PI * 10) {
    angle = 0;
    trail = [];
  }
}

// 마우스 휠 이벤트 처리 함수
function mouseWheel(event) {
  const sensitivity = 0.001; // 줌 감도
  zoom -= event.delta * sensitivity;
  zoom = constrain(zoom, 0.1, 5); // 줌 범위 제한 (0.1배 ~ 5배)
  return false; // 브라우저의 기본 스크롤 동작 방지
}

---

4. 마무리

이처럼 p5.js와 ChatGPT를 함께 사용하면 복잡한 수학적 시각화나 인터랙티브 애니메이션 프로토타입을 매우 빠르고 효율적으로 만들 수 있습니다. 정적인 결과물에 만족해야 했던 과거와 달리, 이제는 사용자와 직접 소통하는 동적인 콘텐츠를 손쉽게 제작할 수 있습니다.

아이디어를 코드로 전환하는 과정에서 발생하는 많은 시간과 노력을 줄일 수 있으니, 여러분도 다양한 아이디어를 p5.js와 인공지능을 통해 구현해보시길 바랍니다.