The Nature of Code_Vector

#01 : Vector의 정의와 작동원리 이해하기

Vector 란 무엇인가

정확히는 유클리드 벡터라고 하며, 크기와 방향을 가진 물리량을 가르키는 말이다.

벡터는 크기(화살의 길이)와 방향(화살의 방향)을 모두 가졌기 때문에 화살표로 표현 할 수 있다.

배경은 유클리드 공간, 좌표계 공간이다. 유클리드 공간은 평면과 공간에 대해 일반화 한 것으로, 우리가 살아가는 3차원 공간, 평면, 수직선 등 다차원 공간까지 표현 할 수 있다. 마야나 언리얼엔진 같은 프로그램에서 좌표계로 표현한 공간을 생각하면 쉽게 이해할 수 있다.

벡터는 컴퓨터 그래픽, 물리 시뮬레이션에서 핵심적인 역할을 하고 있다고 한다.

프로그래밍에서 볼 수 있는 배열 요소 std :: vector 과는 다르다.

벡터를 보는 프로그래밍 관점

위치(Location)는 벡터가 아니다. 위치는 크기와 방향을 가지는 화살표처럼 한 지점에서 다른 지점을 표현하는 것이 아닌, 단순히 한 공간에 대해서만 지칭하는 것이기 때문이다.

#02 : Vector 생성하기

Vector 생성하기

Vector 클래스를 사용하지 않은 소스코드

//update position
x = random(-5, 5);
y = random(-5, 5);

Vector 클래스를 사용한 소스코드

//update position
pos = createVector(random(-5, 5), random(-5, 5));

createVector 함수를 사용하여, 쉽게 만들 수 있다.
확실히 각각의 요소(위치, 속도)를 추가하는 것보다, 벡터를 만드는 것이 가독성도 좋아보이고, 효율적으로 보인다.

#03 : Vector 계산하기

add() / 더하기

아래의 코드들은 매 프레임마다 해당 오브젝트 위치 값에 랜덤하게 증감 수치를 입력하여, 위치를 변화 시키는 목적의 코드들이다. / 움직임을 주는 알고리즘.

Vector 클래스를 사용하지 않은 소스코드

//update position
x = x + random(-5, 5);
y = y + random(-5, 5);

Vector 클래스를 사용한 소스코드

//update position
pos = createVector(random(-5, 5), random(-5, 5));
pos.add(random(-5, 5), random(-5, 5));

사실 우리가 생각하기에 벡터를 활용한 이상적인 코드는 아래와 같을 것이다.

pos = pos + (random(-5, 5), random(-5, 5));

하지만, 연산자 +는 정수, 부동소수점과 같은 기본 값의 산술만 가능하고, Vector 클래스의 산술 계산은 하지 못한다고 한다. 때문에 Vector 클래스의 연산을 해주는 메소드를 활용한다.

mult() / 곱하기

Vector 의 메소드를 활용하여 계산한 바운싱 볼 예제

let pos, vel;

function setup() {
createCanvas(640, 360);
pos = createVector(100, 100);
vel = createVector(2.5,5);
}

function draw() {
background(255);

pos.add(vel);
if((pos.x > width) || (pos.x < 0)) {
vel.mult(-1, 1);
}
if((pos.y > height) || (pos.y < 0)) {
vel.mult(1, -1);
}

stroke(0);
fill(175);
ellipse(pos.x,pos.y,16,16);
}

조건문을 활용하여, 공이 스케치 창에서 벗어나지 않도록 만든 예제이다.

mult ( 곱하기 ) 주의할 점 : **mult는 벡터에 벡터를 곱하는 게 아닌, 벡터에 스칼라, 즉 단일 숫자를 곱한다는 것을 명심해야한다.** / 예를 들어 벡터의 x 값만 곱하고 싶으면, y값 또한 1을 곱하여 곱한 값은 같게하되, y값을 명시해줌으로 벡터라는 형식을 지켜주어야 한다.
Ex) vel.mult(-1, 1); // 의미없는 값 1을 곱하여, 두 인자 값을 주었다.

sub() / 빼기

Vector 의 메소드를 활용한 뺄셈

let m_pos, center;

function setup() {
createCanvas(640,360);
}

function draw() {
background(255);

m_pos = createVector(mouseX, mouseY);
m_pos.sub(width/2, height/2);

translate(width/2, height/2);
line(0,0, m_pos.x, m_pos.y);
}

#04 : Vector 의 크기 ( 길이 ) 구하기

mag() / 크기

mag() 메소드는 vector 의 크기를 계산하고, 실수 값으로 반환한다.

function setup() {
createCanvas(640,360);
}

function draw() {
background(51);

let mouse = createVector(mouseX,mouseY);
let center = createVector(width/2,height/2);
mouse.sub(center);

let m = mouse.mag(); // mag() 메소드 사용.

translate(width/2,height/2);
strokeWeight(2);
stroke(255);
line(0,0,mouse.x,mouse.y); // 시각화 시키기 위해 보여지는 선.

print(m); // mag() 메소드 반환 값을 출력하기.
}

기준 점을 정중앙으로 하고, 선의 길이( 벡터의 크기 ) 를 출력한다.

벡터의 크기를 계산하는 함수를 이용하여 모션을 줄 수 있지
않을까? 재밌는 실험을 할 수 있어보인다. 시도해보자.

setMag() / 크기 제한하기

setMag() 함수는 Vector 의 크기를 인자/매개변수 값으로 제한 할 수 있는 함수이다.

#05 : Normalizing Vectors ( 벡터 정규화 )

normalize() / 정규화

정규화란 무언가를 표준화 시키거나 다른 것과 비교하기 쉽도록 바꾸는 것을 뜻한다고 한다.

다른 것들과 비교하기 위해 벡터의 방향은 그대로 두고, 크기를 1로 맞추는 것을 ‘정규화’ 라고 한다.
이렇게 만들어진 크기가 1인 벡터를 단위벡터 라고 한다.

단순히 방향만 나타내고 싶다면 편리함을 보탤 수 있다고 한다.

구체적으로 벡터를 정규화하는 이유(예시)가 궁금하다. 찾아보니 다른 언어에서도 사용하는 것 같아보인다.

벡터의 크기는 그대로 사용하되, 방향만 알고 싶을 때 사용하는 것이 맞나 ?

그렇다면, 어떤 예시를 볼 수 있을까 ?
앞 장의 물리적 시뮬레이션을 더 공부해보면 벡터 정규화의 효율성을 알 수 있을까?

#06 : Vector Motion: Acceleration

학습한 벡터와 클래스를 같이 사용하여 가속도가 포함되는 간단한 물리를 구현해보자.

가속 알고리즘

아래 코드는 변하지 않는 가속도를 나타낸다.

class Ball {
constructor() {
this.pos = createVector(100, 100);
this.vel = createVector(0, 0);
this.acc = createVector(-0.01, 0.1);
this.topspeed = 10;
}

update() {
this.vel.add(this.acc);
this.vel.limit(this.topspeed);
this.pos.add(this.vel);
}

display() {
ellipse(this.pos.x, this.pos.y, 16, 16);
}
}

아래 코드는 무작위의 가속도를 나타낸다.

class Ball {
constructor() {
this.pos = createVector(100, 100);
this.vel = createVector(0, 0);
this.acc = createVector(0, 0.1);
this.topspeed = 10;
}

update() {
this.acc = createVector(random(-5, 5), random(-5, 5));
this.vel.add(this.acc);
this.vel.limit(this.topspeed);
this.pos.add(this.vel);
}

display() {
ellipse(this.pos.x, this.pos.y, 16, 16);
}
}

가속도 ( acc ) 는 단순히 물체의 속도를 줄이고 빨라지게 하는 요소가 아닌, 위치와 방향을 담고 있다는 요소라는 것을 명심해야한다.

#07 : Static vs Non-Static Functions

자바스크립트도 해당되는 것인가 ?

#08 : Interactivity with Acceleration

가속도를 이용해 마우스 방향으로 공이 따라오게 하는 프로그램을 만들어보자.

프로그램 원리 _

프로그램 세분화 _

객체의 벡터 방향을 마우스 방향으로 바라보게 해야한다.
방향 그대로 크기를 바꿔주어 따라오게 만들자.

let ball;

function setup() {
createCanvas(640, 360);
ball = new Ball();
}

function draw() {
background(255,100);

ball.update();
ball.display();

}

class Ball {
constructor() {
this.pos = createVector(100, 100);
this.vel = createVector(0, 0);
this.acc = createVector(0, 0.1);
this.topspeed = 10;
}

update() {
this.mouse = createVector(mouseX, mouseY);
this.dir = this.mouse.sub(this.pos);

this.dir.normalize();
this.dir.mult(0.5);

this.acc = this.dir;

this.vel.add(this.acc);
this.vel.limit(this.topspeed);
this.pos.add(this.vel);
}

display() {
noStroke();
fill(150);
ellipse(this.pos.x, this.pos.y, 16, 16);
}
}

마우스의 위치 값을 지정할 벡터를 생성한다.
현재 마우스의 위치 값에서 객체의 현재 위치 값을 빼고, 새로운 벡터에 지정한다.

여기서 벡터의 정규화를 하는 이유는 ?

'Coding > P5.JS' 카테고리의 다른 글

< P5.JS > Particle system (0)	2022.02.09
< P5.JS > 중간창작 (0)	2022.02.09
< P5.js > Kadenze_Session2_Vector / Forces (0)	2022.02.09
< P5.JS > 1. P5.JS의 OOP ( Object - Oriented Programming ) (0)	2021.09.14
< P5.JS > 10 print_코드 분석으로 작동 원리 이해와 재해석 (0)	2021.09.11

< P5.JS > The Nature of Code_Vector