🎓 4주차: 벡터와 힘 (Vector & Force)

벡터 시각화 (Vector Visualization)

let center, mouse;

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

function draw() {
  background(25);
  center = createVector(width / 2, height / 2);
  mouse = createVector(mouseX, mouseY);
  let dir = p5.Vector.sub(mouse, center);

  // 벡터 그리기
  stroke(10, 180, 170);
  fill(0);
  translate(center.x, center.y);
  line(0, 0, dir.x, dir.y);

  // 끝에 화살표
  push();
  translate(dir.x, dir.y);
  rotate(dir.heading());
  let arrowSize = 20;
  translate(-arrowSize, 0);
  triangle(0, 2, 0, -2, arrowSize, 0);
  pop();

  noStroke();
  fill(255, 255, 255);
  text("벡터 길이: " + nf(dir.mag(), 1, 2), -50, -20);
}

📘 개념: 두 점 간의 벡터, 방향(heading()), 크기(mag()).

벡터 정규화와 속도 벡터 (Normalization and velocity)

let pos, vel;

function setup() {
  createCanvas(800, 200);
  pos = createVector(100, 200);
  vel = createVector(2, -1);
}

function draw() {
  background(25);
  pos.add(vel);
  
  // 화면 밖으로 나가면 반전
  if (pos.x > width || pos.x < 0) vel.x *= -1;
  if (pos.y > height || pos.y < 0) vel.y *= -1;

  fill(10, 190, 180, 255);
  ellipse(pos.x, pos.y, 20, 20);

  // 속도 벡터 그리기
  stroke(10, 190, 180, 255);
  strokeWeight(3);
  line(pos.x, pos.y, pos.x + vel.x * 10, pos.y + vel.y * 10);
}

📘 개념: p5.Vector.add(), 속도 벡터, 화면 반사.

힘 적용: 중력과 마찰 (Force: Gravity and Friction)

let mover;

function setup() {
  createCanvas(800, 400);
  mover = new Mover();
}

function draw() {
  background(25);

  let gravity = createVector(0, 0.1);
  mover.applyForce(gravity);

  // 바닥 근처일 때 마찰력
  if (mover.pos.y > height - 20) {
    let friction = mover.vel.copy();
    friction.normalize();
    friction.mult(-0.1);
    mover.applyForce(friction);
  }

  mover.update();
  mover.edges();
  mover.display();
}

class Mover {
  constructor() {
    this.pos = createVector(width / 2, 0);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.mass = 1;
  }

  applyForce(force) {
    let f = p5.Vector.div(force, this.mass);
    this.acc.add(f);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  edges() {
    if (this.pos.y > height - 25) {
      this.pos.y = height - 25;
      this.vel.y *= -0.7; // 반동
    }
  }

  display() {
    fill(10, 190, 180);
    ellipse(this.pos.x, this.pos.y, 50, 50);
  }
}

📘 개념: 뉴턴의 제2법칙 F = ma, 중력과 마찰력의 합산, 반동 시뮬레이션.

힘 적용 : 바람 + 중력 (Force: Wind + Gravity)

let movers = [];

function setup() {
  createCanvas(800, 400);
  for (let i = 0; i < 40; i++) {
    movers.push(new Mover(random(width), random(height)));
  }
}

function draw() {
  background(25, 25, 25, 50);

  let wind = createVector(0.02, 0.02);
  let gravity = createVector(0, 0.01);

  for (let m of movers) {
    if (mouseIsPressed) m.applyForce(wind);
    m.applyForce(gravity);
    m.update();
    m.edges();
    m.display();
  }

  fill(255);
  noStroke();
  text("Click to blow the wind →", 10, 20);
}

class Mover {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.mass = random(0.5, 2);
  }

  applyForce(force) {
    let f = p5.Vector.div(force, this.mass);
    this.acc.add(f);
  }

  update() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  edges() {
    if (this.pos.y > height - 10) {
      this.pos.y = height - 10;
      this.vel.y *= -0.8;
    }
  }

  display() {
    fill(10, 190, 180, 200);
    ellipse(this.pos.x, this.pos.y, this.mass * 16, this.mass * 16);
  }
}

📘 개념: 여러 객체에 힘 적용, 질량에 따른 가속도 차이, 바람과 중력의 상호작용.

끌어당기기 (Attraction Force)

마우스가 캔버스 영역을 벗어나면 파티클들이 자유롭게 움직이고, 다시 들어오면 마우스 위치로 끌려갑니다. 마우스 클릭 없이 위치만으로 작동합니다.

    let movers = [];
    const numMovers = 20;

    function setup() {
      createCanvas(800, 400);
      
      for (let i = 0; i < numMovers; i++) {
        movers.push(new Mover(random(width), random(height)));
      }
    }

    function draw() {
      background(25, 20);

      let isMouseInside = mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height;
      
      for (let mover of movers) {
        if (isMouseInside) {
          let mouse = createVector(mouseX, mouseY);
          let dir = p5.Vector.sub(mouse, mover.pos);
          let d = constrain(dir.mag(), 5, 25);
          dir.normalize();
          let strength = (200 * mover.mass) / (d * d);
          dir.mult(strength);
          mover.applyForce(dir);
        }
        
        mover.update();
        mover.edges();
        mover.display();
      }

      noStroke();
      fill(255);
      text("Move mouse to attract particles", 10, 20);
    }

    class Mover {
      constructor(x, y) {
        this.pos = createVector(x, y);
        this.vel = createVector(0, 0);
        this.acc = createVector(0, 0);
        this.size = random(5, 15);
        this.mass = this.size / 10;
      }

      applyForce(f) {
        let force = p5.Vector.div(f, this.mass);
        this.acc.add(force);
      }

      update() {
        this.vel.add(this.acc);
        this.vel.mult(0.85);
        this.pos.add(this.vel);
        this.acc.mult(0);
      }

      edges() {
        if (this.pos.x > width) this.pos.x = 0;
        if (this.pos.x < 0) this.pos.x = width;
        if (this.pos.y > height) this.pos.y = 0;
        if (this.pos.y < 0) this.pos.y = height;
      }

      display() {
        fill(10, 180, 170);
        ellipse(this.pos.x, this.pos.y, this.size, this.size);
      }
    }

📘 개념: 거리 기반 힘 (Gravitational Attraction), 1 / d² 법칙, 마우스 인터랙션.