🎓 17주차 : 데이터 기반 형태 생성 (Data-driven Geometry)

• 데이터 값 → 기하학적 속성(크기, 위치, 회전, 색, 노이즈, 모양)으로 변환
• 숫자/배열/외부파일(csv/json/api) 등을 형태 생성 알고리즘의 입력으로 사용

// === Data-driven Geometry ===
// CSV 데이터 → Radial Sculpture 형태로 변환
// 데이터 기반 기하 조형

let table;
let values = [];

function preload() {
  // CSV 파일을 불러옴
  table = loadTable("data.csv", "csv", "header");
}

function setup() {
  createCanvas(700, 700);
  angleMode(DEGREES);

  // CSV에서 데이터 추출
  for (let r = 0; r < table.getRowCount(); r++) {
    let v = table.getNum(r, "value");
    values.push(v);
  }
}

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

  // 시각화 파라미터
  let count = values.length;
  let angleStep = 360 / count;

  for (let i = 0; i < count; i++) {
    let v = values[i];

    // 데이터 → Geometry 변환
    let radius = map(v, 0, 100, 40, 300);
    let thickness = map(v, 0, 100, 4, 20);
    let hue = map(v, 0, 100, 160, 360);

    push();
    rotate(i * angleStep);

    // 색상
    fill(hue, 150, 255);
    noStroke();

    // 방사형 기둥 (Radial Bar)
    rect(0, -thickness / 2, radius, thickness, 5);

    // 데이터 점 (점토 조형 느낌)
    fill(255);
    circle(radius, 0, thickness * 0.8);

    pop();
  }
}

✅ 1) 데이터 기반 패러메트릭 커브

Spline / Blob / Superformula 등과 결합

✅ 2) 이미지 데이터 기반 Geometry

이미지 픽셀 → 높이맵(Height field) 생성
(예: 얼굴 사진 → 2D height sculpture)

✅ 3) Noise + Data 믹스

실제 데이터에 노이즈 필터를 입혀
예술적 “데이터 왜곡” 효과 만들기

✅ 4) Three.js로 확장

CSV 데이터 → 3D tube / mesh deform
(진짜 Procedural Modeling)

✅ 5) 애니메이션

데이터가 시간에 따라 변하는 것처럼
형태가 pulsating 하도록 만들기