프랙탈은 자기 유사성(Self-Similarity)을 가지는 기하학적 형태로, 아무리 확대해도 전체와 비슷한 모양이 반복되는 특징을 갖습니다.
앞서 다루어본 재귀(Recursion)은 프랙탈을 코드로 구현하는 알고리즘적 도구입니다.
이번에 다루어볼 프랙탈은 아래와 같이 구분할 수 있습니다.

1. 🌲 재귀적 프랙탈 (Recursive Fractals)

재귀 함수를 사용하여 시작 도형과 명확한 변형 규칙을 반복적으로 적용하며 확장하는 프랙탈입니다. 이 방식은 Geometry와 Transformations 개념을 익히는 데 가장 좋습니다.

• 시어핀스키 삼각형 (Sierpinski Triangle) 삼각형을 세 개의 작은 삼각형으로 나누고 가운데 삼각형을 제거하는 재귀.
• 시어핀스키 카펫 (Sierpinski Carpet) 정사각형을 9개의 작은 정사각형으로 나누고 가운데 정사각형을 제거하는 2D 재귀.
• 코흐 곡선 (Koch Curve) 선분을 4개의 작은 선분으로 대체하며 각도를 꺾는 재귀. (코흐 눈송이의 기본 요소)
• 재귀 나무/가지 (Recursive Tree/Branch) 선분을 그린 후 끝점에서 회전과 축소를 적용하여 2개 이상의 가지를 치는 재귀.
• 피타고라스 나무 (Pythagoras Tree) 직각삼각형과 정사각형을 활용하여 나무 구조를 만드는 기하학적 재귀.
• 맹거 스펀지 (Menger Sponge) 3차원 큐브를 27개로 나누고 가운데 7개를 제거하는 3D 재귀.

2. 🌌 반복 프랙탈 (Iterative Fractals)

반복(Iteration) 계산, 주로 복소수 계산 또는 반복적인 픽셀 매핑을 사용하여 구조를 생성하는 프랙탈입니다. 이 방식은 수학적 깊이와 색상 매핑(Color Mapping) 기술을 익히는 데 중요합니다.

• 만델브로트 집합 (Mandelbrot Set)$z_{n+1} = z_n^2 + c$ 공식을 반복하여, 수렴 여부를 픽셀의 색상으로 표현. (복소수 반복)
• 율리아 집합 (Julia Set)만델브로트와 유사하나, 초기 상수 $c$를 고정하고 초기 값 $z_0$을 픽셀 위치로 사용하는 반복.
• 프랙탈 불꽃 (Fractal Flames)반복 함수 시스템(IFS)의 확률적 구현을 통해 복잡하고 유기적인 모양을 생성.
• IFS 프랙탈 (Iterated Function Systems)여러 개의 아핀 변환(축소, 회전, 이동) 함수를 반복적으로 적용하여 구조를 생성. (예: 양치 식물 프랙탈)

3. 🌿 L-시스템 프랙탈 (L-System Fractals)

린덴마이어 시스템(Lindenmayer System)이라는 형식 문법을 사용하여 문자열을 확장하고, 이 문자열을 터틀 그래픽스(Turtle Graphics)로 해석하여 시각화하는 방식입니다. 규칙 기반 생성과 파싱 로직을 익히는 데 유용합니다.

• 결정적 L 시스템 (Deterministic L-System)고정된 규칙(예: $F \to F+F-F$)을 반복하여 문자열을 확장. (예: 코흐 곡선의 L-System 버전, 나무/식물 구조의 기본)
• 확률적 L 시스템 (Stochastic L-System)규칙에 확률을 부여하여 보다 자연스럽고 변칙적인 식물 패턴을 생성.
• 드래곤 곡선 (Dragon Curve)$X, Y$ 두 가지 변수 규칙과 $90^\circ$ 회전을 사용하여 복잡한 나선형 구조 생성.
• 힐베르트 곡선 (Hilbert Curve)평면을 채우는 공간 채움 곡선(Space-Filling Curve) 중 하나로, L-시스템으로 깔끔하게 표현 가능.

이 중에서 몇 가지만 코드로 구현해보겠습니다.

---

예시 코드

예제 A: Mandelbrot 집합 시각화

let cols = 800;
let rows = 800;
let maxIter = 100; // 최대 반복 횟수

function setup() {
  createCanvas(cols, rows);
  pixelDensity(1);
  colorMode(RGB, 255); 
  noLoop();
}

function draw() {
  background(25);
  loadPixels();

  for (let x = 0; x < cols; x++) {
    for (let y = 0; y < rows; y++) {
      // 화면 좌표 (픽셀) → 복소평면 좌표 (c = ca + i*cb)
      // 만델브로트 집합의 주요 영역을 포함하도록 매핑 범위 조정
      let ca = map(x, 0, cols, -2.5, 1);
      let cb = map(y, 0, rows, -1.5, 1.5);

      let a = 0; // z의 실수부 (z0 = 0)
      let b = 0; // z의 허수부 (z0 = 0)

      let n = 0; // 발산까지의 반복 횟수 카운터

      while (n < maxIter) {
        // z_next = z^2 + c 계산
        let aa = a * a - b * b; // z^2의 실수부
        let bb = 2 * a * b;     // z^2의 허수부
        
        a = aa + ca; // z_next의 실수부
        b = bb + cb; // z_next의 허수부

        // 발산 조건: 복소수의 크기가 특정 임계값을 넘으면 발산으로 간주
        // (a^2 + b^2) > 16 또는 abs(a) + abs(b) > 16 등으로 최적화 가능
        if (a * a + b * b > 16) { 
          break;
        }

        n++;
      }

      let r, g, bb; // 'b' 변수와의 충돌을 피하기 위해 'bb'로 선언

      if (n < maxIter) { // 발산한 경우 (집합 외곽)
        // 발산 반복 횟수 'n'에 따라 민트색의 밝기를 조절
        // n이 작을수록 어둡고, 클수록 밝게 (또는 그 반대로)
        let brightnessFactor = map(n, 0, maxIter, 0.2, 1.0); // 20% ~ 100% 밝기
        r = 30 * brightnessFactor;
        g = 190 * brightnessFactor;
        bb = 180 * brightnessFactor;
      } else { // 발산하지 않은 경우 (만델브로트 집합 내부)
        // 만델브로트 집합 내부는 어두운 배경색과 비슷하게 설정하여 '검은색'으로 보임
        r = 25; 
        g = 25;
        bb = 25;
      }

      let pix = (x + y * cols) * 4;
      pixels[pix + 0] = r;     // Red
      pixels[pix + 1] = g;     // Green
      pixels[pix + 2] = bb;    // Blue
      pixels[pix + 3] = 255;   // Alpha (불투명)
    }
  }

  updatePixels();
}

🔍 설명

• cols, rows로 캔버스 크기를 정하고, maxIter로 발산까지의 최대 반복 횟수를 결정합니다.
• maxIter가 클수록 집합 경계의 디테일이 살아나지만, 집합 내부에 속하는 모든 픽셀에 대해 불필요한 계산 시간이 증가합니다.
• pixelDensity(1): 고해상도 화면에서 픽셀 중복 계산을 방지하는 코드입니다.
• loadPixels() / updatePixels(): 픽셀 배열에 직접 접근하여 CPU 기반에서 빠른 픽셀 조작을 가능하게 합니다.
• map(x, 0, cols, -2.5, 1): 픽셀 위치 $\to$ 복소수 $c$의 실수부($ca$) 및 허수부($cb$)로 변환합니다. 이 범위가 만델브로트 집합의 주된 심장형 영역을 포함합니다.
• while (n < maxIter): 만델브로트 공식 $z_{n+1} = z_n^2 + c$ 을 반복하여 복소수 $z$가 무한대로 발산하는지 확인합니다. 더 높은 성능을 위해서는 계산을 GPU에서 하는 WebGL/GLSL 셰이더 기반으로 구현해야 합니다.(createShader 사용)

🧠 수학적/알고리즘 분석
A. 만델브로트 공식 ($z_{n+1} = z_n^2 + c$)

• $z$: 반복되는 복소수 (초기 $z_0 = 0 + 0i$).
• $c$: 캔버스 좌표에 의해 결정된 고정된 복소수 (픽셀마다 다름).
• 발산 조건: 만약 $|z|$ (복소수의 크기)가 2보다 커지면, 그 이후로는 $|z|$가 무한대로 발산함이 수학적으로 증명됩니다. 코드에서는 $|z|^2 > 4$보다 큰 a a + b b > 16 (안전 마진)을 사용하여 발산 여부를 판단합니다.

B. 프랙탈 시각화 원리

• 만델브로트 집합의 정의: 이 반복 계산에서 $z$가 무한대로 발산하지 않고 유한한 값으로 수렴하거나 머무르는 $c$ 값들의 집합입니다.
• 색상 부여: 발산에 오래 걸릴수록 (n이 클수록) 집합 경계에 가깝다고 보고 밝은 색을 부여하며, 발산하지 않은 영역 (집합 내부)은 단색(어두운 배경색)으로 처리하여 경계를 강조합니다.

🌟 컬러 구현 로직

• colorMode(RGB, 255): RGB 모드를 사용하여 직관적으로 원하는 색상 값을 적용합니다.
• 밝기 매핑: 발산 횟수 n을 밝기 계수(brightnessFactor)로 변환하여 집합 외곽의 색조를 유지하면서 반복 횟수에 따른 층위를 시각적으로 표현했습니다.
  • n이 작을수록 → brightnessFactor가 작음 → 어두운 민트색
  • n이 클수록 → brightnessFactor가 큼 → 밝은 민트색

---

예제 B: 코흐 곡선 (Koch Curve)

let W = 800;
let H = 400;

// 재귀 깊이 (반복 횟수)
// 0: 단순한 선분, 1: 톱니 모양, 5-6 정도가 적절
let maxDepth = 5;

function setup() {
  // 캔버스를 생성합니다.
  createCanvas(W, H);

  // 배경을 어두운 색으로 설정합니다.
  background(20);

  // 선분의 색상과 굵기를 설정합니다.
  stroke(30, 240, 210);
  strokeWeight(1);
  noFill();

  // 코흐 곡선의 시작점과 끝점을 정의합니다.
  // 캔버스 중앙 하단에 넓게 펼쳐지도록 설정합니다.
  let p1 = createVector(50, H - 50);
  let p2 = createVector(W - 50, H - 50);

  // 재귀 함수를 호출하여 코흐 곡선을 그립니다.
  // 초기 깊이는 0입니다.
  koch(p1, p2, 0);

  // 'noLoop()'를 사용하여 draw() 함수가 반복 실행되지 않도록 합니다.
  // 정적인 결과물만 필요하므로 성능 최적화에 도움이 됩니다.
  noLoop();
}

/**
 * 코흐 곡선을 재귀적으로 생성하는 함수입니다.
 * @param {p5.Vector} startP - 현재 선분의 시작점
 * @param {p5.Vector} endP - 현재 선분의 끝점
 * @param {number} depth - 현재 재귀 깊이
 */
function koch(startP, endP, depth) {
  // 1. **재귀 탈출 조건 (Base Case)**:
  // 재귀 깊이가 'maxDepth'에 도달하면 더 이상 분할하지 않고 현재 선분만 그립니다.
  if (depth >= maxDepth) {
    line(startP.x, startP.y, endP.x, endP.y);
    return;
  }

  // 2. **선분 분할을 위한 중간점 계산**:
  // 현재 선분 (startP - endP)을 3등분하고, 정삼각형을 만들기 위한 꼭짓점을 계산합니다.

  // 선분을 벡터로 표현: V = endP - startP
  let v = p5.Vector.sub(endP, startP);

  // a: 시작점에서 전체 길이의 1/3 지점
  let a = p5.Vector.add(startP, v.copy().mult(1 / 3));

  // c: 시작점에서 전체 길이의 2/3 지점
  let c = p5.Vector.add(startP, v.copy().mult(2 / 3));

  // b: 돌출된 정삼각형의 꼭짓점 (a와 c 사이의 중간 지점을 60도 회전)
  // 1. 벡터 v를 1/2로 줄이고, startP에 더해 중간점(a와 c의 중간)을 구합니다. (필요없음)
  // 2. a에서 c로 향하는 벡터를 구합니다: acV = c - a = v/3
  // 3. acV를 60도 (PI/3 라디안) 반시계 방향으로 회전시킵니다.
  let b = p5.Vector.sub(c, a); // b는 이제 a-c 간의 벡터 (v/3)
  b.rotate(-PI / 3); // 60도 (PI/3) 회전 -> 코흐 눈꽃을 만들려면 PI/3을 사용합니다.
  b.add(a); // 시작점 a를 더해서 절대 위치를 구합니다.

  // 3. **재귀 호출 (Recursive Step)**:
  // 현재 선분을 4개의 작은 선분으로 대체하며 다음 깊이로 재귀 호출합니다.
  // [startP] -- [a] -- [b] -- [c] -- [endP] 순서입니다.
  let nextDepth = depth + 1;

  // 1. 시작점(startP) -> 첫 번째 지점(a)
  koch(startP, a, nextDepth);

  // 2. 첫 번째 지점(a) -> 돌출된 꼭짓점(b)
  koch(a, b, nextDepth);

  // 3. 돌출된 꼭짓점(b) -> 세 번째 지점(c)
  koch(b, c, nextDepth);

  // 4. 세 번째 지점(c) -> 끝점(endP)
  koch(c, endP, nextDepth);
}

// 참고: 코흐 눈꽃(Koch Snowflake)을 만들려면
// setup()에서 세 개의 koch() 호출을 사용하여 정삼각형의 세 변을 프랙탈화해야 합니다.

---

예제 C: 시에르핀스키 개스킷 (Sierpinski Gasket)

let W = 800;
let H = 700;

// 재귀 깊이 (반복 횟수)
// 0: 하나의 삼각형, 6~7 정도가 적절
let maxDepth = 7;

function setup() {
  // 캔버스를 생성합니다.
  createCanvas(W, H);

  // 배경을 어두운 색으로 설정합니다.
  background(20);

  // 선 스타일 설정: 외곽선은 흰색, 채우기는 검은색 (비어있는 효과)
  stroke(30, 240, 210);
  strokeWeight(1);
  fill(20); // 배경색과 같은 색으로 채워 역삼각형이 '비어 보이게' 만듭니다.

  // 시에르핀스키 개스킷의 세 꼭짓점을 정의합니다.
  // 캔버스 중앙 상단, 왼쪽 하단, 오른쪽 하단에 정삼각형 모양으로 배치합니다.
  let p1 = createVector(W / 2, 50); // 상단 꼭짓점
  let p2 = createVector(50, H - 50); // 왼쪽 하단 꼭짓점
  let p3 = createVector(W - 50, H - 50); // 오른쪽 하단 꼭짓점

  // 재귀 함수를 호출하여 시에르핀스키 개스킷을 그립니다.
  sierpinski(p1, p2, p3, 0);

  // 정적인 결과물이므로 noLoop()를 사용합니다.
  noLoop();
}

/**
 * 시에르핀스키 개스킷을 재귀적으로 생성하는 함수입니다.
 * @param {p5.Vector} v1 - 삼각형의 첫 번째 꼭짓점
 * @param {p5.Vector} v2 - 삼각형의 두 번째 꼭짓점
 * @param {p5.Vector} v3 - 삼각형의 세 번째 꼭짓점
 * @param {number} depth - 현재 재귀 깊이
 */
function sierpinski(v1, v2, v3, depth) {
  // 1. **재귀 탈출 조건 (Base Case)**:
  // 재귀 깊이가 'maxDepth'에 도달하면 더 이상 분할하지 않고 현재 삼각형을 그립니다.
  if (depth >= maxDepth) {
    // 세 꼭짓점을 잇는 삼각형을 그립니다.
    triangle(v1.x, v1.y, v2.x, v2.y, v3.x, v3.y);
    return;
  }

  // 2. **새로운 꼭짓점 (중간점) 계산**:
  // 현재 삼각형의 각 변의 중점을 계산합니다.
  // 벡터의 합을 2로 나누면 (v1 + v2) / 2 가 되어 중점을 쉽게 구할 수 있습니다.

  // v1과 v2의 중점 (m12)
  let m12 = p5.Vector.add(v1, v2).mult(0.5);
  // v2와 v3의 중점 (m23)
  let m23 = p5.Vector.add(v2, v3).mult(0.5);
  // v3과 v1의 중점 (m31)
  let m31 = p5.Vector.add(v3, v1).mult(0.5);

  // 3. **재귀 호출 (Recursive Step)**:
  // 원래 삼각형의 세 꼭짓점과 새로 계산한 세 중점을 사용하여 3개의 작은 '부분 삼각형'에 대해 재귀 호출합니다.
  let nextDepth = depth + 1;

  // 1. 상단 작은 삼각형: (v1, m12, m31)
  sierpinski(v1, m12, m31, nextDepth);

  // 2. 왼쪽 하단 작은 삼각형: (m12, v2, m23)
  sierpinski(m12, v2, m23, nextDepth);

  // 3. 오른쪽 하단 작은 삼각형: (m31, m23, v3)
  sierpinski(m31, m23, v3, nextDepth);

  // (참고: 중앙의 역삼각형 (m12, m23, m31)은 그리지 않음으로써 '빈 공간'을 만듭니다.)
}

5️⃣ Deterministic(결정적) L-System

5️⃣-1️⃣ "나무형(Tree-like)” L-System

let axiom = "F";
let sentence = axiom;
let rules = [];
let len = 100;

function setup() {
  createCanvas(800, 600);
  angleMode(DEGREES);
  rules.push({
    a: "F",
    b: "FF+[+F-F-F]-[-F+F+F]"
  });

  background(255);
  stroke(0, 100);
  turtle();
  noLoop();
}

// L-System 문자열 확장 함수
function generate() {
  let nextSentence = "";
  for (let i = 0; i < sentence.length; i++) {
    let current = sentence.charAt(i);
    let found = false;
    for (let j = 0; j < rules.length; j++) {
      if (current === rules[j].a) {
        nextSentence += rules[j].b;
        found = true;
        break;
      }
    }
    if (!found) {
      nextSentence += current;
    }
  }
  sentence = nextSentence;
  len *= 0.5; // 세대마다 가지 길이 절반
  turtle();
}

// 문자열을 해석하여 그림을 그림
function turtle() {
  resetMatrix();
  translate(width / 2, height);
  stroke(0, 80);

  for (let i = 0; i < sentence.length; i++) {
    let current = sentence.charAt(i);

    if (current === "F") {
      line(0, 0, 0, -len);
      translate(0, -len);
    } else if (current === "+") {
      rotate(25);
    } else if (current === "-") {
      rotate(-25);
    } else if (current === "[") {
      push();
    } else if (current === "]") {
      pop();
    }
  }
}

// 키를 눌러 세대 확장
function keyPressed() {
  if (key === " ") {
    background(255);
    generate();
  }
}

🌱 작동 방식

1. axiom (시작 문자열) = "F"

2. 규칙:

• "F" → "FF+[+F-F-F]-[-F+F+F]"
• 즉, 가지가 갈라지며 + / - 로 회전

3. generate() 함수는 스페이스바를 누를 때마다
   한 세대씩 성장하도록 만듦 🌿

4. len을 세대마다 절반으로 줄여서
   나무가 점점 작아지고 가지가 세밀해짐

다른 L-system 변형(예: Koch curve, Dragon curve, Plant-like system)도 있음.

5️⃣-2️⃣ Koch Curve (코흐 곡선 / 눈송이 기본 구조)

let axiom = "F";
let sentence = axiom;
let rules = [{ a: "F", b: "F+F−F−F+F" }];
let len = 200;

function setup() {
  createCanvas(800, 300);
  background(255);
  stroke(0);
  noFill();
  angleMode(DEGREES);
  turtle();
  noLoop();
}

// 문자열 변환 (한 세대씩 확장)
function generate() {
  let nextSentence = "";
  for (let c of sentence) {
    let rule = rules.find(r => r.a === c);
    nextSentence += rule ? rule.b : c;
  }
  sentence = nextSentence;
  len *= 0.5;
  turtle();
}

// 문자열을 그림으로 해석
function turtle() {
  resetMatrix();
  translate(50, height / 2 + 50);
  for (let c of sentence) {
    if (c === "F") {
      line(0, 0, len, 0);
      translate(len, 0);
    } else if (c === "+") {
      rotate(90);
    } else if (c === "−" || c === "-") {
      rotate(-90);
    }
  }
}

// 스페이스바로 다음 세대 생성
function keyPressed() {
  if (key === " ") {
    background(255);
    generate();
  }
}

📘 포인트

• "F → F+F−F−F+F"
• 90도 각도로 반복 → 직사각형 모듈 구조
• 스페이스바로 세대를 확장하며 점점 복잡해지는 선 구조 확인 가능

5️⃣-3️⃣ Dragon Curve (드래곤 곡선)

let axiom = "FX";
let sentence = axiom;
let rules = [
  { a: "X", b: "X+YF+" },
  { a: "Y", b: "-FX-Y" }
];
let len = 10;
let generation = 0;

function setup() {
  createCanvas(800, 600);
  background(255);
  stroke(0);
  angleMode(DEGREES);
  noFill();
  turtle();
  noLoop();
}

function generate() {
  let next = "";
  for (let c of sentence) {
    let rule = rules.find(r => r.a === c);
    next += rule ? rule.b : c;
  }
  sentence = next;
  generation++;
  len *= 0.7;
  turtle();
}

function turtle() {
  resetMatrix();
  translate(width / 2, height / 2);
  for (let c of sentence) {
    if (c === "F") {
      line(0, 0, len, 0);
      translate(len, 0);
    } else if (c === "+") {
      rotate(90);
    } else if (c === "-") {
      rotate(-90);
    }
  }
}

// 스페이스바로 확장
function keyPressed() {
  if (key === " ") {
    background(255);
    generate();
  }
}

📘 포인트

• "X → X+YF+", "Y → -FX-Y"
• 스페이스바로 단계 확장 시 자기유사 곡선 패턴이 드러남
• 한쪽으로 감기며 “드래곤 스파이럴” 구조 생성

5️⃣-4️⃣ Plant-like L-System (자연스러운 식물 패턴)

let axiom = "X";
let sentence = axiom;
let rules = [
  { a: "X", b: "F+[[X]-X]-F[-FX]+X" },
  { a: "F", b: "FF" }
];
let len = 100;
let angle = 25;

function setup() {
  createCanvas(800, 600);
  background(255);
  stroke(50, 100, 30);
  angleMode(DEGREES);
  turtle();
  noLoop();
}

function generate() {
  let next = "";
  for (let c of sentence) {
    let rule = rules.find(r => r.a === c);
    next += rule ? rule.b : c;
  }
  sentence = next;
  len *= 0.5;
  turtle();
}

function turtle() {
  resetMatrix();
  translate(width / 2, height);
  for (let c of sentence) {
    if (c === "F") {
      line(0, 0, 0, -len);
      translate(0, -len);
    } else if (c === "+") {
      rotate(angle);
    } else if (c === "-") {
      rotate(-angle);
    } else if (c === "[") {
      push();
    } else if (c === "]") {
      pop();
    }
  }
}

function keyPressed() {
  if (key === " ") {
    background(255);
    generate();
  }
}

📘 포인트

• "X → F+[[X]-X]-F[-FX]+X", "F → FF"
• 가지(branch)를 push/pop으로 저장 → 트리 구조 성장
• 세대가 늘수록 복잡하고 유기적인 식물 형태
• angle 값을 바꾸면 형태가 다양하게 변함 🌿

6️⃣ Stochastic (확률적) L-System

let axiom = "X";
let sentence = axiom;
let len = 100;
let angle = 25;

let rules = [
  { a: "X", b: "F+[[X]-X]-F[-FX]+X", chance: 0.4 },
  { a: "X", b: "F-[[X]+X]+F[+FX]-X", chance: 0.4 },
  { a: "X", b: "F+[FX]-X", chance: 0.2 },
  { a: "F", b: "FF", chance: 1.0 }
];

function setup() {
  createCanvas(800, 600);
  background(255);
  stroke(50, 80, 30);
  angleMode(DEGREES);
  noFill();
  turtle();
  noLoop();
}

// 다음 세대로 발전시키는 함수
function generate() {
  let next = "";
  for (let c of sentence) {
    let matched = rules.filter(r => r.a === c);
    if (matched.length > 0) {
      // 확률 기반 선택
      let rnd = random();
      let acc = 0;
      for (let r of matched) {
        acc += r.chance;
        if (rnd < acc) {
          next += r.b;
          break;
        }
      }
    } else {
      next += c;
    }
  }
  sentence = next;
  len *= 0.55;
  turtle();
}

// 문자열을 해석해 그림으로 변환
function turtle() {
  resetMatrix();
  translate(width / 2, height);
  for (let c of sentence) {
    if (c === "F") {
      line(0, 0, 0, -len);
      translate(0, -len);
    } else if (c === "+") {
      rotate(angle);
    } else if (c === "-") {
      rotate(-angle);
    } else if (c === "[") {
      push();
    } else if (c === "]") {
      pop();
    }
  }
}

// 스페이스바로 다음 세대
function keyPressed() {
  if (key === " ") {
    background(255);
    generate();
  }
}

🌱 작동 원리

• rules 배열에 동일한 a: "X"에 대해 여러 개의 b 패턴이 존재함
• 각 패턴에는 chance가 지정되어 있어
  랜덤(random) 값에 따라 규칙이 다르게 적용됨
• 결과적으로 매번 다른 형태의 가지 구조가 만들어짐
• 스페이스바를 누르면 다음 세대로 성장

📊 규칙 설명

a	b	chance	설명
X	F+[[X]-X]-F[-FX]+X	0.4	위쪽으로 나무형 확장
X	F-[[X]+X]+F[+FX]-X	0.4	반대 방향으로 가지 확장
X	F+[FX]-X	0.2	단순 짧은 가지
F	FF	1.0	모든 F는 두 배로 성장

---