개인 노트 정리) Canvas - 1-05. 파티클에 가속도 주기

인터랙티브 웹 개발 Canvas 인강 정리

 

# 파티클에 가속도 주기

파티클의 이동거리와 속도 뿐만 아니라, 가속도를 주어서 매 프레임마다 속도의 일정한 값을 더하거나 곱해주어서 파티클이 더 빠르게 또는 더 느리게 해주는 방식에 대해서 알아보겠습니다.

class Particle {
  constructor(x, y, radius, vy) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.vy = vy;
  }
  update() {
    this.vy += 1;
    this.y += this.vy;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, (Math.PI / 180) * 360);
    ctx.fillStyle = "orange";
    ctx.fill();
    ctx.closePath();
  }
}

- 위처럼 update 함수 안에 this.vy += 1 를 추가하여 매 프레임마다 y를 1씩 누적시켜 증가시킵니다.- 보통 이런 수치를 this.gravity 또는 this.acc 라고 명명합니다.

class Particle {
  constructor(x, y, radius, vy) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.vy = vy;
    this.acc = 1; // 가속도 값 할당
  }
  update() {
    this.vy += this.acc;
    this.y += this.vy;
  }
  // ...

- 위처럼 가속도 값을 정의

- 더 빠르게 속도를 증가하고 싶다면 2이상의 값을 곱해주면 됩니다. (예 : 1.03을 곱해 줌) 

- 1 이하의 값을 곱해주면 반대로 서서히 속도가 줄다가 멈춥니다. (예 : 0.99을 곱해 줌) 이와 같은 마찰과 같은 계수는 변수명을 friction 을 사용하는데 개인 취향입니다.