🎓13주차: 형태의 데이터화 (Form as Data)

절차적 왜곡 도형 (Procedural Distorted Polygon)

형태의 데이터화(Form as Data)는 디자인 요소를 픽셀이나 직접적인 점 좌표로 정의하는 대신, 수학 함수, 알고리즘(절차), 또는 외부 데이터(노이즈, 센서 값)를 사용하여 추상적으로 정의하고 제어하는 방식입니다.

이 예제는 다음과 같은 방식으로 "형태를 데이터화"합니다.

1. 수학적 정의: 도형의 모든 점을 극좌표계 (Polar Coordinates, 반지름 r과 각도 angle)라는 데이터로 정의합니다.

2. 절차적 제어: 퍼린 노이즈(Perlin Noise)라는 외부 데이터를 사용하여 이 반지름 r 값을 절차적으로 변형시킵니다.

3. 시간성 결합: draw() 루프를 통해 노이즈 필드를 이동시켜, 형태가 데이터의 변화에 따라 살아있는 것처럼 움직이도록 구현합니다.

// ====== 전역 변수 설정 ======
let W = 700;
let H = 700;
let radius = 200;      // 기본 반지름 (형태의 크기 데이터)
let numPoints = 100;   // 폴리곤을 구성할 점의 개수 (데이터 해상도)
let noiseScale = 0.01; // 노이즈의 스케일 (형태의 거칠기 제어 데이터)
let timeOffset = 0;    // 시간 흐름에 따른 노이즈의 Z축 오프셋

function setup() {
  // 캔버스 생성 및 기본 설정
  createCanvas(W, H);
  background(10); 
  
  // 외곽선과 채우기 색상 설정
  stroke(255, 100, 150);     // 핑크빛 외곽선
  strokeWeight(2);
  fill(255, 100, 150, 50);   // 반투명하게 채우기
}

function draw() {
  // 1. 배경을 반투명하게 덮어 잔상 효과를 만듭니다.
  background(10, 20); 

  // 2. 캔버스 중앙으로 좌표계를 이동합니다.
  translate(width / 2, height / 2); 

  // 3. 절차적 형태 생성 함수 호출
  drawProceduralShape();

  // 4. 시간 경과에 따라 노이즈 필드(Z축)를 이동시켜 형태를 연속적으로 변화시킵니다.
  timeOffset += 0.005;
}

/**
 * 수학적 데이터(극좌표)와 외부 데이터(노이즈)를 이용해 형태를 그립니다.
 */
function drawProceduralShape() {
  beginShape();
  
  // 폴리곤의 모든 점을 순회합니다.
  for (let i = 0; i < numPoints; i++) {
    // 1. 각도 데이터 생성: 0부터 360도(TWO_PI)까지 균등 분할
    let angle = map(i, 0, numPoints, 0, TWO_PI);

    // 2. 노이즈 입력 좌표 데이터 생성 (극좌표 기반)
    // 노이즈 공간을 원형으로 탐색하면서, timeOffset(Z축)을 더해 움직임을 만듭니다.
    let xoff = cos(angle) * noiseScale + timeOffset;
    let yoff = sin(angle) * noiseScale + timeOffset;

    // 3. 노이즈 값 데이터 획득: 노이즈 값(0~1)이 곧 반지름 변형의 데이터입니다.
    let noiseValue = noise(xoff, yoff);

    // 4. 반지름(r) 데이터 변형 및 정의 (절차적 모델링)
    // 노이즈 값을 -30에서 +50 픽셀 범위로 매핑하여 기본 반지름(200)에 더합니다.
    let r = radius + map(noiseValue, 0, 1, -30, 50);

    // 5. 극좌표(r, angle)를 화면 좌표인 직교좌표(x, y)로 변환
    let x = r * cos(angle);
    let y = r * sin(angle);

    // 6. 점 데이터로 형태 정의
    vertex(x, y);
  }
  endShape(CLOSE); // 폴리곤의 시작점과 끝점을 연결하여 형태를 닫습니다.
}

💡 코드 상세 설명: 수학적·데이터 기반 제어
1. 📐 극좌표계를 통한 형태 정의 (Generative Geometry)
이 코드는 도형의 위치를 극좌표계 ($\text{반지름 } r$, $\text{각도 } \theta$)라는 데이터로 정의합니다. 이는 직교좌표($x, y$)보다 원형 형태를 생성하고 변형하는 데 훨씬 효율적입니다.

• 각도 데이터: let angle = map(i, 0, numPoints, 0, TWO_PI);
  • numPoints는 도형을 구성하는 점의 개수로, 데이터의 해상도입니다. 이 값을 사용하여 $0$부터 $360^\circ$($\text{TWO\_PI}$ 라디안)까지 각도 데이터를 균등하게 생성합니다.
• 좌표 변환: r과 angle이라는 두 가지 데이터를 다음 공식에 따라 화면의 직교좌표로 변환하여 점의 최종 위치를 결정합니다.
  $x = r \cdot \cos(\text{angle}) \\ y = r \cdot \sin(\text{angle})$

2. 🌊 퍼린 노이즈를 활용한 절차적 제어 (Procedural Modeling)
   도형의 형태(반지름 $r$)는 퍼린 노이즈라는 외부 데이터에 의해 절차적으로 제어됩니다. 노이즈 값은 형태의 불규칙한 변화를 생성하는 핵심 데이터 소스입니다.

• 노이즈 입력 데이터 (xoff, yoff):
  • 노이즈 함수(noise())는 입력 좌표에 따라 값을 반환합니다. 여기서는 각 점의 각도 $\theta$를 이용해 노이즈 공간을 원형으로 탐색하도록 입력 좌표를 설정합니다.
  • noiseScale 변수는 노이즈 입력 좌표의 간격을 제어하여, 도형의 거칠기나 잔잔함과 같은 질감을 정의하는 데이터로 사용됩니다.
• 반지름(r) 데이터 변형:
  • noiseValue (0.0 ~ 1.0)를 획득한 후, map() 함수를 사용하여 이 값을 원하는 반지름 변동 폭으로 변환합니다.
  • 변환된 값을 radius에 더하여 각 점의 최종r 값을 정의합니다. 이로써 유기적이고 예측 불가능한 왜곡이 발생합니다.

3. ♻️ 시간적 시스템과의 결합 (Temporal Systems)
   정적인 형태 데이터에 시간을 도입하여 동적인 움직임을 구현합니다.

• 시간 데이터 (timeOffset):
  • draw() 함수가 반복될 때마다 timeOffset 값이 미세하게 증가합니다. 이 값은 노이즈 함수의 세 번째 인자(Z축)에 더해집니다.
• 효과: 노이즈의 Z축을 지속적으로 이동시키는 것은 노이즈 필드 전체가 시간에 따라 흐르는 것과 같은 시각적 효과를 줍니다. 결과적으로 도형은 매 프레임마다 새로운 노이즈 값에 의해 계산되어 살아있는 듯 꿈틀거리는 형태의 변화를 보여줍니다.

✅ 예제 A: 사인파 기반 형태 생성 (Procedural Curve)

let points = []; 
let amplitude = 100; // 파동 높이
let detail = 300;    // 포인트 개수

function setup() {
  createCanvas(800, 400);
  noFill();
  stroke(255);
  
  // 📌 데이터 생성 단계
  for (let i = 0; i < detail; i++) {
    let x = map(i, 0, detail, 0, width);
    let y = height / 2 + sin(i * 0.05) * amplitude;
    points.push({ x, y });
  }
}

function draw() {
  background(20);
  
  // 📌 데이터 → 형태 시각화
  beginShape();
  for (let p of points) {
    vertex(p.x, p.y);
  }
  endShape();
}

✅ 예제 B: 데이터 그리드 기반 Procedural Shape 생성

그리드를 데이터 배열로 구성하고, 각 셀의 값을 기반으로 기하학적 형태를 생성.

// 예제 B: 데이터 그리드 → 기하 구조 생성
let cols = 20;
let rows = 20;
let grid = [];

function setup() {
  createCanvas(600, 600);
  noStroke();

  // 📌 데이터 생성 단계
  for (let i = 0; i < cols; i++) {
    grid[i] = [];
    for (let j = 0; j < rows; j++) {
      grid[i][j] = noise(i * 0.2, j * 0.2); // 0 ~ 1 값
    }
  }
}

function draw() {
  background(10);

  // 📌 데이터 → 형태 시각화
  let cellW = width / cols;
  let cellH = height / rows;

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let val = grid[i][j];

      // 데이터에 따른 색/크기 변화
      let size = cellW * val;

      fill(val * 255, 150, 255);
      ellipse(
        i * cellW + cellW / 2,
        j * cellH + cellH / 2,
        size,
        size
      );
    }
  }
}

✅ 예제 C: 파라미터 기반 Procedural Polygon

// 예제 C: 파라미터 기반 절차적 다각형
let sides = 7;       // 변 개수 (데이터)
let radius = 200;    // 반지름
let rotationSpeed = 0.01;

function setup() {
  createCanvas(600, 600);
  angleMode(RADIANS);
}

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

  rotate(frameCount * rotationSpeed);

  stroke(255);
  noFill();
  strokeWeight(2);

  beginShape();
  for (let i = 0; i < sides; i++) {
    let angle = TWO_PI * (i / sides);
    let x = cos(angle) * radius;
    let y = sin(angle) * radius;
    vertex(x, y);
  }
  endShape(CLOSE);
}