와우!!!
오늘은 뜨거운 모래 사장에서 연 날리기를 준비하는 듯한 날씨이네요~^^*
많이 더워서인지, 우리들의 연날리기 프로젝트가 더욱 기대가 되어요~~^^*
vehicle의 자취를 부드럽게 따라가는 줄을 잘 만들 수 있으면 좋겠어요~~^^*
오늘은 문제 해결 1단계로, vehicle이 캔버스 화면 밖을 벗어날 경우를 나타내는 token 하나를 설정해 보도록 하겠습니다~^^*
vehicle이 캔버스 화면 안에 머물고 있을 동안은, 화면 경계를 넘어서지 않았다고 표시를 해 두고요~~^^*
let hitEdge = false;vehicle이 캔버스 화면 밖으로 나갔을 때에는, 화면 경계를 벗어났다고 표시를 하기로 할까요~~^^*
hitEdge = true;자 그럼 이제 이 상태표시 token을 함수 edges() 안에 넣어 보겠습니다~^^* 함수 edges()는 vehicle이 캔버스 경계를 벗어날 경우 (좌<->우, 상<->하) 위치좌표를 바꾸는 역할을 하는 함수였지요~^^*
edges() {
let hitEdge = false;
if (this.pos.x > width + this.r) {
this.pos.x = -this.r;
hitEdge = true;
} else if (this.pos.x < -this.r) {
this.pos.x = width + this.r;
hitEdge = true;
}
if (this.pos.y > height + this.r) {
this.pos.y = -this.r;
hitEdge = true;
} else if (this.pos.y < -this.r) {
this.pos.y = height + this.r;
hitEdge = true;
}
}
//vehicle이 캔버스 화면 밖으로 나가면, 좌<->우 상<->하 위치를 바꾸어 주고, 상태 표시 token인 hitEdge의 Boolean 값을 false에서 true로 바꿉니다~^^*근데요~~~^^*
vehicle의 위치를 좌<->우 상<->하 바꾸는 함수 edges()의 실행문들이 뭔가 막연하게 다가오지 않으신가요?
그래서!!!
준비해 보았습니다!!!
조건문-실행문 각 쌍들이 어떤 의미를 가지는지 …제가…손으로 그림을 그려 보았습니다^^*
하나. vehicle이 캔버스 우측 경계를 벗어날 경우, vehicle의 위치를 바꾸어 좌측 경계를 통해 캔버스 화면 안으로 들어올 준비를 하도록 하겠습니다~^^*
edges() {
let hitEdge = false;
if (this.pos.x > width + this.r) {
this.pos.x = -this.r;
hitEdge = true;
} else if (this.pos.x < -this.r) {
this.pos.x = width + this.r;
hitEdge = true;
}
if (this.pos.y > height + this.r) {
this.pos.y = -this.r;
hitEdge = true;
} else if (this.pos.y < -this.r) {
this.pos.y = height + this.r;
hitEdge = true;
}
}
둘. vehicle이 캔버스의 좌측 경계를 벗어날 경우, vehicle의 위치를 바꾸어 우측 경계를 통해 들어올 준비를 하면 어떨까요~^^*
edges() {
let hitEdge = false;
if (this.pos.x > width + this.r) {
this.pos.x = -this.r;
hitEdge = true;
} else if (this.pos.x < -this.r) {
this.pos.x = width + this.r;
hitEdge = true;
}
if (this.pos.y > height + this.r) {
this.pos.y = -this.r;
hitEdge = true;
} else if (this.pos.y < -this.r) {
this.pos.y = height + this.r;
hitEdge = true;
}
}
셋. vehicle이 아래쪽 경계를 벗어날 경우, vehicle의 위치를 바꾸어 위쪽 경계를 통해 들어올 준비를 해 봅시다~^^*
edges() {
let hitEdge = false;
if (this.pos.x > width + this.r) {
this.pos.x = -this.r;
hitEdge = true;
} else if (this.pos.x < -this.r) {
this.pos.x = width + this.r;
hitEdge = true;
}
if (this.pos.y > height + this.r) {
this.pos.y = -this.r;
hitEdge = true;
} else if (this.pos.y < -this.r) {
this.pos.y = height + this.r;
hitEdge = true;
}
}
넷. vehicle이 캔버스 위쪽 경계를 벗어날 경우, vehicle의 위치를 바꾸어 아래쪽 경계를 통해 들어올 준비를 하도록 해 볼까요~^^*
edges() {
let hitEdge = false;
if (this.pos.x > width + this.r) {
this.pos.x = -this.r;
hitEdge = true;
} else if (this.pos.x < -this.r) {
this.pos.x = width + this.r;
hitEdge = true;
}
if (this.pos.y > height + this.r) {
this.pos.y = -this.r;
hitEdge = true;
} else if (this.pos.y < -this.r) {
this.pos.y = height + this.r;
hitEdge = true;
}
}
이렇게 vehicle의 위치가 바뀌면, vehicle의 위치좌표들을 점으로 인식하여 그 점들을 연결하는 함수 vertex()가, <경계를 벗어난 좌표점>과 <위치를 바꾸어 반대편 경계를 통해 들어올 준비를 하는 좌표점>을 연결해 버리게 됩니다.
beginShape();
noFill();
for (let v of path) {
vertex(v.x, v.y);
}
endShape();(1) 좌<->우 변화의 경우 y 좌표의 값이 같아서, 수평선이 생기게 되고
(2) 상<->하 변화의 경우 x 좌표의 값이 같아서, 수직선이 생기게 되겠네요.
이 경우들을 손으로 또 그려 보았습니다~^^* 함께 보시죠~~^^*
네~^^* 오늘은 vehicle이 캔버스 경계 밖을 벗어났을 때의 상태 표시 token인 hitEdge를 설정해 보았습니다~^^* 그리고 함수 edges()의 실행과정과 함수 vertex()의 영향을 살펴 보았습니다~~^^*
천릿길의 첫 걸음을 저와 함께 내딛어 주셔서 감사합니다~~^^*
이번 주 화요일에는 vertex()에 의해 그려지는 수직선 수평선을 없애는 방법을 우리 함께 고민해서 해결해 볼까요~~^^*
아? 네~~^^* 내일요~~~?^^*
내일은 월요일~~~^^* 음악 함께 들으며 잠시 머리 식히는 날~~~^^*이예요~~^^*
네….연을 날리며 아름다운 곡선의 연의 줄을 얼른 감상해 보고 싶은데…연구해야 할 것들이 아직 좀 남아있네요~~^^*
우리 내일 음악 함께 들으며 좀 쉬고~~ 화요일 기운 내어서 다시 연구!!!해 볼까요~~^^*
즐겁게 함께 연구해 나가다 보면, 혹시 몰라요….바람이 없어도 연을 날리는 신공을 연마하게 될 지도요~~^^*
오늘은 비록 아장아장 아기 발자욱을 남기는 진전이었지만, 그리고 내일은 음악 함께 들으면서 쉬지만, 화요일부터 또 꾸준히 함께 서로 도우며 나가다 보면 우린 멋진 연을 날리게 될 거예요!!
네!!! 꿈은 이루어 집니다~~!!!!
Silverback9 
댓글 남기기