🎓 7주차: 재귀와 패턴 (Recursion & Pattern)

Generative Art 혹은 Coding Art의 관점에서 재귀(Recursion)는 프랙탈이나 복잡한 패턴, 유기적이고 자연적인 구조를 만들어내는 데 있어 핵심적인 알고리즘입니다.

재귀 함수는 자기 자신을 호출하는 함수이며, 반드시 종료 조건(Base Case)를 가져야 무한 루프에 빠지지 않습니다.

1. Recursion BASIC : 선분 나누기

가장 기본이 되는 재귀 예제입니다. 하나의 선분을 계속해서 반으로 나누면서 그리는 작업을 반복합니다.

const MAX_LEVEL = 7;

function setup() {
  createCanvas(800, 450);
  noLoop();
  stroke(255, 200, 70);
  strokeWeight(1);
}

function draw() {
  background(20);

  // 재귀 함수 호출 시작
  // x1, y1, x2, y2, level
  divideLine(50, height / 2, width - 50, height / 2, 0);
}

/**
 * 선분을 재귀적으로 나누는 함수
 * @param {number} x1 시작점 x 좌표
 * @param {number} y1 시작점 y 좌표
 * @param {number} x2 끝점 x 좌표
 * @param {number} y2 끝점 y 좌표
 * @param {number} level 현재 재귀 깊이
 */

function divideLine(x1, y1, x2, y2, level) {
  // 1. **종료 조건 (Base Case)**:
  // 재귀 깊이가 최대 레벨에 도달하면 함수를 종료합니다.
  if (level > MAX_LEVEL) {
    return;
  }

  // 현재 레벨의 선분을 그립니다.
  line(x1, y1, x2, y2);

  // 선분의 중점 (Midpoint) 계산
  let midX = (x1 + x2) / 2;
  let midY = (y1 + y2) / 2;

  // 중점에서 작은 수직선을 그립니다. (시각적 구분)
  let length = dist(x1, y1, x2, y2);
  line(midX, midY - length * 0.3, midX, midY + length * 0.3);

  // 2. **재귀 호출 (Recursive Call)**:
  // 새로운 두 개의 선분에 대해 함수 자신을 다시 호출합니다.
  // 왼쪽 선분: (x1, y1) ~ (midX, midY)
  divideLine(x1, y1, midX, midY, level + 1);

  // 오른쪽 선분: (midX, midY) ~ (x2, y2)
  divideLine(midX, midY, x2, y2, level + 1);
}

• 하나의 긴 선분 $(x_1, y_1) \to (x_2, y_2)$를 그린 후, 중점을 찾아 두 개의 절반 길이 선분으로 나눕니다. 이 과정을 미리 정해둔 MAX_LEVEL까지 반복합니다.

• MAX_LEVEL: 재귀가 얼마나 깊게 진행될지 결정하는 제한 장치입니다. 이것이 없으면 무한 루프가 발생합니다.

• divideLine(...): 재귀 실행을 위해 작성한 함수입니다. level + 1을 인자로 전달하여 호출될 때마다 깊이가 증가합니다.

2. Recursive Tree

재귀를 이용하여 자연의 프랙탈 구조를 흉내 내는 대표적인 예제입니다. 재귀 호출마다 회전(Rotation)과 축소(Scaling)가 적용되어 복잡한 모양을 만듭니다.

하얀 라인으로만 만든 간단한 recursive tree의 코드는 아래와 같습니다.

function setup() {
  createCanvas(500, 300);
  noLoop();
  background(10);
  stroke(220);
  translate(width / 2, height);
  branch(100);
}

function branch(len) {
  line(0, 0, 0, -len);
  translate(0, -len);
  if (len > 8) {
    push();
    rotate(PI / 6);
    branch(len * 0.67);
    pop();

    push();
    rotate(-PI / 4);
    branch(len * 0.67);
    pop();
  }
}

이건 중앙/왼/오른쪽 가지를 따로 만드는 간단한 예시입니다.

// 2_recursive_tree_1
function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  noLoop();
}

function draw() {
  background(15);
  translate(width / 2, height);
  stroke(80, 150, 100);
  strokeWeight(2);
  drawBranch(140, 10);
}

function drawBranch(len, depth) {
  // base
  line(0, 0, 0, -len);
  translate(0, -len);

  if (depth <= 0) {
    // 잎
    noStroke();
    fill(200, 200, 200);
    ellipse(0, 0, 5, 5);
    stroke(20);
    return;
  }

  // 왼쪽 가지
  push();
  rotate(-20 - depth * 1.5);
  drawBranch(len * 0.7, depth - 1);
  pop();

  // 오른쪽 가지
  push();
  rotate(20 + depth * 1.5);
  drawBranch(len * 0.7, depth - 1);
  pop();

  // 중앙 가지 : 0 대신 다른 값을 넣으면 살짝 방향 전환
  push();
  rotate(map(sin(depth * 2), 0, 0, -5, 5));
  drawBranch(len * 0.66, depth - 1);
  pop();

  // 돌아오기
  translate(0, len);
}

조금 더 꾸며보면 이렇게 할 수도 있습니다.

// 2_recursive_tree_1
let branchLength = 100;

function setup() {
  createCanvas(800, 400);
  angleMode(DEGREES); // 각도 단위를 degree로 설정
  stroke(10, 180, 170, 50);
  strokeWeight(3);
}

function draw() {
  background(25);
  translate(width / 2, height); // 그림의 원점을 캔버스 하단 중앙으로 이동

  // 재귀 함수 호출 시작: 초기 길이와 깊이
  drawBranch(branchLength, 0);
}

/**
 * 가지를 재귀적으로 그리는 함수
 * @param {number} len 현재 가지의 길이
 * @param {number} level 현재 재귀 깊이 (선택 사항이지만 명시적으로 추가)
 */
function drawBranch(len, level) {
  // 1. 현재 가지(선)를 그립니다. (원점 (0,0)에서 위로)
  line(0, 0, 0, -len);

  // 이 시점에서 좌표계는 가지의 끝점 (-len)으로 이동해야 합니다.
  translate(0, -len);

  // 2. **종료 조건 (Base Case)**:
  // 가지의 길이가 너무 짧아지면 (예: 3 픽셀 미만) 재귀를 멈춥니다.
  if (len < 3) {
    // 잎사귀처럼 작은 점을 찍어 마무리
    stroke(50, 200, 50); // 녹색
    point(0, 0);
    return;
  }

  // 3. **재귀 호출 (Recursive Call)**:

  // A. 오른쪽 가지
  push(); // 현재 좌표계 상태(위치/회전) 저장
  rotate(30); // 30도 오른쪽으로 회전
  drawBranch(len * 0.8, level + 1); // 길이 80%로 줄이고 재귀 호출
  pop(); // 저장된 상태로 복원

  // B. 왼쪽 가지
  push(); // 현재 좌표계 상태 저장
  rotate(-55); // -65도 왼쪽으로 회전
  drawBranch(len * 0.6, level + 1); // 길이 60%로 줄이고 재귀 호출
  pop(); // 저장된 상태로 복원
}

• 핵심 작동 원리: 가지를 그린 후, p5.js의 변환 함수(translate, rotate, push/pop)를 사용하여 가지의 끝점에서 좌표계를 회전시키고, 더 짧은 길이로 두 번 재귀 호출을 합니다. push()와 pop()은 복잡한 변환이 중첩될 때 좌표계를 이전 상태로 되돌리는 데 필수적입니다.

• 주요 변수/함수:

  • angleMode(DEGREES): 각도를 다루기 쉽게 도(Degree) 단위로 설정합니다.
  • translate(width/2, height): 그림 시작점을 화면 하단 중앙으로 이동시켜 땅에서 올라오도록 합니다.
  • drawBranch(...): 재귀 함수로, 호출될 때마다 길이가 줄어들고 회전합니다.
  • push()/pop(): 매우 중요합니다. 재귀 호출 전에 현재 위치와 회전 상태를 저장하고, 재귀 호출이 끝난 후 원래 위치로 돌아오게 합니다.

3. Recursive Circles

// ArtCode Mentor | p5.js Recursion Example 3 - Modified (Dynamic Radius Scaling)
// 목적: 재귀 깊이에 따라 반지름 축소 비율(Scaling Factor)과 투명도(Alpha)를 모두 조절
// p5.js 최신 안정화 버전 기반

const START_RADIUS = 150; // 시작 원의 반지름
const MAX_LEVEL = 5; // 최대 재귀 깊이 제한

function setup() {
  createCanvas(800, 400);
  noLoop();
  angleMode(DEGREES);
  noStroke();
}

function draw() {
  background(15);
  translate(width / 2, height / 2);

  // 재귀 함수 호출 시작 (중심점, 반지름, 현재 깊이)
  drawRecursiveCircles(0, 0, START_RADIUS, 1);
}

/**
 * 재귀적으로 원을 그리고 깊이에 따라 색상 투명도와 다음 반지름 축소 비율을 적용하는 함수
 * @param {number} x 중심 x 좌표
 * @param {number} y 중심 y 좌표
 * @param {number} radius 현재 원의 반지름
 * @param {number} level 현재 재귀 깊이 (1부터 시작)
 */
function drawRecursiveCircles(x, y, radius, level) {
  // 1. **종료 조건 (Base Case)**:
  if (radius < 2 || level > MAX_LEVEL) {
    // 최소 반지름을 4로 조정
    return;
  }

  // --- 색상 (투명도는 이전과 동일하게 깊이에 따라 적용) ---
  // 깊이가 깊을수록 투명해지도록 alpha 설정 (255 -> 50)
  let alpha = map(level, 1, MAX_LEVEL, 170, 20);
  fill(10, 190, 180, alpha); // 주황색 계열

  // 현재 원을 그립니다.
  ellipse(x, y, radius * 2);

  // --- 반지름 축소 비율 동적 계산 ---
  // 깊이(level)에 따라 다음 반지름의 축소 비율(Scaling Factor)을 결정합니다.
  // level 1: 축소 비율 0.35 (많이 줄어듦)
  // level MAX_LEVEL: 축소 비율 0.85 (상대적으로 적게 줄어듦)
  let scalingFactor = map(level, 1, MAX_LEVEL, 0.5, 0.35);

  // 다음 재귀 호출을 위한 새 반지름
  let nextRadius = radius * scalingFactor;

  // --- 재귀 호출 ---
  let angleIncrement = 60;
  let offset = radius;

  for (let angle = 0; angle < 360; angle += angleIncrement) {
    let newX = x + cos(angle) * offset;
    let newY = y + sin(angle) * offset;

    // 새로운 위치, 동적 축소된 반지름, 깊이 증가로 재귀 호출
    drawRecursiveCircles(newX, newY, nextRadius, level + 1);
  }
}

4. Recursive Spiral (Polygonal)

선분을 그리고 외곽에서부터 안쪽으로 점점 변의 길이가 줄어들면서 꺾이도록 하면 각진 나선이 만들어집니다. 꺾이는 각도는 360도를 꼭짓점 개수로 나누어서 쉽게 구하고 최초 시작 선분의 길이에 맞추어서 시작점을 이동시키면 중앙 정렬이 가능합니다. 아래 코드에서는 선분의 길이가 특정 값이 되면 재귀를 멈추는 로직을 넣었고, 외곽부터 안쪽까지 선분은 점차 얇아집니다.

const NUM_SIDES = 6;         // 다각형의 꼭짓점 개수
const START_LENGTH = 400;    // 나선의 가장 바깥쪽 변의 시작 길이
const LENGTH_DECREMENT = 8;  // 매번 길이가 줄어드는 고정 값
const MIN_LENGTH = 2;        // 나선이 멈추는 최소 길이
const MIN_WEIGHT = 0.3;      // 선분의 최소 두께
const MAX_WEIGHT = 4         // 선문의 최대 두께

// 정다각형의 외각 (External Angle) = 360도 / 꼭짓점 개수
const TURN_ANGLE = 360 / NUM_SIDES;

function setup() {
  createCanvas(800, 400);
  noLoop();
  angleMode(DEGREES); // 회전을 위해 DEGREE 모드 사용

  background(5);

  // 선분의 두께 때문에 캔버스 밖으로 나가지 않도록 시작점을 두께만큼 이동
  // 선분의 시작점을 최초선분 길이만큼 이동시켜서 나선 중심이 캔버스 중심에 오도록
  // y축은 필요에 따라 식 추가
  translate(-2 * MAX_WEIGHT + START_LENGTH / 2, MAX_WEIGHT); 
  // 재귀 함수 호출 시작 (현재 길이, 현재 단계)
  drawPolygonalSpiral(START_LENGTH, 0);
}

/**
 * 다각형 나선 패턴을 재귀적으로 그리는 함수
 * @param {number} len 현재 선분의 길이
 * @param {number} step 현재 재귀 단계 (0부터 시작)
 */
function drawPolygonalSpiral(len, step) {
  // 1. **종료 조건 (Base Case)**:
  if (len <= MIN_LENGTH) {
    return;
  }

  // 2. **선 스타일 설정**:
  // 깊이에 따라 선 두께와 색상 설정
  let weight = map(len, MIN_LENGTH, START_LENGTH, MIN_WEIGHT, MAX_WEIGHT);
  strokeWeight(weight);
  stroke(60, 190, 180, 255);

  // 3. **다각형 그리기 및 변환**:

  // N각형 나선은 N개의 변을 순서대로 그리며 나아가야 합니다.
  // 사각형 나선(N=4)에서는 4개의 방향을 if/else if로 처리했지만,
  // N각형에서는 for 루프와 p5.js의 'rotate'를 활용하여 일반화합니다.

  // 현재 길이와 방향으로 하나의 변을 그립니다.
  line(0, 0, len, 0);

  // 다음 변을 그릴 위치로 원점 이동
  // (0, 0)에서 그린 선분의 끝점 (len, 0)으로 이동합니다.
  translate(len, 0);

  // 4. **회전 (Rotation)**:
  // 다음 변을 그리기 위해 좌표계를 'TURN_ANGLE'만큼 회전시킵니다.
  // 이는 N각형의 외각만큼 꺾는 효과를 줍니다.
  rotate(TURN_ANGLE);

  // 5. **길이 업데이트**:

  let nextLength = len;

  // 사각형 나선(N=4)에서는 2단계마다 길이를 줄였지만,
  // 일반적인 다각형 나선에서는 각 변을 그린 후 길이를 줄이는 것이 자연스럽습니다.
  // 그러나 원본 사각형 나선의 '두 변마다 길이 감소' 로직을 유지하여 나선 구조를 만듭니다.
  if (step % (NUM_SIDES / 2) === 0) {
    nextLength = len - LENGTH_DECREMENT;
  }

  // 6. **재귀 호출**:
  // 길이는 업데이트하되, 회전 각도는 계속 누적하여 적용합니다.
  drawPolygonalSpiral(nextLength, step + 1);
}