[JS] 벡터 개념 이해하기 1

✏차장님께서 알려주신 사이트에서 벡터 알아보기

https://ko.khanacademy.org/

벡터란?

벡터는 사물의 움직임을 프로그래밍하기 위한 가장 기본적인 구성요소다.

일반적으로 벡터는 화살표로 표현한다. 화살표가 가리키는 쪽은 방향을 나타내며 화살표의 길이는 크기를 나타낸다.

왜 벡터를 사용할까?

코드를 단순화하고 좀 더 적은 수의 변수를 사용할 수 있다.

또한, 움직임을 프로그래밍하는 동안 반복적인 수학 연산을 할 때 편리한 함수 집합의 역할을 한다.

pVector를 이용한 프로그래밍 예시

캔버스를 이용해서 Bouncing Ball 애니메이션을 만들었다.

도형이 각 프레임마다 특정 픽셀만큼 가로 및 세로로 움직이도록 프로그래밍 되어있다.

<canvas id="myCanvas" width="300" height="250" style="border: 1px solid #000;"></canvas>
<script>
	const canvas = document.getElementById('myCanvas');
	const context = canvas.getContext('2d');

	// 애니메이션을 위한 변수
	const circle = {
		x : 100,
		y : 100,
		xspeed : 1,
		yspeed : 3.3,
	};

	const draw = () => {
		context.beginPath();
		context.arc(circle.x, circle.y, 10, 0, 2 * Math.PI);
		context.fillStyle = '#555555'; 
		context.fill();
	};

	const update = () => {
		context.clearRect(0, 0, canvas.width, canvas.height);

		draw();

		circle.x = circle.x + circle.xspeed;
		circle.y = circle.y + circle.yspeed;

		if ((circle.x > canvas.width) || (circle.x < 0)) {
			circle.xspeed = circle.xspeed * -1;
		}
		if ((circle.y > canvas.height) || (circle.y < 0)) {
			circle.yspeed = circle.yspeed * -1;
		}

		requestAnimationFrame(update);
	};

	update();
</script>

현재 변수는 아래와 같다. (x 좌표, y 좌표, x 속도, y 속도)

const circle = {
	x : 100,
	y : 100,
	xspeed : 1,
	yspeed : 3.3,
};

변수를 2차원 정보를 갖는, 벡터와 유사한 객체로 만들면 아래와 같다. (위치와 속도)

const PVector = function(x, y) {
    this.x = x;
    this.y = y;
};

const position = new PVector(100, 100);
const velocity = new PVector(1, 3.3);

두 개의 벡터 객체(위치와 속도)가 있다면, 움직임에 대한 알고리즘을 구현할 수 있다.

* 새로운 위치 = 현 위치에 속도를 적용한 값

position = position + velocity;

위의 수식을 바탕으로 두 벡터를 더해주는 메소드를 작성하면 아래와 같다

PVector.prototype.add = function(v) {
  this.y = this.y + v.y;
  this.x = this.x + v.x;
};

벡터 객체와 백터 덧셈 메소드를 활용하면 Bouncing Ball 애니메이션 스크립트를 아래와 같이 작성할 수 있다.

<canvas id="myCanvas" width="300" height="250" style="border: 1px solid #000;"></canvas>
<script>
	const canvas = document.getElementById('myCanvas');
	const context = canvas.getContext('2d');

	// 2차원 벡터 객체를 만드는 메소드
	const PVector = function(x, y) {
		this.x = x;
		this.y = y;
	};

	// 벡터 덧셈 메소드 (움직임에 대한 알고리즘 : location = location + velocity)
	PVector.prototype.add = function(v) {
		this.y = this.y + v.y;
		this.x = this.x + v.x;
	};

	// 애니메이션을 위한 변수
	// 위치, 속도 벡터 객체 생성
	const position = new PVector(100, 100);
	const velocity = new PVector(1, 3.3);

	const draw = () => {
		context.beginPath();
		context.arc(position.x, position.y, 10, 0, 2 * Math.PI);
		context.fillStyle = '#555555'; 
		context.fill();
	};

	const update = () => {
		context.clearRect(0, 0, canvas.width, canvas.height);

		draw();

		// position + velocity 벡터 덧셈
		position.add(velocity);

		if ((position.x > canvas.width) || (position.x < 0)) {
			velocity.x = velocity.x * -1;
		}
		if ((position.y > canvas.height) || (position.y < 0)) {
			velocity.y = velocity.y * -1;
		}

		requestAnimationFrame(update);
	};

	update();
</script>

벡터 수학 (2차원)

add() — 벡터 덧셈

PVector.prototype.add = function(v) {
  this.y = this.y + v.y;
  this.x = this.x + v.x;
};

sub() — 벡터 뺄셈

PVector.prototype.sub = function(v) {
  this.x = this.x - v.x;
  this.y = this.y - v.y;
};

mult() — 벡터의 실수곱셈

PVector.prototype.mult = function(n) {
   this.x = this.x * n;
   this.y = this.y * n;
};

div() — 벡터의 실수나눗셈

PVector.prototype.div = function(n) {
   this.x = this.x / n;
   this.y = this.y / n;
};

mag() — 벡터 크기를 계산함

PVector.prototype.mag = function() {
  return sqrt(this.x * this.x + this.y * this.y);
};

normalize() — 벡터를 정규화하여 단위 길이를 1로 만들어줌

PVector.prototype.normalize = function() {
  const m = this.mag();
  if (m > 0) {
    this.div(m);
  }
};

magSq() — 벡터의 크기 제곱 (참고)

PVector.prototype.magSq = function() {
    return this.x * this.x + this.y * this.y;
};

limit() — 벡터의 크기를 제한 (참고)

PVector.prototype.limit = function(max) {
    const mSq = this.magSq();
    if (mSq > max * max) {
        this.div(Math.sqrt(mSq)); //normalize it
        this.mult(max);
    }
    return this;
};

heading2D() — 2차원에서 벡터의 방향을 각도로 나타냄 (참고)

PVector.prototype.heading = function() {
    const r = Math.atan2(this.y, this.x);
    const h = (r * 180.0) / Math.PI;
    return h;
};

dist() — 두 벡터(점으로 간주)간 유클리디안 거리를 계산함 (참고)

PVector.prototype.dist = function(v) {
    const d = v.copy().sub(this);
    return d.mag();
};

angleBetween() — 두 벡터간 각도를 계산함 (참고)

PVector.prototype.angleBetween = function(x, y) {
    const r = this.angleBetweenRads(x,y);
    const d = (r * 180) / Math.PI;
    return d;
};

random2D() — 2차원 벡터 랜덤 값 반환 (참고1 / 참고2)

/*
PVector.fromAngle = function(angle, length) {
      if (typeof length === 'undefined') {
          length = 1;
      }
      return new PVector(
          length * Math.cos(angle),
          length * Math.sin(angle)
      );
  };
  
  PVector.random2D = function() {
      return this.fromAngle(Math.random() * Math.PI * 2);
  };
  */
  
  PVector.random2D = function() {
      return new PVector(
          1 * Math.cos(Math.random() * Math.PI * 2),
          1 * Math.sin(Math.random() * Math.PI * 2)
      );
  };

dot() — 두 벡터의 내적을 계산함
cross() — 두 벡터의 외적을 계산함 (3차원에서만 가능)
copy() — 벡터의 구성 요소를 복사해서 새 PVector 로 반환. 구 get 메소드 (참고)
```
PVector.prototype.copy = function() {
    return new PVector(this.x, this.y);
};
```