Silverback9

오늘은 드디어!

자연스러운 모양의 연의 실을 그려보겠습니다~~~^^* YEAH~~^^*

vehicle이 캔버스의 화면 밖으로 나가는 순간, 우리는

hitEdge = true;

“어맛! vehicle이 화면 밖으로 나갔다!!!” 라는 신호를 확인하는 거예요!!!

그러고는….어떻게 하면 좋을까요!!!

네!!! 이 순간을 위해 준비해 보았습니다!!! vehicle의 위치좌표를 모으는 배열을~~^^*

무려~~~!!!

2 개나 만들어 보는 거예요~~!!!

vehicle의 위치 좌표점을 차례로 모으는 배열이 원래 있었잖아요~~^^* 이것을 path 배열들을 모으는 배열로 사용하기 위해 이름을 살짝 바꾸어 볼게요~~

this.paths = [];  -> this.paths = [];

vehicle이 캔버스 안에서 움직이고 있는 동안의 위치 좌표점을 모으는 새로운 배열을~~^^* 더 만들어 보는 거예요~~^^*

this.currentPath = [];

그러고 나서~~^^*

캔버스 안에서만 움직이는 동안의 vehicle의 위치좌표점을 모으는 배열 this.currentPath들을 배열 this.Path에 담는 것이죠~~^^*

네~~^^* 배열 this.Path는 배열 this.currentPath를 모으는 배열이 되는 것이죠~~^^*

 this.currentPath = [];
 this.paths = [this.currentPath];

//this.currentPath는 vehicle의 위치좌표점들의 데이터를 모읍니다.
//this.currentPath는 vehicle의 위치좌표점의 데이터를 복사해서 담아 모으고 있다고 볼 수 있어요~~^^*

//this.paths는 this.currentPath 배열들의 데이터를 모읍니다.  
//this.path는 this.currentPath들의 데이터를 담고 있는 저장공간들의 주소들을 모으고 있다고 볼 수 있어요~~^^* (요건 아직 확인되지 않는 내용이예요)

하나. vehicle의 화면 안에서 활동하는 동안은 this.currentPath가 vehicle의 위치 좌표들을 차례로 모아요~~ 이 동안 hitEdge의 Boolean 값은 false를 유지하겠지요~~?^^*

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

둘. vehicle이 캔버스 밖으로 나가는 순간 hitEdge의 Boolean 값은 true로 바뀌고~~^^*

셋. hitEdge의 값이 true가 되면, 새로운 this.currentPath 배열을 만들고, 이것을 this.path 배열에 담아요~^^* 다시 말해서, this.path는 새로운 this.currentPath의 데이터를 담는 저장공간의 주소를 담아요~

 if (hitEdge) {
      this.currentPath = [];
      this.paths.push(this.currentPath);
    }

자 그럼 이제 우리에게는 , 연의 실이 사실 여러 개가 되겠죠~~ vehicle이 화면 밖을 벗어나는 순간 이전 실이 끊어지고 vehicle이 화면 안으로 들어오는 순간 새로운 실이 만들어 지니까요. 그리고 그 실들이 연결되어 긴 실이 되어요~

 for (let path of this.paths) {
      beginShape();
      noFill();
      for (let v of path) {
        vertex(v.x, v.y);
       //하나의 this.currentPath 배열 안의 위치좌표점들을 보여준다고 할 수 있겠네요. 
      //화면 안에 들어온 순간부터 화면 밖을 벗어나기 전까지의 이동경로를 보여줍니다.
      //화면 밖을 벗어났다가 화면 안으로 다시 들어오려는 순간까지의 위치좌표는 this.currentPath 배열에 담겨있지 않게 되죠. 
      //그래서 수직선/수평선이 그려지지 않습니다.  
      }
      endShape();
    //모든 currentPath들을 보여줍니다.
  }
    

이 순간…아..근데… 주소의 저장공간????

여러 개의 실이 이어진다는 것은 상상이 가지만,

위치좌표 데이터를 복사해서 담은 배열 this.currentPath 그리고 이러한 this.currentPath 배열 데이터를 담은 저장공간들의 주소들을 담은 배열 this.path….흠..

비유는 이해가 되지만 실체는 이해가 되지 않는 순간들도 있을 것 같아요…

이 부분을 좀더 자세하게 살펴보고 싶은데요…

어맛! 제가 곧 다른 볼 일이 좀 있어서요!!! 일들을 다 마치고 밤에 다시 찾아와서, 함께 연구해 보면 어떨까요!!

우리 밤에 만나요~~~^^*

네~^^* 깊은 밤이예요~^^* 편안한 저녁 보내셨나요~~^^*

근데…긴 하루 끝이라…생기 넘치게 연구하기는 어려울 것 같아요…

내일~~^^* 아침에 연구해서 업로드 할게요~~^^*

귿밤 되시구요…오늘은 핵심 코드 정리한 것으로 공부를 마무리하도록 하겠습니다~~^^*

오늘도 코딩 공부 함꼐 해주셔서 감사하구요~~ 내일 우리 공부 또 함꼐 해요~~

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