본문 바로가기

Nature of Code

Nature of Code 1강. 벡터.

code137.5 (creative coding lab)

한태재

 

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

 

Nature of Code

Simulating Natural Systems with JavaScript

natureofcode.com

 

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

  • 크기와 방향을 가지는 객체.
  • 점 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 그래픽스를 다루는 프로젝트입니다

 

 

 

'Nature of Code' 카테고리의 다른 글

Nature of Code 3강. 진동.  (0) 2024.06.11
벡터 힘,질량,중력  (0) 2024.06.09
벡터 기본 방향과 크기  (0) 2024.06.03
Nature of Code 2강. 힘.  (0) 2024.05.15