디자인 아틀라스
EN
∿ 제너러티브 아트

프랙탈 나무

Fractal tree

줄기 하나가 두 개의 더 짧은 가지로 갈라지고, 그 가지들이 다시 같은 규칙으로 갈라지는 재귀 구조.

다른 이름: Recursive treeBinary tree fractal
···
js
const c = document.createElement('canvas');
document.body.appendChild(c);
c.style.width = '100%'; c.style.height = '100%';
const ctx = c.getContext('2d');
const cs = getComputedStyle(document.documentElement);
const ACCENT3 = cs.getPropertyValue('--accent-3').trim() || '#18c29c';
let w, h;
function resize() {
  const dpr = Math.min(devicePixelRatio || 1, 2);
  w = innerWidth; h = innerHeight;
  c.width = w * dpr; c.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
addEventListener('resize', resize);
resize();

function branch(x, y, len, ang, depth, sway) {
  if (depth === 0 || len < 3) return;
  const nx = x + Math.cos(ang) * len, ny = y + Math.sin(ang) * len;
  ctx.lineWidth = Math.max(0.6, depth * 0.9);
  ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(nx, ny); ctx.stroke();
  const spread = 0.5 + sway;
  branch(nx, ny, len * 0.72, ang - spread, depth - 1, sway);
  branch(nx, ny, len * 0.72, ang + spread, depth - 1, sway);
}
function draw(t) {
  ctx.fillStyle = '#0d0d12'; ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = ACCENT3; ctx.lineCap = 'round';
  const sway = Math.sin(t * 0.0009) * 0.07;
  const baseLen = Math.min(w, h) * 0.24;
  branch(w / 2, h * 0.92, baseLen, -Math.PI / 2, 10, sway);
}
draw(0); // 재귀는 즉시 끝나므로 첫 프레임부터 나무 전체가 보인다
(function loop(t) { draw(t); requestAnimationFrame(loop); })(0);

"선을 하나 그리고, 그 끝에서 각도를 좌우로 조금씩 튼 두 개의 더 짧은 선을 그리고, 그 각각에서 또 같은 일을 반복한다" — 이 한 문장이 함수 하나로 그대로 코드가 됩니다(자기 자신을 호출하는 재귀 함수). L-시스템이 문자열 치환으로 같은 결과를 얻는 것과 달리, 프랙탈 나무는 좌표와 각도를 직접 넘겨받는 재귀 호출로 그립니다 — 개념은 같지만 구현 방식이 다른 두 갈래입니다.

가지가 갈라질 때마다 길이를 일정 비율(예: 0.72배)로 줄이고 깊이 제한(예: 10단계)을 두지 않으면 무한히 계속되므로, 반드시 "이 깊이에 도달하면 멈춘다"는 종료 조건이 필요합니다. 깊이를 늘릴수록 나무는 기하급수적으로 복잡해지고(가지 수가 2의 깊이제곱), 각도·길이 비율·깊이 세 숫자만으로 소나무부터 관목까지 전혀 다른 실루엣을 만들 수 있습니다.

이 데모는 매 프레임 각도에 시간에 따른 작은 흔들림을 더해서, 정지된 그림이 아니라 바람에 흔들리는 나무처럼 보이게 합니다. 재귀 함수를 눈으로 확인하는 대표적인 예제라 프로그래밍 교육에서도 자주 쓰이고, 디자인에서는 배경의 나뭇가지·핏줄·강줄기 같은 가지형 텍스처에 씁니다.

언제 쓰나

배경의 나뭇가지·핏줄·번개 같은 가지형 텍스처, 재귀 개념을 시각적으로 설명할 때. 깊이를 12단계 넘게 주면 프레임마다 그리는 비용이 급격히 늘어납니다.