🎓11주차: 카오스(Chaos)

"단순한 규칙이 만들어내는 예측 불가능한 복잡한 행동, 하지만 그 속에서 발견되는 숨겨진 패턴"이에요.
이것은 날씨, 주식 시장, 심장 박동, 난류 등 자연의 복잡한 현상을 설명하는 핵심 개념입니다.

항목	내용
이름	Chaos Theory (카오스 이론)
의미	결정론적이지만 예측 불가능한 시스템의 행동을 연구하는 이론
핵심 아이디어	초기 조건의 미세한 차이가 시간이 지나면서 엄청나게 다른 결과를 만듦 (나비효과)
결과 패턴	무질서해 보이지만 일정한 구조(어트랙터)를 가진 패턴
관련 개념	나비효과(butterfly effect), 스트레인지 어트랙터(strange attractor), 초기 조건 민감성

---

📖 카오스의 기본 원리

1️⃣ 결정론적 시스템
→ 명확한 규칙에 따라 움직임
→ 랜덤이 아니라 수학적 공식으로 정의됨

2️⃣ 초기 조건 민감성 (나비효과)
→ 시작점의 아주 작은 차이가 결과를 완전히 바꿈
→ "베이징의 나비 한 마리가 뉴욕에 폭풍을 만든다"

3️⃣ 장기 예측 불가능
→ 규칙을 알아도 미래를 정확히 예측할 수 없음
→ 컴퓨터로도 계산의 한계가 있음

4️⃣ 스트레인지 어트랙터
→ 무질서 속에서 발견되는 숨겨진 구조
→ 시스템이 특정 패턴으로 수렴하려는 경향

5️⃣ 프랙탈 구조
→ 카오스 시스템은 종종 프랙탈 패턴을 생성
→ 어떤 스케일에서 보든 비슷한 구조가 반복됨

---

🔗 자연 현상과의 연결

🌪️ 날씨	초기 조건에 따라 예측이 며칠 이상 불가능
💧 난류	물이나 공기의 복잡한 소용돌이 패턴
💓 심장 박동	건강한 심장은 약한 카오스 패턴을 보임
🌊 주식 시장	무수히 많은 요인이 얽혀 예측 불가능
🪐 3체 문제	세 개의 천체가 만드는 카오스적 궤도

---

🔹 예제 1: 로지스틱 맵 (Logistic Map)

로지스틱 맵은 원래 개체군 동태(Population Dynamics)를 모델링하기 위해 생물학에서 도입된 단순한 1차원 반복 방정식(Iterative Equation)입니다.

1. 로지스틱 방정식

코드가 사용하는 핵심 수식은 다음과 같습니다:

$x_{n+1} = r x_n (1 - x_n)$

• $x_n$ (개체군 밀도/비율): 현재 시점($n$)의 개체군 크기를 최대 개체군 크기에 대한 비율로 나타낸 값입니다. 이 값은 0과 1 사이의 값을 가집니다 ($0 \le x \le 1$). 코드에서는 x 변수에 해당합니다.
• $x_{n+1}$: 다음 시점($n+1$)의 개체군 밀도입니다.
• $r$ (성장률 파라미터): 개체군의 성장률과 자원 제약(resource limitation)의 복합적인 영향을 나타내는 파라미터입니다. 코드에서는 r 변수에 해당하며, 마우스 움직임으로 0부터 4까지 조정됩니다.

2. 방정식의 의미

이 방정식은 개체군의 성장을 다음 두 가지 요소로 설명합니다:

• 성장 (Growth): $r x_n$ 부분은 개체수가 많아질수록 증가하는 성장을 나타냅니다. $r$ 값이 클수록 다음 세대의 개체수가 더 커집니다.
• 제한 (Limitation): $(1 - x_n)$ 부분은 환경 용량(carrying capacity)에 의한 성장 제한을 나타냅니다. $x_n$이 1(최대치)에 가까워질수록 이 항은 0에 가까워져 개체군 성장을 억제합니다.

아래의 p5.js 코드는 $r$ 값에 따른 개체군 밀도($x$)의 시간 흐름을 그래프로 시각화합니다.

• $r$ 값 조정: r = map(mouseX, 0, width, 0, 4); 코드를 통해 마우스의 가로 위치(mouseX)를 0부터 4까지의 $r$ 값으로 변환합니다.
• 반복 계산: x = r * x * (1 - x); 코드가 draw() 함수(프레임마다 실행) 내에서 반복적으로 실행되며 $x$ 값을 업데이트합니다. 이것이 로지스틱 맵의 반복 과정입니다.
• 그래프 생성: 계산된 $x$ 값은 points 배열에 추가되고, 화면을 넘어가는 오래된 값은 제거됩니다 (points.shift()).
• 시각화: beginShape()와 endShape()를 사용하여 배열의 값들을 왼쪽에서 오른쪽으로 연결된 선으로 그립니다.
  • 가로축(x축)은 시간의 흐름 (혹은 반복 횟수)을 나타냅니다.
  • 세로축(y축)은 개체군 밀도 $x$의 값 (0부터 1 사이)을 나타냅니다.

let r = 2.8; // 성장률 파라미터
let x = 0.5; // 초기값
let points = [];
const BURN_IN = 50; // 초기값 50회 계산 건너뛰기
let counter = 0; // 반복 횟수 카운터

function setup() {
  createCanvas(800, 400);
  background(0);
  frameRate(60); // 계산 속도를 좀 늦춰서 시각화에 도움을 줍니다.
}

function draw() {
  // 1. 잔상없이 매 프레임 갱신
  background(0);

  // 2. 마우스로 r 값 조정
  r = map(mouseX, 0, width, 0.0, 4.0);

  // 3. 로지스틱 방정식 계산
  // 3-1. 초기값 계산 건너뛰기 (BURN-IN):
  // x의 궤적이 안정점에 충분히 도달하도록 합니다.
  if (counter < BURN_IN) {
    x = r * x * (1 - x);
    counter++;
    // 이 단계에서는 점을 그리지 않습니다.
  } else {
    // 3-2. 로지스틱 맵 반복
    x = r * x * (1 - x);

    // 4. 그래프에 점 추가
    points.push(x);
    if (points.length > width) {
      points.shift();
    }
  }

  // 5. 그리기
  stroke(30, 190, 180);
  strokeWeight(2);
  noFill();
  beginShape();
  for (let i = 0; i < points.length; i++) {
    let px = i;
    // Y축 매핑을 좀 더 보기 쉽게 조정
    let py = map(points[i], 0, 1, height, 0);
    vertex(px, py);
  }
  endShape();

  // 6. 정보 표시 (생략 없이 원래 코드 유지)
  fill(255);
  noStroke();
  textAlign(LEFT);
  text("r = " + nf(r, 1, 3), 10, 20);
  text("x = " + nf(x, 1, 5), 10, 40);

  textAlign(CENTER);
  text("마우스를 좌우로 움직여 r 값을 변경하세요", width / 2, height - 10);

  // 7. r 값에 따른 상태 설명
  fill(200, 200, 30);
  textAlign(RIGHT);
  if (r < 1) {
    text("멸종", width - 10, 20);
  } else if (r < 3) {
    text("안정", width - 10, 20);
  } else if (r < 3.57) {
    text("진동", width - 10, 20);
  } else {
    text("카오스!", width - 10, 20);
  }
}

// 마우스를 떼면 x를 초기화하여 BURN-IN 과정을 다시 시작
function mouseReleased() {
  x = 0.5;
  points = [];
  counter = 0;
}

---

🔹 예제 2: 로렌츠 어트랙터 (Lorenz Attractor)

로렌츠 어트랙터는 1963년 기상학자 에드워드 로렌츠(Edward Lorenz)가 대기의 대류(convection) 현상을 모델링하기 위해 단순화한 세 개의 비선형 미분 방정식에서 탄생했습니다.

1. 로렌츠 방정식 (Lorentz Equations)

코드가 사용하는 세 개의 비선형 미분 방정식은 다음과 같습니다:

$\begin{cases} \frac{dx}{dt} = \sigma (y - x) \\ \frac{dy}{dt} = x (\rho - z) - y \\ \frac{dz}{dt} = x y - \beta z \end{cases}$

코드는 이 미분 방정식을 시간 간격 $dt$ 동안 근사적으로 계산하는 오일러 방법(Euler Method)을 사용하고 있습니다:
dx = a (y - x) dt;
dy = (x (b - z) - y) dt;
dz = (x y - c z) * dt;
여기서 $a$, $b$, $c$는 시스템의 파라미터이며, 각각 $\sigma$ (시그마), $\rho$ (로), $\beta$ (베타)에 해당합니다.

2. 로렌츠 어트랙터와 카오스

로렌츠 어트랙터는 이상한 끌개(Strange Attractor)의 가장 유명한 예시입니다.

🌀이상한 끌개 (Strange Attractor)

• 끌개(Attractor): 시스템의 상태를 나타내는 점 $(x, y, z)$가 시간이 흐름에 따라 수렴하거나 안정적으로 움직이는 공간상의 패턴입니다.
• 이상한(Strange): 로렌츠 어트랙터의 궤적은 프랙탈 구조(Fractal Structure)를 가집니다. 즉, 아무리 확대해도 자기 유사성(Self-Similarity)을 가지는 복잡한 구조를 보입니다.

시각적으로 이 어트랙터는 두 개의 날개를 가진 나비 모양처럼 보입니다. 시스템의 상태는 두 날개 사이를 끊임없이 불규칙하게 순환하며 궤적을 남깁니다.

🌀카오스의 특징 (나비 효과의 시초)

로렌츠 어트랙터의 카오스적 행동은 로지스틱 맵과 마찬가지로 초기 조건에 대한 극도의 민감성으로 설명됩니다.

• 발견 배경: 로렌츠가 초기값을 소수점 6자리 대신 3자리로 반올림하여 계산을 시작했을 때, 시간이 지나자 완전히 다른 결과를 얻었습니다. 이 작은 차이가 엄청난 차이를 낳는 현상을 후에 나비 효과(Butterfly Effect)라고 명명했습니다.
• 카오스적 궤적: 궤적은 끌개라는 제한된 공간 안에 머무르지만, 절대 자기 자신을 반복하지 않습니다 (비주기적). 두 개의 날개 중 어느 쪽으로 얼마나 머무를지 예측하는 것은 불가능합니다.

🌀코드의 시각화
코드는 이 3차원 궤적을 시각화합니다.

• 점 계산: 매 draw() 루프마다 새로운 $(x, y, z)$ 좌표가 계산되어 points 배열에 추가됩니다.
• 3D 캔버스: createCanvas(800, 600, WEBGL);로 3D 환경을 설정합니다.
• 궤적 그리기: beginShape()와 vertex(v.x * 5, v.y * 5, v.z * 5);를 사용하여 연속된 점들을 선으로 연결하여 궤적을 그립니다.
• 색상: colorMode(HSB);와 stroke(hu, 255, 255, 200);를 사용하여 시간이 지남에 따라 궤적의 색상이 변화하도록 만들어 시각적인 깊이와 흐름을 더합니다.

결과적으로 화면에는 두 개의 중심을 가진 아름답고 복잡한 나비 모양의 궤적이 그려지게 됩니다. 이는 단순한 세 개의 규칙으로 인해 발생하는 무한히 복잡하고 비반복적인 패턴을 시각적으로 보여주는 것입니다.

let x = 0.01;
let y = 0;
let z = 0;

let a = 10;    // 시그마
let b = 28;    // 로
let c = 8 / 3; // 베타

let points = [];
let dt = 0.01;

function setup() {
  createCanvas(800, 600, WEBGL);
  colorMode(HSB);
}

function draw() {
  background(0);

  // 로렌츠 방정식
  let dx = a * (y - x) * dt;
  let dy = (x * (b - z) - y) * dt;
  let dz = (x * y - c * z) * dt;

  x += dx;
  y += dy;
  z += dz;

  points.push(createVector(x, y, z));

  // 최대 점 개수 제한
  if (points.length > 3000) {
    points.shift();
  }

  // 카메라 회전
  rotateY(frameCount * 0.003);
  rotateX(-0.5);

  // 점들을 선으로 연결
  strokeWeight(1.5);
  noFill();

  beginShape();
  for (let i = 0; i < points.length; i++) {
    let v = points[i];
    let hue = map(i, 0, points.length, 0, 255);
    stroke(hue, 255, 255, 200);
    vertex(v.x * 5, v.y * 5, v.z * 5);
  }
  endShape();

  // 현재 위치 강조
  push();
  noStroke();
  fill(255);
  translate(x * 5, y * 5, z * 5);
  sphere(3);
  pop();
}

---

🔹 예제 3: 초기 조건 민감성 (나비효과)

세 입자($x, y$)가 미세한 차이에서 출발하여 시간이 지남에 따라 궤적이 급격하게 벌어지는 카오스 시스템의 예시입니다. 이 p5.js 코드는 초기 조건 민감성을 시각화할 뿐만 아니라, 시스템이 얼마나 빠르게 카오스로 이탈하는지를 나타내는 핵심 지표인 리아푸노프 지수(Lyapunov Exponent)를 근사적으로 계산하는 방법을 보여줍니다.

1. 시스템 및 초기 조건

• 시스템: ChaosParticle 클래스 내에서 로지스틱 맵이 두 차원(stateX, stateY)에 독립적으로 적용됩니다.

  • 파라미터 $r$은 3.99로 설정되어, 로지스틱스 맵의 완전한 카오스 영역에 있습니다.

• 핵심 원리:

  1. 초기 상태: 세 입자는 0과 1 사이의 내부 상태 (stateX, stateY)에서 시작하며, 그 차이는 $\mathbf{1.0 \times 10^{-6}}$이라는 극도로 미세한 값입니다.
  2. 토러스 경계 처리: update() 함수에서 위치 경계를 토러스(Torus) 형태로 처리하여, 입자가 화면 가장자리에서 사라지면 반대편에서 나타나 궤적의 연속성을 유지합니다.

• 시각화: 입자의 내부 상태 변화(stateX, stateY)가 입자의 속도(vx, vy)로 변환되어 화면상의 궤적을 만듭니다.

2. 리아푸노프 지수 (Lyapunov Exponent, $\lambda$)의 역할

리아푸노프 지수는 카오스 이론에서 시스템의 예측 불가능성 정도를 나타내는 가장 중요한 척도입니다.

• 정의: 초기 상태가 $\delta_0$만큼 떨어진 두 궤적이 시간이 $t$만큼 지난 후 $\delta_t$만큼 떨어져 있을 때, 지수 $\lambda$는 다음 관계를 가집니다.

  $\delta_t \approx \delta_0 e^{\lambda t}$

• 카오스 판별:
  • $\lambda > 0$ (양수): 시스템은 카오스입니다. 초기 오차가 시간이 지남에 따라 지수적으로 증가하며, 장기 예측이 불가능합니다.
  • $\lambda \le 0$ (음수 또는 0): 시스템은 안정적이거나 주기적입니다.

3. 코드의 리아푸노프 지수 계산

코드에서 리아푸노프 지수를 근사적으로 계산하는 부분은 다음과 같습니다:

// 리아푸노프 지수 계산
if (frameCount > 0 && maxDistance > 0) {
    let lyapunov = Math.log(maxDistance / 0.000001) / frameCount;
    text("리아푸노프 지수: " + nf(lyapunov, 0, 4), 20, 90);
}

이 코드는 위에서 설명한 $\delta_t \approx \delta_0 e^{\lambda t}$ 공식을 $\lambda$에 대해 정리한 후, 이산적인 시간 단계(프레임 수 $t$)에 맞춰 계산합니다.

$\lambda \approx \frac{1}{t} \ln \left( \frac{\delta_t}{\delta_0} \right)$

• $\delta_t$: 현재 입자 간 최대 거리 (maxDistance)로 근사합니다.
• $\delta_0$: 초기 입자 간 거리인 0.000001 (1.0e-6)을 사용합니다.
• $t$: 경과된 프레임 수 (frameCount)를 사용합니다.이 계산은 세 입자의 이탈 속도를 바탕으로 시스템의 카오스 정도를 숫자로 보여주는 것입니다. 시간이 지남에 따라 lyapunov 값이 양수로 안정된다면, 이 로지스틱 맵 시스템은 강력한 카오스적 행동을 한다는 것을 의미합니다.

let particles = [];
let maxDistance = 0;

function setup() {
  createCanvas(800, 600);
  colorMode(RGB);

  // 0.5를 피한 비대칭적인 초기 상태
  let baseStateX = 0.3;
  let baseStateY = 0.9;
  let epsilon = 0.000001; // 매우 작은 초기 차이

  // 세 개의 입자 생성 - 각각 미세하게 다른 초기 상태
  particles.push(new ChaosParticle(baseStateX, baseStateY, color(255, 0, 0)));
  particles.push(
    new ChaosParticle(baseStateX + epsilon, baseStateY, color(0, 255, 0))
  );
  particles.push(
    new ChaosParticle(baseStateX, baseStateY + epsilon, color(0, 0, 255))
  );
}

function draw() {
  // 반투명 배경 (잔상 효과)
  background(0, 25);

  // 입자 업데이트 및 표시
  for (let p of particles) {
    p.update();
    p.show();
  }

  // 입자들 간의 최대 거리 계산
  maxDistance = 0;
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      let d = dist(
        particles[i].x,
        particles[i].y,
        particles[j].x,
        particles[j].y
      );
      maxDistance = max(maxDistance, d);
    }
  }

  // 정보 표시
  fill(255);
  noStroke();
  textSize(14);
  textAlign(LEFT);
  text("초기 상태 차이: 1.0e-6", 20, 30);
  text("경과 시간: " + nf(frameCount / 60, 0, 1) + "초", 20, 50);
  text("입자 간 최대 거리: " + nf(maxDistance, 0, 1) + "px", 20, 70);

  // 리아푸노프 지수 계산
  if (frameCount > 0 && maxDistance > 0) {
    let lyapunov = Math.log(maxDistance / 0.000001) / frameCount;
    text("리아푸노프 지수: " + nf(lyapunov, 0, 4), 20, 90);
  }

  // 설명
  textSize(12);
  fill(200);
  text("빨강, 초록, 파랑: 10⁻⁶ 차이로 시작한 세 입자", 20, height - 40);
  text("로지스틱 맵 (r=3.99) 사용 - 완전한 카오스 영역", 20, height - 20);
}

// 로지스틱 맵 함수
function logisticMap(x, r) {
  return r * x * (1 - x);
}

class ChaosParticle {
  constructor(stateX, stateY, col) {
    // 로지스틱 맵의 내부 상태 (0~1 사이)
    this.stateX = stateX;
    this.stateY = stateY;

    // 화면 위치
    this.x = width / 2;
    this.y = height / 2;

    this.col = col;
    this.trail = [];

    // 카오스 파라미터
    this.r = 3.99; // 완전한 카오스 영역
  }

  update() {
    // 로지스틱 맵을 각 차원에 독립적으로 적용
    this.stateX = logisticMap(this.stateX, this.r);
    this.stateY = logisticMap(this.stateY, this.r);

    // 상태를 속도로 변환 (-1 ~ 1 범위를 -4 ~ 4로 확대)
    let vx = (this.stateX - 0.5) * 8;
    let vy = (this.stateY - 0.5) * 8;

    // 위치 업데이트
    this.x += vx;
    this.y += vy;

    // 화면 경계 처리 (토러스 형태)
    if (this.x < 0) this.x = width;
    if (this.x > width) this.x = 0;
    if (this.y < 0) this.y = height;
    if (this.y > height) this.y = 0;

    // 궤적 저장
    this.trail.push(createVector(this.x, this.y));
    if (this.trail.length > 100) {
      this.trail.shift();
    }
  }

  show() {
    // 궤적 그리기
    if (this.trail.length > 1) {
      stroke(red(this.col), green(this.col), blue(this.col), 64);
      strokeWeight(1);
      noFill();
      beginShape();
      for (let v of this.trail) {
        vertex(v.x, v.y);
      }
      endShape();
    }

    // 현재 위치
    fill(this.col);
    noStroke();
    circle(this.x, this.y, 6);
  }
}

// 마우스 클릭으로 재시작
function mousePressed() {
  setup();
}

---

🔹 예제 4: 이중 진자(Double Pendulum)

이중 진자는 두 개의 진자(pendulum)가 차례로 연결되어 있는 시스템입니다. 첫 번째 진자가 고정된 점에 매달려 있고, 두 번째 진자가 첫 번째 진자의 끝에 매달려 있습니다. 이중 진자는 단순한 물리 법칙으로도 얼마나 복잡하고 예측 불가능한 움직임, 즉 카오스(Chaos)가 발생할 수 있는지 보여주는 대표적인 예시입니다.

1. 카오스 시스템으로서의 이중 진자

• 비선형성: 이중 진자의 움직임을 지배하는 운동 방정식은 삼각 함수(sin, cos)를 포함하는 복잡한 비선형 미분 방정식입니다.
• 카오스 발생: 단일 진자는 항상 예측 가능한 주기적인 운동(진동)을 하지만, 이중 진자는 에너지 손실(감쇠)이 없다면 대부분의 초기 조건에서 카오스적인, 비주기적인(Aperiodic) 움직임을 보입니다.

2. 코드의 핵심 방정식

코드가 angleA1과 angleA2를 계산하는 부분은 이중 진자의 각가속도($\ddot{\theta}_1$, $\ddot{\theta}_2$)를 구하는 복잡한 공식입니다.

$\ddot{\theta}_1 = \frac{-g(2m_1+m_2)\sin\theta_1 - m_2 g \sin(\theta_1 - 2\theta_2) - 2 \sin(\theta_1 - \theta_2) m_2 (\dot{\theta}_2^2 r_2 + \dot{\theta}_1^2 r_1 \cos(\theta_1 - \theta_2))}{r_1 (2m_1+m_2 - m_2 \cos(2\theta_1 - 2\theta_2))}$

$\ddot{\theta}_2 = \frac{2 \sin(\theta_1 - \theta_2) (\dot{\theta}_1^2 r_1 (m_1+m_2) + g (m_1+m_2) \cos\theta_1 + \dot{\theta}_2^2 r_2 m_2 \cos(\theta_1 - \theta_2))}{r_2 (2m_1+m_2 - m_2 \cos(2\theta_1 - 2\theta_2))}$

• $\theta_1, \theta_2$ (angle1, angle2): 각 막대의 수직선과의 각도.
• $\dot{\theta}_1, \dot{\theta}_2$ (angleV1, angleV2): 각속도.
• $\ddot{\theta}_1, \ddot{\theta}_2$ (angleA1, angleA2): 각가속도.

이 복잡한 계산을 통해 각가속도를 구하고, 이를 시간에 따라 적분하여 각속도와 각도를 업데이트합니다:

angleV1 += angleA1; // 각가속도를 각속도에 더함
angleV2 += angleA2;
angle1 += angleV1;  // 각속도를 각도에 더함
angle2 += angleV2;

3. 초기 조건 민감성 (나비 효과) 시연

이중 진자는 로렌츠 어트랙터, 로지스틱 맵과 마찬가지로 초기 조건 민감성을 극적으로 보여줍니다.

• mousePressed() 함수:

angle1 = PI / 2 + random(-0.1, 0.1);
angle2 = PI / 2 + random(-0.1, 0.1);

이 코드는 마우스를 클릭할 때마다 $\pi/2$ (수평) 위치를 기준으로 -0.1에서 0.1 라디안 사이의 매우 작은 무작위 편차를 초기 각도에 부여합니다.

• 시각화: 두 번째 질점(m2)의 궤적을 trail 배열에 저장하고 화면에 그립니다. 클릭 후 몇 초 동안은 궤적이 비슷하게 보일 수 있지만, 시간이 지남에 따라 다른 클릭에서 시작된 궤적과는 완전히 다른 패턴을 생성하며 예측 불가능하게 움직이는 것을 볼 수 있습니다.

4. 감쇠 처리

angleV1 *= 0.999;
angleV2 *= 0.999;

이 코드는 각속도에 0.999를 곱하여 공기 저항이나 마찰로 인한 감쇠(Damping)를 모방합니다. 감쇠가 없다면 에너지가 보존되어 영원히 움직이지만, 현실적인 감쇠가 들어가면 복잡한 움직임을 보이다가 결국 에너지를 잃고 멈추게 됩니다.

5. 이후 발전 방향

현재는 궤적이 단색이지만, 궤적의 속도(angleV2)에 따라 색상을 변화시키거나, 궤적의 밀도를 이용하여 질감 있는 배경을 생성하는 데 활용할 수 있습니다.
또 삼중 진자(Triple Pendulum)로 확장하여 카오스 효과를 더욱 증폭시킬 수도 있습니다.

let angle1 = Math.PI / 2;
let angle2 = Math.PI / 2;
let angleV1 = 0;
let angleV2 = 0;
let angleA1 = 0;
let angleA2 = 0;

let r1 = 125; // 첫 번째 막대 길이
let r2 = 145; // 두 번째 막대 길이
let m1 = 20;  // 첫 번째 질량
let m2 = 30;  // 두 번째 질량
let g = 1;    // 중력

let cx, cy;
let trail = [];

function setup() {
  createCanvas(800, 600);
  cx = width / 2;
  cy = 150;
}

function draw() {
  background(0, 20); // 잔상 효과

  // 더블 펜듈럼 운동 방정식 (복잡한 카오스 시스템)
  let num1 = -g * (2 * m1 + m2) * sin(angle1);
  let num2 = -m2 * g * sin(angle1 - 2 * angle2);
  let num3 = -2 * sin(angle1 - angle2) * m2;
  let num4 =
    angleV2 * angleV2 * r2 + angleV1 * angleV1 * r1 * cos(angle1 - angle2);
  let den = r1 * (2 * m1 + m2 - m2 * cos(2 * angle1 - 2 * angle2));
  angleA1 = (num1 + num2 + num3 * num4) / den;

  num1 = 2 * sin(angle1 - angle2);
  num2 = angleV1 * angleV1 * r1 * (m1 + m2);
  num3 = g * (m1 + m2) * cos(angle1);
  num4 = angleV2 * angleV2 * r2 * m2 * cos(angle1 - angle2);
  den = r2 * (2 * m1 + m2 - m2 * cos(2 * angle1 - 2 * angle2));
  angleA2 = (num1 * (num2 + num3 + num4)) / den;

  angleV1 += angleA1;
  angleV2 += angleA2;
  angle1 += angleV1;
  angle2 += angleV2;

  // 감쇠 (에너지 손실)
  angleV1 *= 0.999;
  angleV2 *= 0.999;

  // 좌표 계산
  let x1 = r1 * sin(angle1) + cx;
  let y1 = r1 * cos(angle1) + cy;

  let x2 = x1 + r2 * sin(angle2);
  let y2 = y1 + r2 * cos(angle2);

  // 궤적 저장
  trail.push(createVector(x2, y2));
  if (trail.length > 500) {
    trail.shift();
  }

  // 궤적 그리기
  stroke(30, 210, 180, 100);
  strokeWeight(2);
  noFill();
  beginShape();
  for (let v of trail) {
    vertex(v.x, v.y);
  }
  endShape();

  // 펜듈럼 그리기
  stroke(255);
  strokeWeight(2);
  line(cx, cy, x1, y1);
  line(x1, y1, x2, y2);

  fill(255);
  circle(cx, cy, 8);

  noStroke();
  fill(255);
  circle(x1, y1, m1);

  noStroke();
  fill(255);
  circle(x2, y2, m2);

  // 정보 표시
  fill(255);
  noStroke();
  textAlign(CENTER);
  text("클릭하면 초기 조건을 리셋합니다", width/2, height-20);
}

function mousePressed() {
  // 초기 조건을 약간 다르게 리셋
  angle1 = PI / 2 + random(-0.1, 0.1);
  angle2 = PI / 2 + random(-0.1, 0.1);
  angleV1 = 0;
  angleV2 = 0;
  trail = [];
}

---

🔹 예제 5: 카오스 게임과 카오스 (Chaos Game and Chaos)

이 코드에서는 카오스 이론과 프랙탈 기하학이 어떻게 밀접하게 연결되어 있는지 보여줍니다.
이 코드가 생성하는 패턴은 대표적인 프랙탈인 시어핀스키 삼각형(Sierpinski Triangle)입니다. 그리고 이 패턴이 '카오스 게임'이라는 이름으로 불리는 이유는 그 생성 과정에 있습니다.

이 코드는 카오스 게임이라는 알고리즘을 구현하며, 이 과정에서 무작위성(Randomness)과 결정론적 구조(Deterministic Structure)가 결합되어 카오스적인 요소가 도입됩니다.

1. 카오스 게임의 규칙 (알고리즘)

• 시작점($P_0$) 설정: 화면 내 임의의 한 점(current)에서 시작합니다.
• 꼭짓점($V_i$) 선택: 사전에 정해진 정삼각형의 꼭짓점 셋 중 하나를 무작위로 (random(vertices)) 선택합니다.
• 점 이동: 현재 점($P_n$)에서 선택된 꼭짓점($V_i$) 방향으로 일정 비율(0.5) 만큼만 이동하여 다음 점($P_{n+1}$)을 결정합니다.
  • 이 과정이 바로 코드의 핵심입니다: current = lerp(current.x, vertex.x, 0.5);

2. 왜 '카오스 게임'인가?

이 알고리즘이 '카오스'와 관련되는 이유는 다음과 같습니다.

• 무작위성 (카오스적 요소): 점을 이동시킬 다음 꼭짓점을 매번 무작위로 선택하는 과정이 있습니다. 이 무작위성이 이름에 '카오스'가 붙은 주된 이유입니다. 다음 점이 어디로 이동할지 단기적으로 예측하는 것은 불가능합니다.
• 놀라운 결과 (결정론적 구조): 하지만 이 무작위적인 과정을 수천 번 이상 반복하면, 점들은 놀랍게도 반드시 시어핀스키 삼각형이라는 고도로 질서정연하고 복잡한 구조를 형성합니다.

즉, 카오스 게임은 단기적으로는 무작위성(카오스)을 보이지만, 장기적으로는 고정된 패턴(어트랙터/프랙탈)으로 수렴하는, 질서 속의 무질서를 보여주는 시스템입니다.

이 코드의 카오스 게임은 정삼각형(3개의 꼭짓점)을 사용하지만, 사각형(4개의 꼭짓점)을 사용하면 시어핀스키 카펫(Sierpinski Carpet)이, 혹은 5개 이상의 꼭짓점을 사용하여 다른 규칙(예: 바로 전에 선택한 꼭짓점을 다시 선택하지 않음)을 적용하면 더욱 흥미롭고 복잡한 프랙탈 패턴을 만들 수 있습니다.

let points = [];
let current;
let vertices = [];

function setup() {
  createCanvas(800, 800);
  background(0);
  
  // 정삼각형의 세 꼭짓점
  vertices.push(createVector(width / 2, 50));
  vertices.push(createVector(50, height - 50));
  vertices.push(createVector(width - 50, height - 50));
  
  // 임의의 시작점
  current = createVector(random(width), random(height));
}

function draw() {
  // 매 프레임마다 여러 점을 찍어 빠르게 패턴 생성
  for (let i = 0; i < 100; i++) {
    stroke(0, 255, 200);
    strokeWeight(1);
    point(current.x, current.y);
    
    // 무작위로 꼭짓점 하나 선택
    let vertex = random(vertices);
    
    // 현재 점과 선택된 꼭짓점의 중점으로 이동
    current.x = lerp(current.x, vertex.x, 0.5);
    current.y = lerp(current.y, vertex.y, 0.5);
  }
  
  // 꼭짓점 표시
  fill(255);
  noStroke();
  for (let v of vertices) {
    circle(v.x, v.y, 10);
  }
  
  // 정보 표시
  if (frameCount < 180) {
    fill(255);
    textAlign(CENTER);
    text("무작위 점이 만드는 프랙탈 패턴", width / 2, 20);
    text("카오스 게임 (Chaos Game)", width / 2, 40);
  }
}

아래는 다각형 카오스 게임의 예시 코드입니다.

let current;
let vertices = [];
let lastVertexIndex = -1; // 이전에 선택된 꼭짓점의 인덱스

function setup() {
  createCanvas(800, 800);
  background(0);

  // 꼭짓점 계산
  let numVertices = 19;
  let radius = 350;
  let center = createVector(width / 2, height / 2);

  for (let i = 0; i < numVertices; i++) {
    let angle = map(i, 0, numVertices, -HALF_PI, TWO_PI - HALF_PI);
    let x = center.x + radius * cos(angle);
    let y = center.y + radius * sin(angle);
    vertices.push(createVector(x, y));
  }

  // 임의의 시작점 (중앙 근처)
  current = createVector(
    center.x + random(-10, 10),
    center.y + random(-10, 10)
  );
}

function draw() {
  // 매 프레임마다 여러 점을 찍어 빠르게 패턴 생성
  for (let i = 0; i < 200; i++) {
    stroke(255, 165, 0); // 색상을 주황색 계열로 변경
    strokeWeight(1);
    point(current.x, current.y);

    // 1. 규칙에 따라 다음 꼭짓점 인덱스 선택
    let nextVertexIndex = selectNextVertexIndex(lastVertexIndex);
    let vertex = vertices[nextVertexIndex];

    // 2. 현재 점과 선택된 꼭짓점의 중점 이동 (황금비 근사치)
    // 비율을 0.5 대신 0.618034로 사용하면 더 정확한 프랙탈이 생성됩니다.
    let moveRatio = 0.618;
    current.x = lerp(current.x, vertex.x, moveRatio);
    current.y = lerp(current.y, vertex.y, moveRatio);

    // 3. 마지막 꼭짓점 인덱스 업데이트
    lastVertexIndex = nextVertexIndex;
  }

  // 꼭짓점 표시
  fill(255);
  noStroke();
  for (let v of vertices) {
    circle(v.x, v.y, 8);
  }
}

// 다음 꼭짓점을 선택하는 함수 (제한 규칙 적용)
function selectNextVertexIndex(lastIndex) {
  let numVertices = vertices.length;
  let availableIndices = [];

  for (let i = 0; i < numVertices; i++) {
    // 1. 이웃한 두 꼭짓점의 인덱스를 계산 (모듈러 연산으로 순환)
    let prevNeighbor = (lastIndex - 1 + numVertices) % numVertices;
    let nextNeighbor = (lastIndex + 1) % numVertices;

    // 2. 현재 선택할 꼭짓점 인덱스가 이웃이 아닌 경우만 허용
    if (i !== prevNeighbor && i !== nextNeighbor) {
      availableIndices.push(i);
    }
  }

  // 허용된 꼭짓점 중에서 무작위로 하나 선택하여 인덱스 반환
  let randomIndex = floor(random(availableIndices.length));
  return availableIndices[randomIndex];
}

// 마우스 클릭으로 재시작
function mousePressed() {
  setup();
}

---

🎨 실험 아이디어

• 로지스틱 맵의 r 값을 천천히 바꾸며 질서→카오스 전환을 관찰하세요
• 더블 펜듈럼의 초기 각도를 0.001도만 바꿔도 궤적이 완전히 달라집니다
• 로렌츠 어트랙터의 파라미터를 변경하면 어떤 모양이 나올까요?
• 카오스 게임을 정사각형, 오각형으로 바꾸면 어떤 프랙탈이 나올까요?