오늘은 어제 본 동영상 강의의 코드들을 하나씩 구현해 보고 있습니다. 푹 자고 일어나서 낮에 일찍 포스팅을 시작하니 상쾌한 느낌이 듭니다. 오늘 기분이 상쾌한 또 하나의 이유는, 바로, 두둥~, mover.js 라는 별도의 파일에 Class Mover를 정의하고, index.html 파일에 관련 script를 덧붙였는데, 작동이 잘 되고 있기 때문입니다! “작동 축~하한다!” 네, 함께 기뻐해 주셔서 감사합니다^^*.
아래 동영상을 클릭하시면, 오늘 공부하는 내용부터 보실 수 있습니다. Motion 101 Algorithm “가속도가 속도를 변화시키고 속도가 위치를 변화시킨다.” 원리를 먼저 복습하실게요~
// class Mover 정의 내용을 담고 있는 mover.js 파일
class Mover{
constructor(x,y){
this.pos = createVector(x,y);
this.vel = p5.Vector.random2D(); //static method
this.vel.mult(random(3));
//instance method, velocity 0 ~ 3배 증가
this.acc = p5.Vector.random2D(); //static method
}
update(){
this.vel.add(this.acc); //instance method, acceleration을 velocity에 더함 -> velocity 변화됨
this.pos.add(this.vel); //instance method, velocity를 position에 더함 -> position 변화됨
}
show(){
stroke(255);
strokeWeight(2);
fill(255, 100);
ellipse(this.pos.x, this.pos.y,32);
}
}// 메인 프로그램을 담고 있는 sketch.js 파일
let mover;
function setup() {
createCanvas(400, 400);
mover = new Mover(200,200);
//캔버스 정중앙에 위치하는 Class Mover를 mover에 저장함
}
function draw() {
background(0);
mover.update();
mover.show();
}//index.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/addons/p5.sound.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
http://mover.js //이 부분을 새로 덧붙임.
http://sketch.js //원래 있던 부분임.
</body>
</html>
음…PC 환경에서는 “>” 이 그리고 모바일에서는 파일철 모양의 아이콘이 나오네요. 참, 모바일에서는 마우스 대신 손가락으로 화면을 문지르면 되는 것을 말씀 안드렸는데, 이미 잘 알고 계실 것 같아요^^*.
velocity 벡터가 먼저 생성되고, 이것에 acceleration 벡터를 더하여 velocity 벡터가 바뀌잖아요? 그래서 처음 velocity 벡터의 방향과 더해질 acceleration 벡터의 방향이 다르면, 변화된 velocity 벡터는 원래 velocity 벡터와 다른 방향이 되고, 그래서 물체의 이동 방향 경로에 굴절현상이 생깁니다. 이를 잘 관찰해 보기 위해, acceleration의 길이값을 아주 작게 변화시켜 동그라미가 매우 천천히 이동하도록 해 볼게요. 그러면 우리 사람 눈에도 이동 경로 각도의 변화가 보이겠지요? 먼저 동그라미의 이동만 관찰해 보고요. 다음엔, 동그라미의 움직임 궤적을 남겨 경로 변화를 더 잘 볼 수 있도록 해 볼게요.
하나. acceleration의 magnitude를 아주 작게 고정합니다.
class Mover{
constructor(x,y){
this.pos = createVector(x,y);
this.vel = p5.Vector.random2D();
this.vel.mult(random(3));
this.acc = p5.Vector.random2D();
this.acc.setMag(0.01);
//acceleration 길이값을 0.01로 아주 작게 고정해 봅시다.
}
update(){
this.vel.add(this.acc);
this.pos.add(this.vel);
}
show(){
stroke(255);
strokeWeight(2);
fill(255, 100);
ellipse(this.pos.x, this.pos.y,32);
}
}둘. 무한반복 함수인 draw() 안에서 캔버스를 매번 검게 칠하던 background(0)를 지웁니다. 대신, 딱 한 번만 작동되는 함수인 setup() 안에서 background(0)를 호출하여 프로그램 시작할 때만 캔버스를 검게 칠합니다. 그러면, 동그라미의 자취가 캔버스에 하얗게 계속 남게 되겠지요?
let mover;
function setup() {
createCanvas(400, 400);
mover = new Mover(200,200);
background(0); //캔버스를 검게 칠함. 딱 한 번.
}
function draw() {
//여기 있던 backgound(0);를 지웠기 때문에, 동그라미 자취가 남게 됨.
mover.update();
mover.show();
}이것을 클릭하셔서 sketch.js 파일의 코드를 살펴 보세요. 삼각형을 눌러 프로그램을 실행하고 사각형을 눌러 종료해 보세요. 실행과 종료를 반복해 보셔도 좋겠지요?
velocity 벡터의 방향과 acceleration 벡터의 방향이 같으면 또는 같아지면, 동그라미의 이동 속력이 엄청 빨라진다는 것도 느끼셨나요? 방향이 일치할 경우 acceleration이 accumulation effect, 즉 누적효과를 일으키기 때문이겠지요? 복리이자의 마법과도 같은 엄청난 힘!
이번에는 acceleration 벡터의 magnitude는 고정하지 않고 그대로 무작위 값을 유지하면서, acceleration에 의해 변화된 velocity 벡터의 magnitude가 특정값 이상이 되지 않도록 만들어 볼게요. 고속버스가 속력 100이상이 되면 속력이 더 이상 증가되지 않도록 안전장치가 되어 있는 것과 비슷할 것 같아요.
setMag()은 특정값으로 고정하는 것이지만, limit()은 특정값 이상이 되었을 경우만 한계값으로 조정하는 함수입니다. 그래서 limit()을 사용해 보겠습니다.
그리고, acceleration 벡터를 update() 안에서 생성해 보겠습니다. 무작위 방향과 길이값을 가진 acceleration 벡터가 계속 새롭게 생성되어, 동그라미의 움직임 방향과 속력이 계속 달라질 것입니다. 그러나 속력이 제한 속력 이하로 유지되겠지요.
class Mover{
constructor(x,y){
this.pos = createVector(x,y);
this.vel = p5.Vector.random2D();
this.vel.mult(random(3));
}
update(){
this.acc = p5.Vector.random2D();
//무작위 방향과 길이값을 가진 acceleration 벡터가 새롭게 계속 생성됨
this.vel.add(this.acc);
this.pos.add(this.vel);
this.vel.limit(2); //velocity의 길이값이 2 이상인 경우 2로 맞춤
}
show(){
stroke(255);
strokeWeight(2);
fill(255, 100);
ellipse(this.pos.x, this.pos.y,32);
}
}이것을 클릭하여 mover.js 파일을 열고 코드를 살펴보세요. 그리고 프로그램 시작을 위해 삼각형을 종료를 위해 사각형을 눌러 보세요.
오늘은 여기까지만 할게요~. 맛있는 점심이 먹고 싶어서요~. 오늘 맛있는 것 많이 드시며 즐거운 토요일 보내시구요. 점점 재밌어지는 동그라미의 움직임은 내일 또 우리 만나서 공부해 봐요~^^* 꿈은 이루어 집니다!
Silverback9 
댓글 남기기