bezier 4

마치며

부연설명 양이 현재 걷는 방식은 어떻게 보면 현실적이지가 않다 이유는 그냥 양 x좌표에 대한 언덕의 x/y/기울기를 가져오는 것뿐이다 왜 그렇게 해야 하냐면 난 "수학을 잘 모른다" 양이 평지를 걸었다면 그냥 걸음수로 컨트롤하면 된다 왜? 1km로 달리는 러닝머신 위에서 내가 한 시간 동안 1km를 가고 싶다면 내가 2km로 뛰면 된다 하지만 양이 걷는 건 평지 즉 직선이 아니다 그러려면 둘 중 하나의 방법이 있다 양의 x값에 언덕의 좌표를 가져올 터인지 아니면 내가 수학을 겁나 잘해서 그걸 계산해서 걸을 수를 늘려줄 것인지! 진짜 멘붕이었고 다시 한번https://youtu.be/hCHL7sydzn0 이분의 영상을 봤고 이분의 영상을 참고해서 나만의 방법을 만들었다 처음 봤을 때와 막바지에 봤을 때 걱..

언덕을 그리자(2)!

이전까지는 단순한 하나의 베지어로 언덕을 그렸다!이번엔 한 화면에 규칙적인 언덕 여러 개를 만드려 보려 한다!과정1. 포인트(좌표 받아오는 클래스) 수정2.bezier(좌표를 받아서 그리는 클래스) 수정! 1. 포인트 수정! 이전까지는 x, y배열 안에고정점 x, 제어점 x, 고정점 x, 제어점 x고정점 y, 제어점 y, 고정점 y, 제어점 y이렇게 줬지만 이제 제어점은 베지어한테 주고 고정점 x, 고정점 x, 고정점 x, 고정점 x고정점 y, 고정점 y, 고정점 y, 고정점 y으로 만들어 줬다!물론 제어점도 이전처럼 여기다가 넣어줘도 되지만 나는 bezier에서 관리를 했다! 2.bezier수정! 자 이제 this.secondx/y를 만들어서 +/-해줘서 제어점을 준다만들고 싶은 언덕을 대충 생각 해보..

스프라이트 이미지 움직이기(3)

이제는 기울기를 만들 차례이다! 과정 1. 탄젠트 값 구하기 2.atan2 사용 3.draw 에서 바꿔주기 4.p5js rotate() 사용 5.rotate() 보조 값 주기 1. 탄젠트 구하기 p5js.org/ko/reference/#/p5/bezierTangent reference | p5.js p5js.org 역시 내장되어있는 예제를 보면 곡선 밑으로 서 있는 막대기들을 볼 수 있는데 그게 힌트다! 자 코드를 가져와서! let tx = bezierTangent(85, 10, 90, 15, t); let ty = bezierTangent(20, 10, 90, 80, t); let a = atan2(ty, tx); 요 부분을 사용할 것이다! 아마도 이 부분은 stackoverflow.com/questi..

스프라이트 이미지 움직이기(2)

이전에 우리는 스프라이트 이미지를 "걷는 모션"을 내는 데 성공했다! 그러면 이제 진짜로 걷게 해 보겠다 앞에 해온 일에 비하면 훨씬 쉽다! 과정1.x,y값을 전역변수선언2.x값 늘리거나 줄이기 결과물! 이렇게 수평이동을 하는 양을 볼 수 있다!박수!이제 곡선 위에 올려보겠다! 과정1.곡선 그리기2. 양이 걸을 좌표를 받아오는 함수 만들기3.draw함수 재정비4.sheep함수 재정비 1. 곡선 그리기 drawbezier로 한 개의 곡선을 그려준다! 2. 양이 걸을 좌표를 받아오는 함수를 열어준다! getxy()저 안에 있는 bezierPoint는 자체적으로 제공해주는 함수이다!위키에서 찾아보면! 아마 이게 아닐까 생각된다 왜냐면 내가 프로젝트 막바지에 정말 혼신의 힘을 다 해서 양 움직이는 재 코딩 했는..