2. p5js의 벡터

벡터는 두 점 간의 차이, 혹은 한 점에서 다른 점으로 이동하는 것을 표현할 때 사용합니다.

draw() 에서는 매 프레임, 객체 위치에 수평, 수직 픽셀을 더해 움직임을 프로그래밍할 수 있었습니다.
속도 벡터
- 벡터는 물체의 속도(시간에 따른 물체의 위치 변화율)를 결정할 수 있어요.
- 속도는 특정 지점에서 새로운 지점으로 어떻게 이동하는지 알려주는 벡터입니다.
- 속도 벡터는 움직임에 대한 기본 알고리즘에 따라 매 프레임 객체의 새 위치를 결정합니다.
- 객체의 다음 위치는 현재 위치에 속도를 적용한 결과와 같습니다.
  - $다음 위치 = 현재 위치 + 속도$
위치 벡터
- 위치는 공간에 있는 하나의 점일 뿐, 실질적으로 벡터는 아니에요.
- 그러나 원점(0, 0)에서 시작해 특정 지점으로 나아가는 벡터로도 나타낼 수 있어요.

벡터 클래스

class Vector {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

p5js는 p5.Vector 클래스를 내장하고 있습니다. createVector() 로 벡터를 생성할 수 있죠.

let x;
let y;
let xSpeed;
let ySpeed;

// p5.Vector 생성
let position = createVector(100, 100);
let velosity = createVector(1, 3.3);

라이브러리가 먼저 로딩돼야 하므로 createVector() 는 setup() , draw() 외부에서 사용할 수 없습니다.
현재 위치에 속도를 적용해 다음 위치 결정해 봅시다.
```
position = position + velocity;
```
- 자바스크립트에서 + 연산자는 기본 타입에만 적용되기 때문에, 덧셈 연산을 하려면 p5.Vector 가 제공하는 따로 메서드를 사용해야 합니다.