한 줄 치환 규칙이 나무를 자라게 한다. 자연의 프랙탈은 이렇게 단순한 재귀에서 나온다.
구현
- L-system axiom
F· 규칙F → FF+[+F-F-F]-[-F+F+F]· 치환 반복마다 문자열 지수 증가 (상한 5회, 50k자 컷) - 터틀 그래픽:
F=직진 ·+/-=회전 ·[/]=상태 push/pop - 깊이별 길이 감쇠
length * 0.72^depth로 자연스러운 비율 - SVG 렌더: 각 가지는
<line>·strokeWidth = max(0.6, 2.4 - depth*0.55)·opacity = 0.88 - depth*0.08 - 성장 애니메이션:
getTotalLength()로 가지 길이 측정 →strokeDasharray + strokeDashoffset설정 → 다음 rAF에서 offset을 0으로 →cubic-bezier(0.22,1,0.36,1)900ms · 가지 순서에delay = (i/total) * 1400ms스태거 (뿌리→잎) - 잎 인식:
F다음 문자가undefined또는]면isLeaf = true - 슬라이더: 깊이 2-5 · 각도 14-40° · 가지 길이 6-18 · 즉시 리렌더
제어 포인트
- "다시 심기" 버튼으로
growthSeed증가 → React key 교체로 애니메이션 재시작 - 잎 이름 입력 시 세 잎마다 serif 텍스트
dx jitter = (i*31)%7 - 3로 결정적 배치 prefers-reduced-motion: stroke-dashoffset 0 즉시, 완성형 한 번에 표시