🎓14주차: 인터랙션(Interaction)과 시간성(Temporal Systems)

실시간 반응과 입력 데이터 기반 변화를 통한 관객 참여형 아트

이 예제는 마우스 입력이라는 관객의 참여 데이터를 실시간으로 받아 형태와 색상을 변화시키는 인터랙티브 생성 아트의 기초를 보여줍니다. 또한, 시간 데이터를 결합하여 형태가 스스로 진동하며 발전하는 시간성 시스템을 구현합니다.

• 인터랙션: 마우스의 위치와 클릭 상태를 실시간 입력 데이터로 사용합니다.

• 시간성: frameCount를 이용해 시스템의 변화 속도를 제어하고, millis() (현재 시간) 데이터를 기반으로 유기적인 움직임을 만듭니다.

// ====== 전역 변수 설정 ======
let W = 800;
let H = 600;
let particles = []; // 입자 객체들을 저장할 배열 (Array of Objects)
const numParticles = 50; // 입자의 개수 (메모리 관리 고려)

function setup() {
  createCanvas(W, H);
  background(0);
  noStroke();
  
  // 50개의 입자 객체를 생성하여 배열에 초기화합니다.
  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle(random(width), random(height)));
  }
}

function draw() {
  // 1. 시간성: 배경을 반투명하게 덮어 잔상 효과 (Temporal System)
  // 이전 프레임의 흔적을 남기며, 움직임의 '시간성'을 시각화합니다.
  background(0, 30); 

  // 2. 입력 데이터 계산 (Interaction Data)
  // 마우스의 위치를 기반으로 시스템의 '끌어당김' 중심점을 정의합니다.
  let targetX = mouseX;
  let targetY = mouseY;

  // 마우스 클릭 상태(불린 값)를 '힘'의 데이터로 변환합니다.
  let attractionStrength = mouseIsPressed ? 0.05 : 0.01;

  // 3. 입자 업데이트 및 그리기
  for (let p of particles) {
    // 마우스 위치(target)를 향해 입자를 이동시키는 힘을 적용합니다.
    p.attract(targetX, targetY, attractionStrength);
    
    // 시간 흐름에 따른 진동 및 위치 업데이트
    p.update();
    
    // 마우스와 입자의 거리에 따라 색상과 크기를 결정합니다.
    p.display(targetX, targetY);
  }
}

/**
 * 입자(Particle) 클래스 정의
 * - 객체 지향 프로그래밍을 사용하여 입자들의 상태와 행동을 관리합니다.
 */
class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y); // 현재 위치
    this.vel = createVector(0, 0); // 속도 (0으로 초기화하여 메모리 효율성 유지)
    this.acc = createVector(0, 0); // 가속도
    this.baseSize = 10;            // 기본 크기
    this.noiseOffset = random(1000); // 퍼린 노이즈를 위한 무작위 오프셋 (시간성)
  }

  /**
   * 마우스 위치(target)로 끌어당기는 힘을 계산하여 가속도에 적용합니다.
   */
  attract(targetX, targetY, strength) {
    let target = createVector(targetX, targetY);
    // 1. 방향 벡터 계산: target - pos
    let force = p5.Vector.sub(target, this.pos); 
    // 2. 거리 제한: 너무 멀면 힘을 줄이고, 너무 가까우면 힘을 0으로 만듭니다.
    let dist = force.mag();
    dist = constrain(dist, 5, 200); // 최소 5, 최대 200으로 거리값 제한
    
    // 3. 힘의 크기 계산: (strength) * (1/dist^2)의 근사치 적용
    force.normalize(); // 방향만 남기고
    force.mult(strength * (1 / (dist * 0.01))); // 힘의 크기 적용
    
    this.acc.add(force); // 가속도에 힘을 더합니다.
  }
  
  /**
   * 속도와 위치를 업데이트하고, 시간성 진동을 추가합니다.
   */
  update() {
    // 1. 시간성: 퍼린 노이즈를 이용한 진동 추가
    // 시간이 지남에 따라(frameCount) 위치가 미세하게 진동합니다.
    let noiseValX = map(noise(this.noiseOffset, frameCount * 0.005), 0, 1, -0.5, 0.5);
    let noiseValY = map(noise(this.noiseOffset + 10, frameCount * 0.005), 0, 1, -0.5, 0.5);
    this.acc.add(noiseValX * 0.1, noiseValY * 0.1); // 미세한 랜덤 가속도 추가
    
    // 2. 물리 업데이트
    this.vel.add(this.acc);
    this.vel.mult(0.95); // 마찰력 (속도를 0.95로 줄여 안정화)
    this.pos.add(this.vel);
    this.acc.mult(0); // 가속도를 매 프레임 초기화 (매우 중요)
  }

  /**
   * 입자를 화면에 그리고, 마우스 거리에 따른 색상/크기 변화를 적용합니다.
   */
  display(targetX, targetY) {
    // 1. 인터랙션: 마우스와의 거리에 따른 색상/크기 데이터 정의
    let distToMouse = dist(this.pos.x, this.pos.y, targetX, targetY);
    
    // 거리에 따라 크기 변화 (가까울수록 커짐)
    let size = this.baseSize + map(distToMouse, 0, width, 10, 0);
    
    // 거리에 따라 색상 변화 (가까울수록 밝고 붉은색)
    let hue = map(distToMouse, 0, width, 0, 60); // 0(Red) ~ 60(Yellow)
    let brightness = map(distToMouse, 0, width, 100, 50);

    // 색상 모드를 HSB로 변경하여 색상 제어를 용이하게 합니다.
    colorMode(HSB, 360, 100, 100);
    fill(hue, 80, brightness, 80); // 반투명도를 80으로 설정
    
    ellipse(this.pos.x, this.pos.y, size, size);
    colorMode(RGB, 255); // 다음 드로잉을 위해 다시 RGB로 복구
  }
}

1. ⚛️ 객체 지향과 메모리 효율성

• Particle 클래스: 수많은 입자의 상태(pos, vel, acc)와 행동(attract, update, display)을 하나의 객체로 묶어 관리합니다. 이는 코드를 모듈화하고 이해하기 쉽게 만들며, 대규모 시스템을 설계할 때 메모리 효율적인 방법입니다.

• 벡터 사용: 위치, 속도, 가속도 모두 p5.Vector를 사용합니다. 벡터 연산(add, sub, mult, normalize)은 물리학적 움직임을 직관적으로 구현하며 코드를 간결하게 합니다.

2. 🖱️ 인터랙션 (관객 참여형 데이터)

• 입력 데이터 수집: mouseX, mouseY, mouseIsPressed라는 관객의 실시간 입력 데이터를 직접 사용합니다.

• 힘의 제어: attract() 함수가 인터랙션의 핵심입니다.

• 중심점: 마우스 위치(targetX, targetY)가 입자들을 끌어당기는 중심점 역할을 합니다.

• 데이터 기반 힘 조절: attractionStrength는 마우스 클릭 상태(mouseIsPressed)라는 불린 데이터를 수치화하여 힘의 크기를 두 배 이상으로 변화시킵니다. (클릭 시 더 강하게 끌어당김)

• 시각적 반응: display() 함수 내에서 distToMouse (마우스와 입자의 거리)를 계산하여, 이 거리에 따라 입자의 크기(size)와 색상(hue, brightness)을 실시간으로 변화시킵니다. 이는 관객의 위치가 직접 아트워크의 형태를 변형시키는 효과를 줍니다.

3. ⏳ 시간성 (Temporal Systems)

• 프레임 기반 시간: frameCount는 시스템이 시작된 이후의 프레임 수를 나타내며, 이는 시간의 흐름을 대표하는 데이터로 사용됩니다.

• 유기적 진동: update() 함수에서 frameCount를 퍼린 노이즈의 인자로 사용하여, 입자가 마치 살아있는 것처럼 미세하고 부드러운 불규칙한 진동을 하도록 가속도를 추가합니다.

• 잔상 효과: background(0, 30) 코드는 매 프레임마다 배경을 완전히 지우지 않고 옅은 검은색으로 덧칠하여, 이전 프레임의 드로잉이 미세하게 남아 입자들의 움직임에 시간의 흔적(Temporal Trace)을 남깁니다.

✅ 예제 A: 시간 기반 형태 변화 (Temporal Systems)

frameCount를 시간의 데이터로 사용하여 형태가 계속 진동하고 변화하는 구조.

let numPoints = 300;

function setup() {
  createCanvas(800, 400);
  noFill();
  stroke(240, 200, 30);
}

function draw() {
  background(15);

  beginShape();
  for (let i = 0; i < numPoints; i++) {
    let x = map(i, 0, numPoints, 0, width);

    // 시간 기반 진동
    let t = frameCount * 0.02;
    let y = height / 2 + sin(i * 0.05 + t) * 120;

    vertex(x, y);
  }
  endShape();
}

🔍 설명

frameCount를 시간(time) 데이터처럼 사용해 계속 변화하는 파형을 생성.

i * 0.05 + t가 가지는 위상 변화(phase shift) 덕분에 파동이 흘러가는 느낌을 준다.

"시간성"을 가장 기본적으로 시각화하는 예제.

✅ 예제 B: 마우스 기반 인터랙션 — Particle Attraction

마우스 위치가 “입력 데이터”가 되어 파티클들이 실시간으로 반응.

let particles = [];

function setup() {
  createCanvas(800, 500);
  for (let i = 0; i < 200; i++) {
    particles.push({
      pos: createVector(random(width), random(height)),
      vel: createVector(random(-1, 1), random(-1, 1))
    });
  }
}

function draw() {
  background(15);

  for (let p of particles) {
    // 마우스 방향으로 끌어당기는 힘
    let force = createVector(mouseX - p.pos.x, mouseY - p.pos.y);
    force.setMag(0.05);

    p.vel.add(force);
    p.vel.limit(3);
    p.pos.add(p.vel);

    fill(240, 200, 30);
    noStroke();
    circle(p.pos.x, p.pos.y, 6);
  }
}

✅ 예제 C: 클릭/드래그 기반 형태 생성 — Gesture Drawing

사용자가 그린 선을 “입력 데이터”로 삼아 자동적으로 변환된 형태가 생성되는 방식.

let path = [];

function setup() {
  createCanvas(800, 500);
  stroke(255);
  noFill();
}

function draw() {
  background(25);

  // 사용자가 그린 경로 시각화
  beginShape();
  for (let p of path) {
    vertex(p.x, p.y);
  }
  endShape();

  // 드로잉 기반 "반응형 원"
  if (path.length > 2) {
    let last = path[path.length - 1];
    let prev = path[path.length - 2];

    let dx = last.x - prev.x;
    let dy = last.y - prev.y;
    let speed = sqrt(dx * dx + dy * dy);

    let size = map(speed, 0, 50, 10, 80);

    fill(180, 120, 255);
    noStroke();
    circle(last.x, last.y, size);
  }
}

function mouseDragged() {
  path.push(createVector(mouseX, mouseY));
}

🔍 설명

• mouseDragged()가 사용자 제스처 데이터를 축적해 path[] 배열을 만든다.
• 마지막 두 점의 거리로 “속도(speed)”를 계산 → 형태 변화에 사용.
• 관객이 그린 “행위”가 곧 데이터이며, 시스템은 그걸 해석해서 시각적으로 반응한다.

✅ 예제 D: 시간 + 인터랙션 조합 — Dynamic Network Web

사용자 움직임 + 시간 변화가 결합된 생성 아트 구조.

let nodes = [];

function setup() {
  createCanvas(800, 400);

  for (let i = 0; i < 400; i++) {
    nodes.push({
      pos: createVector(random(width), random(height)),
      vel: createVector(random(-1, 1), random(-1, 1)),
    });
  }
}

function draw() {
  background(15);
  stroke(240, 200, 30, 80);

  // 모든 노드 업데이트
  for (let n of nodes) {
    // 시간 기반 흔들림
    n.pos.x += n.vel.x + sin(frameCount * 0.01 + n.pos.y) * 0.4;
    n.pos.y += n.vel.y + cos(frameCount * 0.01 + n.pos.x) * 0.4;

    // 마우스 반발력
    let d = dist(mouseX, mouseY, n.pos.x, n.pos.y);
    if (d < 150) {
      let repel = p5.Vector.sub(n.pos, createVector(mouseX, mouseY));
      repel.setMag(0.5);
      n.pos.add(repel);
    }

    // 노드 그리기
    fill(240, 200, 30);
    noStroke();
    circle(n.pos.x, n.pos.y, 6);
  }

  // 노드 간 연결
  stroke(120, 90);
  for (let i = 0; i < nodes.length; i++) {
    for (let j = i + 1; j < nodes.length; j++) {
      let d = dist(
        nodes[i].pos.x,
        nodes[i].pos.y,
        nodes[j].pos.x,
        nodes[j].pos.y
      );
      if (d < 100) {
        line(nodes[i].pos.x, nodes[i].pos.y, nodes[j].pos.x, nodes[j].pos.y);
      }
    }
  }
}

🔍 설명

• 시간성: sin(frameCount * 0.01)으로 미세한 흔들림
• 인터랙션: 마우스 반발력
• 구조: 거리 기반 네트워크 연결
• 시간과 입력이 결합된 “관객 참여적 생성 아트”의 전형적인 패턴