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

https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-vectors/a/static-functions-vs-instance-methods

정적 함수 vs. 인스턴스 메소드

알고리즘 #3 (마우스를 따라 가속)을 살펴보기 전에 벡터와 PVector객체를 사용할 때 필요한 중요한 개념을 이해해야 할 필요가 있다. 정적(static) 메소드와 인스턴스(instance) 메소드를 사용하는 것에 무슨 차이가 있는지 알아보자.

x 값은 0이고 y를 더해 x는 5가되는 코드를 PVector 기반으로 변경하면 아래와 같다. 벡터 v의 값은 (0,0)이고 v에 u를 더해 v는 (4,5)가 된다.

var x = 0;
var y = 5;
x = x + y;

// ↓↓↓
// P 벡터 기반으로 변경

var v = new PVector(0,0);
var u = new PVector(4,5);
v.add(u);

또 다른 예시인 아래 코드는 올바르게 수정한 것처럼 보일 수 있지만 올바르지 않다. PVector 객체는 이렇게 쓸 수 없다.

var x = 0;
var y = 5;
var z = x + y;

// ↓↓↓
// 아래와 같이 변경하는 것은 올바르지 않다

var v = new PVector(0,0);
var u = new PVector(4,5);
var w = v.add(u); // 속지마세요. 이 코드는 올바르지 않습니다!!!

add() 함수를 살펴보면 위에서 우리가 원하는 것을 할 수 없다는 것을 알 수 있다.

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

add() 함수는 호출된 벡터값을 변경하지만 새로운 벡터값을 return하지 않는다. 두 개의 PVector 객체를 더한 후 결과로 새로운 PVector를 반환하기 위해서는 반드시 "정적인" add() 함수를 이용해야 한다.

정적 함수는 객체에 대해 정의되는 함수지만 객체의 프로퍼티를 변경하지 않는다. 정적 함수는 객체를 명칭공간(namespace) 처럼 다룬다.

아래는 add() 인스턴스 메소드를 사용하는 방법이다. v를 수정하므로 반환 값을 저장할 필요가 없다.

v.add(u);

다음은 add() 정적 함수를 이용하는 방법이다. 만약 해당 함수의 결과를 변수에 저장하지 않으면 이 코드는 쓸모가 없다. 정적 함수는 객체 자체를 변경하지 않기 때문이다. PVector의 정적 함수를 이용하면 PVectors 입력값 일부를 변형하지 않고 PVector 객체에 대한 일반적인 수학 연산을 수행할 수 있다.

var w = PVector.add(v, u);

다음은 add()를 정적 함수로 만드는 방법이다.

PVector.add = function(v1, v2) {
  var v3 = new PVector(v1.x + v2.x, v1.y + v2.y);
  return v3;
};

여기에는 여러 가지 차이점이 있다.

객체의 프로토타입이 아닌 객체에 대해 직접적으로 함수를 정의한다.
함수 내부의 this 키워드에 절대로 접근하지 않는다.
함수로부터 값을 반환한다.

* 정적 함수
객체 생성없이 클래스명.메소드명으로 호출이 가능하다.

* 인스턴트 메소드
반드시 객체를 생성한 후에 호출이 가능하다. 인스턴스 생성 후 참조변수.메소드명으로 호출한다.

인터랙티브 벡터 모션 - 마우스 방향으로의 가속도

알고리즘 #3에서 정한 객체가 마우스 쪽으로 가속 하는 규칙에 따라, 객체의 가속도를 동적으로 계산하는 코드를 만들어 보자.

언제든 규칙이나 공식에 따라 벡터를 계산하려면 두 가지, 즉 크기와 방향을 계산해야 한다. 가속도 벡터의 방향은 객체 위치에서 마우스 위치로의 방향이다.

그림의 마우스의 위치에서 객체의 위치를 빼서 벡터 (dx, dy)를 구할 수 있다.

let dx = mouseX - x
let dy = mouseY - y

PVector를 이용하여 위 수식을 다시 써 보면 다음과 같다.

// 객체의 위치에서 마우스 위치를 가리키는 PVector
const mouse = new PVector(mouseX, mouseY);
// 완전히 새로운 PVector를 원하기 때문에 정적 sub()를 이용
const dir = PVector.sub(mouse, position);

이제 객체가 마우스 방향으로 얼마나 신속하게 가속하는지를 결정해야 한다.

가속도 PVector의 크기를 설정하려면 먼저 방향 벡터를 정규화해야 한다. 벡터를 길이가 1인 단위 벡터로 축소하면 방향을 나타내면서 쉽게 임의의 값만큼 크기를 키울 수 있게 된다.

요약하면 다음과 같다:

객체에서 타겟 위치(마우스)를 가리키는 벡터를 계산
해당 벡터를 정규화(길이를 1로 축소)
해당 벡터에 특정 값을 곱하여 벡터를 적절한 값으로 확장
그 벡터를 가속도에 할당

다음은 위 단계를 모두 구현한 프로그램이다.

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

    let mouseX = 0;
    let mouseY = 0;

    canvas.addEventListener('mousemove', function(e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
    });

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

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

    // 정적 sub 메소드
    PVector.sub = function(v1, v2) {
        const v3 = new PVector(v1.x - v2.x, v1.y - v2.y);
        return v3;
    };

    const Mover = function() {
        this.position = new PVector(canvas.width / 2, canvas.height / 2);
        this.velocity = new PVector(0, 0);
        this.acceleration = new PVector(0, 0);
    };

    Mover.prototype.update = function() {
        // 객체의 위치에서 마우스 위치를 가리키는 PVector
        const mouse = new PVector(mouseX, mouseY);
        const dir = PVector.sub(mouse, this.position);
        this.acceleration = dir;
        this.velocity.add(this.acceleration);
        this.velocity.limit(5);
        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;
        }
    };

    const mover = new Mover();

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

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

        requestAnimationFrame(update);
    };

    update();
</script>

원이 대상에 도달하면 왜 멈추지 않을까? 움직이는 객체가 멈춰야 할 시점을 모르기 때문이다. 객체는 오직 최대한 빠르게 목적지만을 향해 간다. 최대한 빠른 속도로 가면 불가피하게 목적지를 지나치게 되고 다시 돌아오는 과정을 계속 반복하게 된다. 나중에 다른 단원에서 객체가 목적지에 도착하도록(천천히 접근하도록 함) 프로그래밍하는 방법을 배워보도록 하겠다.

아래 예제는 객체의 배열을 이용해서 만들어 보았다.

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

    // off-screen Canvas 생성
    canvas.offCanvas = document.createElement('canvas');
    canvas.offContext = canvas.offCanvas.getContext('2d');
    canvas.offCanvas.width = 15;
    canvas.offCanvas.height = 15;
    
    canvas.offContext.beginPath();
    canvas.offContext.ellipse(7.5, 7.5, 5, 5, 0, 0, Math.PI * 2, false);
    canvas.offContext.lineWidth = 3;
    canvas.offContext.strokeStyle = '#333333';
    canvas.offContext.stroke();
    canvas.offContext.fillStyle = '#ffffff';
    canvas.offContext.fill();

    let mouseX = 0;
    let mouseY = 0;

    canvas.addEventListener('mousemove', function(e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
    });

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

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

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

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

    // 정적 sub 메소드
    PVector.sub = function(v1, v2) {
        const v3 = new PVector(v1.x - v2.x, v1.y - v2.y);
        return v3;
    };

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

    Mover.prototype.update = function() {
        const mouse = new PVector(mouseX, mouseY);
        const dir = PVector.sub(mouse, this.position);
        dir.normalize();
        dir.mult(0.2);
        this.acceleration = dir;
        this.velocity.add(this.acceleration);
        this.velocity.limit(5);
        this.position.add(this.velocity);
    };

    Mover.prototype.display = function() {
        context.drawImage(canvas.offCanvas, this.position.x, this.position.y);
    };

    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 movers = [];

    for (let i = 0; i < 20; i++) {
        movers[i] = new Mover(); 
    };

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

        for (let i = 0; i < movers.length; i++) {
            movers[i].update();
            movers[i].display(); 
        }

        requestAnimationFrame(update);
    };

    update();
</script>

참조 사이트

static메소드와 인스턴스 메소드

https://velog.io/@withcolinsong/static%EB%A9%94%EC%86%8C%EB%93%9C%EC%99%80-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%A9%94%EC%86%8C%EB%93%9C

https://jihyehwang09.github.io/2020/03/21/java-static-method-and-instance-method/

Canvas off-screen canvas

http://www.soen.kr/html5/html3/3-1-4.htm

https://studiomeal.com/archives/1097

저작자표시

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

티스토리툴바