오늘은 어제에 이어 길이 1을 가진 단위 벡터에 관하여 계속 공부하였습니다.
하나. normalize() 함수를 사용하면, 어떤 길이의 벡터도, 방향은 그대로 유지한 채 길이만 1로 변환하여 단위 벡터로 만들 수 있습니다.
둘. 벡터의 길이값을 mag() 함수를 사용하여 구한 뒤, div(길이값) 을 사용하여 벡터의 x , y 값을 이 길이값으로 나누어 길이 1의 단위 벡터를 만들 수 있습니다.
셋. 단위 벡터에 mult(배수)를 사용하여 벡터의 길이를 늘일 수 있습니다.
넷, 어느 벡터를 유닛 벡터로 변환하여 특정 길이의 벡터로 바꾸는 것은 여러 가지 방법이 있습니다.
아래 동영상을 클릭하면, 유닛 벡터의 설명부터 강의를 들을 수 있습니다. 유닛 벡터를 구하는 방법은 노트 내용을 참조 하셔도 좋을 듯 합니다.
// 마우스와 캔버스 정중앙 사이에 길이 1의 선을 보여줍니다.
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);
v.normalize(); //어제 만든 프로그램에 normailize() 함수만 더 호출함
translate(width/2, height/2);
strokeWeight(4);
stroke(255,50);
line(0,0, v.x, v.y);
}// 마우스와 캔버스 정중앙 사이의 거리값을 관찰합니다.
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);
let m = v.mag(); //마우스와 캔버스 정중앙 사이의 거리값을 m에 저장함
console.log(m); //코드창 아래에 있는 Concole 창에 m 값을 보여줌
background(m); //m값을 배경색으로 보여줌(m값이 커질 수록 밝아짐)
translate(width/2, height/2);
strokeWeight(4);
stroke(255,50);
line(0,0, v.x, v.y);
}
// 마우스와 캔버스 정중앙 사이에 길이 50의 선을 보여줍니다.
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);
let m = v.mag(); // 마우스와 캔버스 정중앙 사이의 거리값을 m에 저장함
v.div(m); // 벡터 v의 x와 y의 값을 길이값 m으로 나눔
v.mult(50);
// 단위 벡터가 된 v를 50배 곱하여 길이 50을 가진 벡터로 만든다.
translate(width/2, height/2);
strokeWeight(4);
stroke(255,50);
line(0,0, v.x, v.y);
}// 마우스와 캔버스 정중앙 사이에 길이 50의 선을 보여줍니다.
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);
v.setMag(50); // 벡터 v의 길이값을 50으로 설정합니다.
translate(width/2, height/2);
strokeWeight(4);
stroke(255,50);
line(0,0, v.x, v.y);
}이것을 클릭하여 코드를 살펴보시고 삼각형을 눌러 프로그램을 실행하여 마우스와 캔버스 정중앙 사이에 길이 50의 선이 그려지는 것을 확인해 보세요. 사각형을 눌러 종료하시구요.
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);
v.normalize().mult(50);
// 벡터 v를 길이 1의 단위 벡터로 바꾼 후 그 길이를 50배 증가시킨다.
translate(width/2, height/2);
strokeWeight(4);
stroke(255,50);
line(0,0, v.x, v.y);
} 벡터의 길이를 50으로 변환하는 방법 네 가지를 정리해 보았습니다.
(1). v.normalize();
v.mult(50);
(2). let m = v.mag();
v.div(m);
v.mult(50);
(3). v.setMag(50);
(4). v.normalize().mult(50); 오늘은 어떤 벡터를 길이 1의 유닛 벡터로 바꾸어 특정 길이로 늘이는 다양한 방법에 대해 공부해 보았습니다. 강의 중간에 함수들의 소스 코드를 들여다 보는 부분도 있어서 신기했습니다. 어떤 함수를 만들어 라이브러리에 기여할 수 있다는 것이 멋져 보였습니다. 같은 목적을 위해 다양한 방법을 궁리하는 마음도 아름다와 보였습니다. 아름다운 밤이예요~^^*
Silverback9 
댓글 남기기