Silverback9

오늘은 벡터 뺄셈을 시작으로 하여 다양한 크기의 벡터를 unit 벡터( 단위 벡터)로 변환하는 함수에 대해 배우고 있습니다. 이 글을 작성하다가 잠시 멈추어야 해서 현재진행형이 되었습니다. 아래 동영상의 도입부분에 벡터 뺄셈에 대한 내용이 나옵니다. 영상을 보시고 노트를 참조하셔도 좋을 것 같습니다. 자정 넘어 밤 늦게 내용을 보충하기로 하고 일단 오늘은 여기까지 기록합니다. 다 공부하고 올려도 되는데, 지금 조금 공부한 내용을 올리는 이유는, 자정이 넘으면 이 글의 날짜가 4월4일이 되어버리기 때문입니다. 오늘이 끝나기 전에 일단 작은 양의 공부라도 하고 기록을 해 놓겠습니다. 매일 코딩공부 기록하기 화이팅!

아래 코드는 두 벡터의 뺄셈을 하여 새로운 벡터에 저장하는 static method인 sub()를 사용하여 캔버스 중앙에서 마우스 위치를 따라 선을 그리는 프로그램 코드입니다.

function setup() {
  createCanvas(400, 400);
  background(0);
}

function draw() {
  let pos = createVector(200,200);//캔버스 정중앙
  let mouse = createVector(mouseX, mouseY);
  
  let v = p5.Vector.sub(mouse, pos);
      // mouse 벡터에서 pos 벡터를 뺀 값을 가진 새로운 벡터 v
      // (왼편 위쪽 모서리(0,0)에서 mouse 위치까지의 거리) - (왼편 위쪽 모서리(0,0)에서 pos(200,200)까지의 거리) 
  
  translate(width / 2, height / 2);
      // 왼편 위쪽 모서리에 있던 (0,0)을 캔버스 정중앙으로 옮김
  strokeWeight(4);
  stroke(255, 50);
  line(0,0,v.x, v.y); // 캔버스 정중앙과 v 벡터를 연결하는 선  
                      // 결국, mouse와 pos 사이를 시각적으로 나타냄
}

이것을 클릭하여 코드를 살펴 보시고 삼각형을 눌러 프로그램을 실행시켜 마우스를 이리저리 움직여 보세요. 사각형을 눌러 프로그램을 종료할 수 있습니다.

오늘은 여기까지 하겠습니다. 강의 동영상의 다음 부분 내용은 내일 공부해서 올리겠습니다. 오늘 공부를 얼마 못해서 아쉽지만, 하루를 거르지 않은 것에 의의를 두고자 합니다.