이전 글에서는 한 개의 언덕을 이동시켰다!
그러면 이제 이어 언덕이 나타나게 해 보자!
과정
1.point 클래스 고치기
2.draw 함수 고치기
3.bezier 클래스 고치기
과정이 좀 많아서 이렇게 적겠다
세부과정은 각 Step으로 적어 놓겠다!
1.point 클래스 고치기
stepup 에서 pointsx[0]에 초기값을
할당하게 하고 그다음 pointsx[1], pointsx[0]은 계속 스위치 하면서
화면 뒤에서 부터 언덕이 그려지게 만들기 위해 저렇게 설정해준다!
2.draw 함수 고치기
Step one 2차원 배열 생성!
2차원 배열을 만들어주는 함수를 만들어준다!
setup함수에서 pointx/y에게 할당해준다!
Step two 초기값 할당!
초기 값으로 설정해준다
이유는 이제 언덕이 뒤에서 나타날 건데 그렇게 되면
초기에는 언덕이 없게 된다 그래서 초기값을 할당해준다!
Strep three swsystem 손보기!
앞 배열 최소 값이 지정위치에 도달한다면
다음 스위치를 올려서 다음 언덕을 그려준다!
자체적으로 제공하는 기능을 함수에 넣은 건데
이건 굳이 안 해도 된다
Strep four getpointxy함수 바꿔주기!
이제 스위치가 바뀌면 이렇게 여기로 들어오는데
마지막 pointsw=0이 아니라면 미친 듯이 계속 1이면 1에 2이면 2에 들어가서
진행을 할 수 없게 꼭 스위치를 꺼주자!
beforepointsx는 이 앞에 가고 있는 언덕 마지막 값이 지정한 값(target)에 도달하면
그 앞에 가장 작은 좌표를 받아서 제일 앞에 넣어준다
그러면 언덕이 끊어지지 않게 된다!
Strep five movesystem함수 바꿔주기!
2차원 배열 게 맞게 바꿔주면 된다!
3.bezier 클래스 고치기
Step one bezier클래스에게 변수 주기
번들 변수를반들어주고
변수를 넣어준다!
STEP two 받아주기
변수를 받고
draw를 이중 포문으로 감싸 주면!
이렇게 끝없이 흘러나오는 언덕이 나온다 ㅠㅠㅠㅠ
진짜
너무 기뻤던 기억이 있다
글로 쓰니까 한 시간 정도 걸리는데
진짜 이과정을 혼자 공부하고 알아내는데 며칠이 걸렸었다 ㅠㅠㅠ
언덕 그리기는 끝났다!
다음은 이제 대망의 양이 이 언덕을 걸을 수 있게
만든 과정을 소개하겠다!
'p5js로 인터렉티브 흉내내기' 카테고리의 다른 글
| 마치며 (0) | 2021.06.03 |
|---|---|
| 언덕위를 걷는양! (0) | 2021.05.22 |
| 언덕을그리자!(3) (0) | 2021.05.15 |
| 언덕을 그리자(2)! (0) | 2021.05.09 |
| 언덕을 그리자(1)! (0) | 2021.05.05 |