네~^^* 오늘 즐거운 하루 휴식되는 하루 보내셨나요~~^^*
오늘 분량의 코딩 공부를 이제 해보도록 하겠습니다~^^*
pursuer가 target에게 빨리 다가가서 살포시 안착하는 모습을 프로그램으로 표현해 보겠습니다~^^*
(1) pursuer가 target쪽으로 최대한 빨리 움직이다가
(2) target 근처에 다다르면 속도를 점점 늦추고
(3) target의 위치에 정확하게 도착하면 움직이지 않는 것으로 표현하도록 할게요~^^*
아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작하실 수 있어요~~^^* 5:19까지 보시면 오늘 공부 끝~~^^*
먼저~^^* 핵심 코드를 살펴 보겠습니다~^^*
하나. pursuer가 slowRadius에 닿기 전까지는 자신의 maxSpeed로 target에 다가가도록 하겠습니다.
둘. target 근처에 왔다는 것을 점검하는 기준으로 target을 중심으로 하는 반경 slowRadius를 설정하겠습니다.
셋. pursuer와 target의 거리가 slowRadius보다 작은 경우,
(1) pursuer와 target 사이의 거리가 slowRadius에서 0로 줄어드는 것에 따라,
(2) pursuer의 속력이 자신의 maxSpeed에서 0로 줄어들도록 mapping하여
(3) pursuer의 속력을 변화시켜 나가겠습니다. –
arrive(target) {
let force = p5.Vector.sub(target, this.pos);
let desiredSpeed = this.maxSpeed; //하나
let slowRadius = 100; //둘
let distance = force.mag();
if (distance < slowRadius) {
desiredSpeed = map(distance, 0, slowRadius, 0, this.maxSpeed); //셋
}
}
force.setMag(desiredSpeed);
//pursuer가 target 근처에 오기 전까지 desireSpeed는 pursuer의 maxSpeed입니다.
//pursuer가 target 근처에 오면, target에게 가까이 갈 수록 속력이 줄어들도록 mapping된 값을 desiredSpeed로 받습니다.
force.sub(this.vel);
force.limit(this.maxForce);
return force;
}그럼 이제 전체 코드를 함께 살펴 볼까요~^^*
<!DOCTYPE html>
<html>
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
http://vehicle.js
http://sketch.js
</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;
}
arrive(target) {
let force = p5.Vector.sub(target, this.pos);
let desiredSpeed = this.maxSpeed; //하나
let slowRadius = 100; //둘
let distance = force.mag();
if (distance < slowRadius) {
desiredSpeed = map(distance, 0, slowRadius, 0, this.maxSpeed); //셋
}
force.setMag(desiredSpeed);
//pursuer가 target 근처에 오기 전까지 desireSpeed는 pursuer의 maxSpeed입니다.
//pursuer가 target 근처에 오면, target에게 가까이 갈 수록 속력이 줄어들도록 mapping된 값을 desiredSpeed로 받습니다.
force.sub(this.vel);
force.limit(this.maxForce);
return force;
}
applyForce(force) {
this.acc.add(force);
}
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();
}
}let pursuer;
let target;
function setup() {
createCanvas(400, 400);
pursuer = new Vehicle(100, 100);
}
function draw() {
background(0);
let target = createVector(mouseX, mouseY);
fill(255, 0, 0);
noStroke();
ellipse(target.x, target.y, 32);
let steering = (pursuer.arrive(target));
pursuer.applyForce(steering);
pursuer.update();
pursuer.show();
}
//마우스/손가락을 사용하여 target을 움직여 보세요~^^*
//target을 pursue가 잘 따라오는가요~^^*?
//target이 멈추면 pursue가 target 위에 편안히 안착하는가요~^^*?어맛! 코드 내용 정리를 하다 보니 밤12시가 넘었네요~~^^*
오늘도 저와 함께 코딩 공부 해주셔서 감사합니다~~^^*
편안한 밤 휴식되는 밤 보내셔요~~^^*
우리가 산을 옮길 필요는 없다고 하시네요. 그저 꾸준히 앞으로 나아가기만 하면 된다고 하시네요~^^*
자신이 낼 수 있는 속력의 한계 안에서, 자신이 발휘할 수 있는 힘의 한계 안에서, 자신 나름으로 부지런히 살아가고, target에 다다르면 편안하게 안착하여 숨고르기도 하는 우리의 pursuer처럼~^^*
편안하게 숨고르는 일요일 밤 보내셔요~~^^*
그리고~^^* 다시 시작되는 한 주를 Love Again하는거죠~~~^^* YEAH~~~^^*
세상 모든 존재들의 편안한 밤을 우리 함께 바라게 되는 일요일에서 월요일로 넘어가는 이 시각~~^^*
완전한 월요일 아침이 되면 우리 음악도 함께 들을까요~~^^*
네!!! 꿈은 이루어 집니다!!!
Silverback9 
댓글 남기기