Silverback9

오늘은 벡터 A가 벡터 B 위에 드리우는 Scalar Project를 시각적으로 표현하는 프로그램을 만들어 보겠습니다~^^*

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(6:12)하실 수 있어요~^^* 9:40까지 보시면 오늘 공부 끝~~^^*

저는 좌표체계를 (100, 200)을 원점으로 하는 상대좌표로 변환하여 작업을 진행해 보았습니다~ 벡터 a, b가 화면 가운데 나오면서도, 벡터 a, b 의 위치좌표 표현이 간단해 지는 것 같아서요~^^*

하나, 필요한 벡터들을 생성합니다~ 벡터 a, 벡터 b, 그리고, 벡터 a가 벡터 b 위에 드리운 Scalar Project를 시각적으로 표현하기 위해 만들어 진 벡터 v가 있습니다~

둘. 필요한 선들을 표현합니다~ 원점과 벡터 a, b, v 의 위치좌표 사이의 선들, 그리고 벡터 a가 벡터 b에 수직으로 내려오는 normal line이 있습니다~

셋. 필요한 점들을 표현합니다~ 원점, 벡터 a, b, v의 위치좌표가 있습니다~

그럼 전체 코드를 우리 함께 살펴 볼까요~~^^*

function setup() {
  createCanvas(400, 400);
  a = createVector(100, -60);
  //x축 100 y축 -60 만큼 이동하는 크기와 방향을 가진 벡터 a입니다~
  b = createVector(200, 60);
  //x축 200 y축 60 만큼 이동하는 크기와 방향을 가진 벡터 b입니다~
}

function vectorProjection(a, b) {
  let bCopy = b.copy().normalize();
  let sp = a.dot(bCopy);
  bCopy.mult(sp);
  return bCopy;
  //벡터 b를 복사합니다~
  //벡터 b의 복사본의 크기를 1로 만듭니다~ 
  //벡터 b의 방향성을 가진 크기 1의 유닛벡터가 된 것을 변수 bCopy에 저장합니다~ 
  //벡터 a와 벡터 b의 유닛벡터인 벡터 bCopy를 Dot Product하여 Scalar Project를 구합니다~ 
  //Scalar Project를 변수 sp에 저장합니다~
  //벡터 b의 유닛벡터인 벡터 bCopy를 Scalar Project를 곱합니다~ 
  //벡터 b의 방향성을 가지고 크기가 Scalar Project가 된 벡터 bCopy를 return 합니다~
  //bCopy는 이제 벡터 b에 드리워진 벡터 a의 Scalar Project를 컴퓨터 화면에 시각적으로 표현하는 역할을 하게 될 것입니다~
  
}

function draw() {
  background(0);
 
  translate(100, 200);
  //(100, 200)을 원점(0,0) 으로 하는 상대좌표체계를 만들겠습니다~
  //벡터 a와 벡터 b를 화면 가운데 부분에서 표현하기 위한 조치입니다~
  
   let v = vectorProjection(a, b);
  //벡터 a가 벡터 b에 드리우는 Scalar Project를 구합니다~
  //벡터 b의 유닛벡터와 Scalar Project를 곱합니다~
  //Scalar Project의 크기를 가지고 벡터 b의 방향성을 가진 벡터가 만들어 집니다~
  //이 벡터를 변수 v에 저장합니다~

  strokeWeight(8);
  stroke(255);
  line(0, 0, a.x, a.y);
  line(0, 0, b.x, b.y);
  //원점에서 x축 100 y축 -60 이동한 지점이 벡터 a의 위치좌표가 됩니다~
  //원점과 벡터 a의 위치좌표를 두꺼운 흰 선으로 연결합니다~
  //원점에서 x축 200 y축 60 이동한 지점이 벡터 B의 위치좌표가 됩니다~
  //원점과 벡터 b의 위치좌표를 두꺼운 흰 선으로 연결합니다~
  
 
  strokeWeight(8);
  stroke(0, 0, 255);
  line(0, 0, v.x, v.y);
  //원점에서 벡터 b의 방향성을 가지고 Scalar Project 크기만큼 이동한 지점이 벡터 v의 위치좌표가 됩니다~
  //원점과 벡터 v의 위치좌표를 두꺼운 파란 선으로 연결합니다~ 

  strokeWeight(1);
  stroke(255);
  line(a.x, a.y, v.x, v.y);
  //벡터 a가 벡터 b 위로 드리우는 Scalar Project를 시각적으로 표현하는 벡터 v의 위치좌표를 얇은 흰 선으로 연결합니다~
  //벡터 a가 벡터 b 위로 수직으로 내려오는 선(normal line)을 표현하는 선이기도 합니다~
  //벡터 a의 위치좌표(100, -60)와 벡터 B사이의 거리를 표현하기도 합니다~
  //normal line은 한 점과 한 선 사이의 거리를 계산할 때 중요해지는 개념이기도 합니다~

  fill(0, 255, 255);
  noStroke();
  circle(0, 0, 16);
  //원점을 하늘 색 동그라미로 표현합니다~

  fill(0, 255, 0);
  noStroke();
  circle(a.x, a.y, 16);
  //벡터 a의 위치좌표를 녹색 동그라미로 표현합니다~

  fill(255, 0, 0);
  noStroke();
  circle(v.x, v.y , 16);
  //벡터 v의 위치좌표를 빨강색 동그라미로 표현합니다~ 
 
}

자~~~ 이제 우리~~~~ 벡터 a가 벡터 b에 드리우는 그림자를 만나보러 갈까요~~ 그림자 Scalar Project야~~~ 어서 너의 모습을 보여줘~~~

궁금했던 그림자를 보니 반가우면서도 살짝 아쉬우시다구요~~~???^^*

네, 그럼 우리 내일은 그림자를 우리 스스로 만들어 보는 상호작용 프로그램에 도전해 볼까요~~^^*

오늘 저와 함께 Scalar Project 시각화하기를 도전해 주셔서 감사합니다~~^^*

구구단도 시각화를 하면 오호~~ 재미있어지는데요~~^^*

우리~~~ 내일은~~~ 더 큰 도전! 상호작용하는 그림자!!! 함께 공부해 볼까요~~^^*

코딩 공부를 마치고 시작하는 뿌듯한 하루~~ 오늘 하루도 즐겁게 보내셔요~~^^*

넵!! 꿈은 이루어 집니다~~!!!