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

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-vectors/a/vector-magnitude-normalization

벡터 크기의 정규화

피타고라스의 정리 공식을 활용하면 실제 벡터의 길이(픽셀)를 계산할 수 있다.

이를 PVector 객체에서 구현하기 위한 코드는 다음과 같다.

PVector.prototype.mag = function() {
  // sqrt : 제곱근을 반환하는 메소드
  return sqrt(this.x * this.x + this.y * this.y);
};

벡터의 크기를 계산할 수 있으면 정규화도 가능하다. 정규화란 무언가를 표준화 시키거나 다른 것과 비교하기 쉽도록 바꾸는 것을 의미한다.

어떤 벡터를 정규화(normalization) 시키려면 벡터의 방향은 그대로 두고 크기를 1로 바꾸어주면 된다. 크기가 1인 벡터를 단위벡터라고 하며, 단위벡터는 크기와 상관없이 방향을 정의하므로 여러모로 유용하게 쓰인다.

PVector 객체에서 정규화 함수는 다음과 같이 적용할 수 있다.

PVector.prototype.normalize = function() {
  const m = this.mag();
  // 벡터의 크기가 0이 아닌경우
  if (m > 0) {
    this.div(m);
  }
};

벡터 모션 - 속도

이전에 만들어본 Bouncing Ball 예제에서 벡터를 이용하는 것이 무엇인지 보았다. 더 나아가 객체 내에서 PVector를 어떻게 이용하는지 알아보자.

움직임의 코딩 기본 원칙은 다음과 같다.

위치에 속도를 더한다.
그 위치에 물체를 그린다.

Bouncing Ball 예제에서 모든 코드는 update 함수 안에 들어간다. 이번에는 움직임에 대한 모든 로직을 객체(object)로 감싸줄 것이다.

화면에서 움직이는 어떤 물체를 나타내는 일반적인 Mover 객체를 생성한다. 이 때 반드시 다음과 같은 두 질문을 고려해야 한다.

mover는 어떤 데이터를 가지나요?
mover는 어떤 기능을 가지나요?

-데이터 : 위에서 본 움직임의 코딩 기본 원칙에 의하면, Mover 객체에는 두 개의 데이터 location과 velocity가 있으며, 둘 다 PVector 객체다.

const Mover = function() {
    this.position = new PVector(Math.random() * canvas.width, Math.random() * canvas.height);
    this.velocity = new PVector(Math.random(-2, 2), Math.random(-2, 2));
};

-기능 : Mover는 움직이는 기능, 화면에 보여야하는 기능, 가장자리에 도달했을 때 행동 기능이 필요하다.

Mover.prototype.update = function() {
    this.position.add(this.velocity);
};

Mover.prototype.display = function() {
    context.beginPath();
    context.ellipse(this.position.x, this.position.y, 20, 20, 0, 0, Math.PI * 2, false);
    context.lineWidth = 5;
    context.strokeStyle = '#555555';
    context.stroke();
    context.fillStyle = '#ffffff';
    context.fill();
};

Mover.prototype.checkEdges = function() {
    if (this.position.x > canvas.width) {
        this.position.x = 0;
    } 
    else if (this.position.x < 0) {
        this.position.x = canvas.width;
    }
    if (this.position.y > canvas.height) {
        this.position.y = 0;
    } 
    else if (this.position.y < 0) {
        this.position.y = canvas.height;
    }
};

이를 적용한 예제는 아래와 같다.

<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;
    };

    // 움직이는 도형을 나타내는 객체 Mover
    const Mover = function() {
        this.position = new PVector(Math.random() * canvas.width, Math.random() * canvas.height);
        this.velocity = new PVector(Math.random(-2, 2), Math.random(-2, 2));
    };

    // Mover의 움직임과 관련된 메소드
    Mover.prototype.update = function() {
        this.position.add(this.velocity);
    };

    // Mover를 화면에 보여주는 메소드
    Mover.prototype.display = function() {
        context.beginPath();
        context.ellipse(this.position.x, this.position.y, 20, 20, 0, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = '#555555';
        context.stroke();
        context.fillStyle = '#ffffff';
        context.fill();
    };

    // Mover가 가장자리에 도달했을 때 메소드
    Mover.prototype.checkEdges = function() {
        if (this.position.x > canvas.width) {
            this.position.x = 0;
        } 
        else if (this.position.x < 0) {
            this.position.x = canvas.width;
        }
        if (this.position.y > canvas.height) {
            this.position.y = 0;
        } 
        else if (this.position.y < 0) {
            this.position.y = canvas.height;
        }
    };

    const mover = new Mover();

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

        mover.update();
        mover.checkEdges();
        mover.display();

        requestAnimationFrame(update);
    };

    update();
</script>

벡터 모션 - 가속도

보다 재미있는 움직임 즉, 주위의 실제 상황에서 볼 수 있는 움직임을 만들기 위해 Mover 객체에 또 하나의 PVector인 가속도를 추가해보자.

속도는 위치의 변화율로 정의했다면, 여기서 배울 가속도는 속도의 변화율로 정의한다.

velocity.add(acceleration);
position.add(velocity);

벡터 모션 - 1. 일정한 가속도

Mover 생성자에 가속도를 나타낼 또 다른 PVector 프로퍼티를 추가한다. 일정한 가속도이므로 값을 로 초기화한 후 계속 유지한다.

*가속도 값은 픽셀 단위로 측정되는 스케치 프레임 비율에 따라 초당 약 30배정도 증가한다. 그래서 속도 벡터의 크기를 합리적인 범위 내에서 유지하기 위해 가속도 값은 꽤 작은 값에서 시작하고 유지되어야 한다.

const Mover = function() {
    this.position = new PVector(canvas.width / 2, canvas.height / 2);
    this.velocity = new PVector(0, 0);
    // 가속도 백터 객체 추가
    this.acceleration = new PVector(-0.001, 0.01);
};

가속도로 인해 속도가 점점 높아지는 것은 update() 메소드에서 수행한다.

update를 반복하면 속도가 계속해서 증가하기 때문에 프로그램을 오랫동안 실행하면 속도 값이 엄청나게 커질 위험이 있다. 따라서 속도에 최댓값을 두어서 제한할 필요가 있다.

* 벡터 수학 참고

Mover.prototype.update = function() {
    // 속도에 가속도 백터 덧셈
    this.velocity.add(this.acceleration);
    // 속도 제한
    this.velocity.limit(10);
    this.position.add(this.velocity);
};

일정한 가속도를 갖는 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;
    };

    // 벡터 곱셈 메소드
    PVector.prototype.mult = function(n) {
        this.x = this.x * n;
        this.y = this.y * n;
    };

    // 벡터 나눗셈 메소드
    PVector.prototype.div = function(n) {
        this.x = this.x / n;
        this.y = this.y / n;
    };

    // 백터 제곱 메소드
    PVector.prototype.magSq = function(v) {
        return this.x * this.x + this.y * this.y;
    };

    // 백터 크기 제한 메소드
    PVector.prototype.limit = function(max) {
        const mSq = this.magSq();
        if (mSq > max * max) {
            this.div(Math.sqrt(mSq));
            this.mult(max);
        }
        return this;
    };

    // 움직이는 도형을 나타내는 객체 Mover
    const Mover = function() {
        this.position = new PVector(canvas.width / 2, canvas.height / 2);
        this.velocity = new PVector(0, 0);
        // 가속도 백터 객체 추가
        this.acceleration = new PVector(-0.001, 0.01);
    };

    // Mover의 움직임과 관련된 메소드
    Mover.prototype.update = function() {
        // 속도에 가속도 백터 덧셈
        this.velocity.add(this.acceleration);
        // 속도 제한
        this.velocity.limit(10);
        this.position.add(this.velocity);
    };

    // Mover를 화면에 보여주는 메소드
    Mover.prototype.display = function() {
        context.beginPath();
        context.ellipse(this.position.x, this.position.y, 20, 20, 0, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = '#555555';
        context.stroke();
        context.fillStyle = '#ffffff';
        context.fill();
    };

    // Mover가 가장자리에 도달했을 때 메소드
    Mover.prototype.checkEdges = function() {
        if (this.position.x > canvas.width) {
            this.position.x = 0;
        } 
        else if (this.position.x < 0) {
            this.position.x = canvas.width;
        }
        if (this.position.y > canvas.height) {
            this.position.y = 0;
        } 
        else if (this.position.y < 0) {
            this.position.y = canvas.height;
        }
    };

    const mover = new Mover();

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

        mover.update();
        mover.checkEdges();
        mover.display();

        requestAnimationFrame(update);
    };

    update();
</script>

벡터 모션 - 2. 완전히 임의의 가속도

완전히 임의의 가속도를 가지기 위해서는 객체의 생성자에서 가속도를 초기화하는 대신 각 사이클 즉, update()가 호출될 때마다 새로운 가속도를 선택해야 한다.

무작위 벡터는 정규화된 벡터이기 때문에 두 개의 방법으로 크기를 조정할 수 있다.

가속도를 상수값으로 조정

acceleration = PVector.random2D();
acceleration.mult(0.5);

가속도를 임의의 값으로 조정

acceleration = PVector.random2D();
acceleration.mult(random(2));

명확해 보이지만 가속도가 단순히 움직이는 물체의 속도를 빠르게 하거나 느리게하는 것이 아니라 속도의 크기나 방향의 변화라는 것을 이해하는 것이 중요하다.

<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;
    };

    // 벡터 곱셈 메소드
    PVector.prototype.mult = function(n) {
        this.x = this.x * n;
        this.y = this.y * n;
    };

    // 벡터 나눗셈 메소드
    PVector.prototype.div = function(n) {
        this.x = this.x / n;
        this.y = this.y / n;
    };

    // 백터 제곱 크기 메소드
    PVector.prototype.magSq = function(v) {
        return this.x * this.x + this.y * this.y;
    };

    // 백터 크기 제한 메소드
    PVector.prototype.limit = function(max) {
        const mSq = this.magSq();
        if (mSq > max * max) {
            this.div(Math.sqrt(mSq));
            this.mult(max);
        }
        return this;
    };

    // 2차원 벡터 랜덤 반환 메소드
    PVector.random2D = function() {
        return new PVector(
            1 * Math.cos(Math.random() * Math.PI * 2),
            1 * Math.sin(Math.random() * Math.PI * 2)
        );
    };

    // 움직이는 도형을 나타내는 객체 Mover
    const Mover = function() {
        this.position = new PVector(canvas.width / 2, canvas.height / 2);
        this.velocity = new PVector(0, 0);
        this.acceleration = new PVector(-0.001, 0.01);
    };

    // Mover의 움직임과 관련된 메소드
    Mover.prototype.update = function() {
        this.acceleration = PVector.random2D();
        this.acceleration.mult(Math.random(2));
        this.velocity.add(this.acceleration);
        this.velocity.limit(10);
        this.position.add(this.velocity);
    };

    // Mover를 화면에 보여주는 메소드
    Mover.prototype.display = function() {
        context.beginPath();
        context.ellipse(this.position.x, this.position.y, 20, 20, 0, 0, Math.PI * 2, false);
        context.lineWidth = 5;
        context.strokeStyle = '#555555';
        context.stroke();
        context.fillStyle = '#ffffff';
        context.fill();
    };

    // Mover가 가장자리에 도달했을 때 메소드
    Mover.prototype.checkEdges = function() {
        if (this.position.x > canvas.width) {
            this.position.x = 0;
        } 
        else if (this.position.x < 0) {
            this.position.x = canvas.width;
        }
        if (this.position.y > canvas.height) {
            this.position.y = 0;
        } 
        else if (this.position.y < 0) {
            this.position.y = canvas.height;
        }
    };

    const mover = new Mover();

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

        mover.update();
        mover.checkEdges();
        mover.display();

        requestAnimationFrame(update);
    };

    update();
</script>

저작자표시

[JS] 벡터 개념 이해하기 2 | 칸 아카데미

티스토리툴바