오늘도 많이 무더운 하루가 시작되었어요!!!
하루를 일찍 시작하는 종달새들을 위해 일찍 문을 열어준 까페에 와서
아침 더위를 식히고 있어요~^^*
넓은 공간에 깊이를 더해주는 청록색 벽과 닿은 맨살에 포근한 감촉을 전해주는 나무,
등 뒤로 들리는 까페분들의 친절하고 밝은 목소리와 부지런한 손놀림 소리~^^*
혼자서 모닝 커피를 마시며 차분히 자신의 하루를 준비하고,
둘이서 모닝 커피를 마시며 정겨운 담소를 나누는 이 곳은
편안한 음악의 부드럽게 웨이브진 머리칼을 강력한 에어컨 바람이 빗질해 주고 있어요~^^*
어깨가 기쁘도록 시려워서, 뜨거운 커피잔에 손가락 끝이라도 대고 있으니,
오 행복! 많이 감사!
이 순간을 선물드리고 싶네요~^^* 이 시려움과 이 뜨거움을 함께 나누어요.
귿모닝~~^^*
네~^^*
오늘은 pursue 의 반대 개념인 evade를 프로그램으로 표현해 보도록 하겠습니다~^^*
회피하고자 하는 대상인 target의 움직임 속도를 보며, target의 몇 발자욱 앞의 위치를 예상하여 그곳으로부터 반대 방향으로 움직이면 될 것 같은데요~
아마도 이 순간 ~^^* seek의 반대 개념인 flee를 표현할 때, seek 의 결과값에 (-1)을 곱하여, 방향을 반대방향으로 바꾸었던 것이 떠오르실 것 같아요~^^*
네~^^*
이번엔 pursue의 결과값에 (-1)을 곱하여, 방향을 반대방향으로 바꾸어 보도록 하겠습니다~^^*
아래의 강의 동영상을 클릭하시면 오늘 공부 내용을 바로 시작(9:12)하실 수 있어요~^^* 10:03까지 보시면 오늘 공부 끝~~^^*
함수 evade()를 추가로 만들어서 어제 우리가 만든 프로그램에 더해볼까 해요~^^*
네~~^^* 꼬리에 꼬리를 무는 return 실행문이 하나 더 추가될 것 같기도 하구요~~^^*
어제처럼 실행문의 작동 순서를 꼼꼼히 헤아려가며 코드 정리를 하고 싶은데요~~, 어맛! 제가 좀 있다 볼 일이 좀 있네요~~^^*
오후에 다시 컴으로 와서 코드 정리를 완료해서 보여드릴게요~~^^*
오늘 시원한 에어컨 바람을 좀 쐬면서, 더위를 evade하실 수 있는 순간들이 있으시길 바래요…^^*
노벨평화상을 받으셔야 할 캐리어 님께 감사드리며~^^* 오후에 우리 다시 또 만나요~~!!!
좀 있다 다시 만나요~~^^*
네~^^* 에어컨 바람 아래에서 맛있는 점심을 드셨을까요~~^^*
오늘의 핵심 코드는 매우 짧네요~~^^*
(-1)을 곱해서 방향을 바꾸는 거죠~~^^* 참 쉽죠~^^*
evade(vehicle) {
let pursuit = this.pursue(vehicle);
pursuit.mult(-1);
return pursuit;
}그럼 전체 코드를 함께 살펴 볼게요~~^^*
return 실행문이 하나 더 추가 되어서~~^^*
순서가 살짝 도전적이예요~^^*
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="vehicle.js"></script>
<script src="sketch.js"></script>
</body>
</html>
class Vehicle {
constructor(x, y) {
this.pos = createVector(x, y);
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.maxSpeed = 4;
this.maxForce = 0.25;
this.r = 16;
}
evade(vehicle) { //1
let pursuit = this.pursue(vehicle); //2, 16
pursuit.mult(-1); //17
return pursuit; //18
}
pursue(vehicle){ //3
let target = vehicle.pos.copy(); //4
let prediction = vehicle.vel.copy(); //5
prediction.mult(10); //6
target.add(prediction); //7
return this.seek(target); //8, 15
}
seek(target) { //9
let force = p5.Vector.sub(target, this.pos); //10
force.setMag(this.maxSpeed); //11
force.sub(this.vel); //12
force.limit(this.maxForce); //13
return force; //14
}
applyForce(force) {
this.acc.add(force); //21
}
update() {
this.vel.add(this.acc);
this.vel.limit(this.maxSpeed);
this.pos.add(this.vel);
this.acc.set(0, 0);
}
show() {
stroke(255);
strokeWeight(2);
fill(255);
push();
translate(this.pos.x, this.pos.y);
rotate(this.vel.heading());
triangle(-this.r, -this.r / 2, -this.r, this.r / 2, this.r, 0);
pop();
}
edges() {
if (this.pos.x > width + this.r) {
this.pos.x = -this.r;
} else if (this.pos.x < -this.r) {
this.pos.x = width + this.r;
}
if (this.pos.y > height + this.r) {
this.pos.y = -this.r;
} else if (this.pos.y < -this.r) {
this.pos.y = height + this.r;
}
}
}
class Target extends Vehicle {
constructor(x, y) {
super(x, y);
this.vel = p5.Vector.random2D();
this.vel.mult(5);
}
show() {
stroke(255);
strokeWeight(2);
fill(255,0,0);
push();
translate(this.pos.x, this.pos.y);
circle(0, 0, this.r * 2);
pop();
}
}
//1.함수 evade()는 함수 draw()로부터 회피하고자 하는 대상인 vehicle을 인자로 받습니다.
//2.함수 pursue()를 호출하여 회피하고자 하는 대상인 vehicle을 인자로 넘겨줍니다.
//3.함수 pursue()는 회피하고자 하는 대상인 vehicle을 인자로 받습니다.
//4.회피하고자 하는 대상인 vehicle의 위치를 복사하여 변수 target에 저장합니다.
//5.회피하고자 하는 대상인 vehicle의 속도를 복사하여 변수 prediction에 저장합니다.
//6.회피하고자 하는 대상인 vehicle의 속도를 복사한 prediction의 크기를 10배 키웁니다.
//7.회피하고자 하는 대상인 vehicle의 위치를 복사한 target에 prediction을 더합니다. 이것은 함수 draw()가 10번 반복된 후 (10 frame 후)의 '회피하고자 하는 대상'의 예상 위치가 되겠네요.
//8. 함수 seek()를 호출하여 (회피하고자 하는 대상의 10 frame 후의 예상 위치인) target을 인자로 넘겨줍니다.
//9. 함수 seek()는 (회피하고자 하는 대상의 10 frame 후의 예상 위치인) target을 인자로 받습니다.
//10. (회피하고자 하는 대상의 10 frame 후의 예상 위치인) target과 evador 사이의 벡터를 생성하여 변수 force에 저장합니다.
//11. evador 자신이 낼 수 있는 속력의 한계를 반영하고,
//12. 현재 evador도 이동하고 있기 때문에 evador 자신의 속도도 반영하고,
//13. evador 자신이 발휘할 수 있는 힘의 한계도 반영하여,
//14. (회피하고자 하는 대상의 10 frame 후의 예상 위치에) 가장 빨리 다가갈 수 있는 속도를 가진 힘을 계산하여, 자신을 호출했던 함수 evador()에게 이 힘을 return 합니다.
//15. 함수 pursue()는 함수 seek()가 return 해 준 (회피하고자 하는 대상의 10 frame 후의 예상 위치로, 자신의 이동 속도도 반영하고, 자신이 낼 수 있는 속력의 한계와 발휘할 수 있는 힘의 한계를 반영하여 가장 빨리 다가갈 수 있는 속도를 가진) 힘 force를 자신을 호출한 함수 evade()에게 return 합니다.
//16. 함수 evade()는 함수 pursue()가 return 해 준 (회피하고자 하는 대상의 10 frame 후의 예상 위치로, 자신의 이동 속도도 반영하고, 자신이 낼 수 있는 속력의 한계와 발휘할 수 있는 힘의 한계를 반영하여 가장 빨리 다가갈 수 있는 속도를 가진) 힘 force를 변수 pursuit에 저장합니다.
//17. pursuit에 (-1)을 곱하여, 방향을 반대로 향하게 만듭니다.
//18. 자신을 호출한 함수 draw()에게 (회피하고자 하는 대상의 10 ㄺ믇 후의 예상 위치에서, 자신의 이동 속도도 반영하고 자신이 낼 수 있는 속력의 한계와 발휘할 수 있는 힘의 한계를 반영하여 가장 빨리 멀어질 수 있는 속도를 가진) 힘인 pursuit을 return합니다.
//21. evador의 함수 applyForce()는 (target의 10 frame 후의 예상 위치에서 가장 빨리 멀어지는 속도로 작용하는 힘)을 인자로 받아, evador에게 작용하는 전체 힘에 더합니다.
let evador;
let target;
function setup() {
createCanvas(400, 400);
evador = new Vehicle(100, 100);
target = new Target(200, 100);
}
function draw() {
background(0);
let steering = (evador.evade(target)); //0, 19
evador.applyForce(steering); //20
evador.edges();
evador.update();
evador.show();
target.edges();
target.update();
target.show();
}
//0. 함수 draw()는 evador의 함수 evade()를 호출하여 target을 인자로 넘겨 줍니다.
//19. evador의 함수 evade()가 return해 준 (target의 10 frame 후의 예상 위치에서 가장 빨리 멀어지는) 속도로 작용하는 힘을 변수 steering에 저장합니다.
//20. evador의 함수 applyForce()를 호출하여 (target의 10 frame 후의 예상 위치에서 가장 빨리 멀어지는 속도로 작용하는 힘을 저장한) 변수 steering을 인자로 넘겨줍니다. target을 요리조리 잘 회피하고 있는 날쌘 evador를 만나 보러 가실까요~^^*
새로운 도전을 evade하다가 결국은 그 도전을 받아들였던 시원한 나라의 여왕이 우리 곁에 지금 있으면 참 좋겠다 싶은 무더운 오늘입니다~^^*
오늘도 저와 함께 코딩 공부 해주셔서 감사합니다~^^*
시원한 곳에게 휴식하는 저녁 되시길 바래요~^^*
우리 내일 또 만나서 코딩 공부 함께 할까요~~^^*
네~~!!! 꿈은 이루어 집니다~~!!!
Silverback9 
댓글 남기기