Nature of Code 1강. 벡터.

code137.5 (creative coding lab)

한태재

 

The natrue of code를 보면서 스터디를 시작.

Nature of Code

 

유클리드 벡터(기하 벡터)

• 크기와 방향을 가지는 객체.
• 점 A에서 B를 가리키는 화살표. 
• 2차원에서는 A점의 위치(x1,y1), B점의 위치(x2,y2)로, 3차원에서는 A점의 위치(x1,y1,z1), B점의 위치(x2,y2,z2)로 벡터를 나타낼 수 있다.
• 일반적으로 postion(x,y)값은 방향이 없으므로 스칼라 값이다. 하지만 웹에서는 모두 (0,0)이라는 원점을 가지므로 postion(x,y)만 있어도 +x, +y 양수값이 적용되어 벡터가 된다. 해당 포지션을 기준으로 원을 그리거나 오브젝트를 드로잉 할 수 있다.
• 벡터는 두 점의 위치로도 나타낼 수 있지만, 크기와 각도로도 나타낼 수 있다.
• 벡터의 크기를 1로 바꾸는 것을 normalize라고 하고 크기가 1인 벡터는 단위벡터라고 한다. (여러 방식으로 구한 벡터들을 normalize시켜 단위벡터로 만든 후 원하는 크기로 변환시킬 수 있다)

 

벡터, 거리, 단위벡터 (javascript)

const posA = {
    x : 2, 
    y : 3
  };

const posB = {
    x : 4, 
    y : 7
  };

//A점에서 B점으로 가는 화살표 벡터
const vecAB = {
  disX : posB.x - posA.x,
  disY : posB.y - posA.y,
}

console.log('vecAB.disX : ' + vecAB.disX);
console.log('vecAB.disY : ' + vecAB.disY);
//vecAB.disX : 2
//vecAB.disY : 4

//벡터 AB의 거리
const vecAB_distance = Math.sqrt( Math.pow(vecAB.disX, 2) + Math.pow(vecAB.disY, 2));

console.log('vecAB_distance : ' + vecAB_distance);
//vecAB_distance : 4.47213595499958
//벡터 AB의 노말라이즈 (거리값을 1로)
const normalizeVecAB = {
  nomX : vecAB.disX/vecAB_distance,
  nomY : vecAB.disY/vecAB_distance
}
console.log('normalizeVecAB.nomX : ' + normalizeVecAB.nomX);
console.log('normalizeVecAB.nomY : ' + normalizeVecAB.nomY);
//ormalizeVecAB.nomX : 0.4472135954999579
//normalizeVecAB.nomY : 0.8944271909999159

const vecAB_nomarilzedDistance = Math.sqrt( Math.pow(normalizeVecAB.nomX, 2) + Math.pow(normalizeVecAB.nomY, 2));
console.log('vecAB_nomarilzedDistance : ' + vecAB_nomarilzedDistance);
//vecAB_nomarilzedDistance : 0.9999999999999999

• 위에 공식을 사용하면 A점에서 B점으로 향하는 단위벡터(normalize)를 구할 수 있다.
• posA, posB는 단순히 position이기도 하지만 (0,0)으로 부터의 vector이기도 하다.
• 역시나 vecAB는 단순한 position이기도 하지만 점 A에서 B로의 vector이기도 하다.
• 역시나 normalizeVecAB는 단순한 position이기도 하지만 점 A에서 B 방향의 거리가 1인 단위벡터이기도 하다.

 

벡터를 활용하여 random walker만들기 개념

• position(x,y)을 기준으로 원(혹은 다른 오브젝트)를 그린다.
• position(x,y)에 veolcity(+2,+3)을 매 프레임 더해주면 오른쪽 2+, 아래 3+으로 움직인다.
• veolcity(+2,+3)에 acceleration(0.1,0.3) 매 프레임 더해주면 매 프레임 마다 오른쪽 +0.1, 아래 +0.3의 속도가 더 해진다.
• 생성자에서 처음 위치, 속도, 가속도 값과 매 프레임마다 바뀌는 속도 혹은 가속도 값을 이용해 랜덤한 mover를 만들 수 있다.

 

---

 

Creative Coding LAB 오픈카카오톡 채팅방 참여하기

https://open.kakao.com/o/gYI8Wbjg

 

 

---

code137.5 (creative coding lab)

한태재

10년차 크리에이티브 디벨로퍼 / 웹 그래픽 엔지니어 / 프론트엔드 개발자

로서 가장 좋아하는 작업은 웹(HTML5)에서

2D/3D Canvas 그래픽스를 다루는 프로젝트입니다