Silverback9

오늘도 날씨가 많이 더웠지요~~^^*

이런 날 바람 시원하게 부는 탁 트인 곳에서 연날리기를 하면 어떨까 싶은 생각이 들었어요~^^*

연의 꼬리에는 실이 매달려 있어서, 연의 움직임을 따라가 주는데요~~^^*

오늘 vehicle의 움직임의 자취를 보여주는 긴 실을 그려볼까 합니다~^^*

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(9:54)하실 수 있어요~~^^* 10:45까지 보시면 오늘 공부 끝~~^^*

vehicle의 좌표위치를 모두 기록을 해나가면 연의 실처럼 보이게 되지 않을까요?

흠….점들을 다 기록한다는 것은, 점의 좌표위치 정보를 순서대로 모은다는 의미가 될 것 같은데요….

그럴려면….

아하!!!

데이터를 순서대로 모아놓는 정보구조!!

그렇죠~!!

배열!! array!! 가 필요할 것 같아요!!!

this.path = [];

vehicle의 정보가 업데이트 될 때 마다, vehicle의 위치좌표를 배열 path에 저장하고~~!!

this.path.push(this.pos.copy());

vehicle의 모습을 보여줄 때마다, 그동안 배열 path에 저장된 위치좌표들을 점으로 표현하면~~^^*

beginShape();
noFill();
for ( let v of this.path) {
 vertex(v.x, v.y);
}
endShape();

이제 연의 실 모양을 관찰해 볼까요~~^^* 흠…연의 실이 좀….이상하게 보이게 되는 시점들이…있을 것 같아요….어떤 순간에 연의 실이 갑자기 이상하게 그려지나요?

네~^^* vehicle이 캔버스 화면의 가장자리를 넘어가면, 함수 edges()에 의해 좌우상하 반대되는 곳으로 vehicle의 좌표위치가 바뀌어 지는 시점인 것 같아요!

 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;
    }
  }

오늘 우리는 연의 실이 자연스럽게 보이지 않는다는 문제를 발견하게 되었습니다!!!

그러나!!!

문제의 발견은~~~문제해결의 시작이기도 하지요~~!!!^^*

그래서!!!

내일 우리 이 문제를 함께 해결해 볼까요~~~^^*

문제가 나타나면 그 문제를 해결하기 위해 함께 머리를 맞대고 노력해 보는 것, 그것은 또 하나의 즐거움이 될 수도 있을 것 같아요~~^^*

함께 문제해결을 해 나가는 즐거운 과정을 통해 세상에서 가장 긴 연의 실을 하늘에 풀어낸 멋진 팀을 만나 보러 가요, 우리~~^^*

오늘 저와 함께 문제 발견을 해주셔서 감사합니다~~^^*

내일 우리 이 문제를 함께 해결해 보면 좋겠어요~~^^* 너무 궁금해서 내일이 빨리 오면 좋겠다 싶은 걸요~~^^*

네!!! 꿈은 이루어 집니다~~!!!