인터랙티브 4

언덕을그리자!(3)

오늘은 그린 언덕을 움직이게 할 것이다 이거는 이전 작업에 비해 어렵지 않다 는 뻥이고 이것도 알고 보면 쉬운 거지 우리 같은 코린이 들 시간 잡아먹기 딱 좋은 작업이다 ㅋㅋㅋㅋ 과정 1.언덕움직이는 메서드 만들기 2. 스위치 메서드 만들기 3. 리턴 받는 함수를 다른 메서드로 따로 만들기 1. 언덕 움직이는 메서드 만들기 -자 일단 움직이는 메서드를 만들어보자! 이름은 무브 시스템이라 하겠다 왜냐면 별/구름도 이 함수를 같이 쓰게 될 것이다 자 이제 결과를 보면 띠용? 움직이지 않는다 난 분명 pointx를 1씩 늘려주고 있는데 이유는 바로 여기 있다 function draw() { background('gray'); pointsx=point.returnx(); pointsy=point.returny(..

스프라이트 이미지 움직이기(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는 자체적으로 제공해주는 함수이다!위키에서 찾아보면! 아마 이게 아닐까 생각된다 왜냐면 내가 프로젝트 막바지에 정말 혼신의 힘을 다 해서 양 움직이는 재 코딩 했는..

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

youtu.be/3noMeuufLZY 스프라이트 이미지를 움직이는 데는 두 가지 방법이 있다 1. 예를 들어 프레임이 8개면 an1.jpg~an8.jpg 이렇게 나누는 것! 2. 하나의 파일에 다그려 넣고 그때그때 좌표를 얻어오는 것! 난 개인적으로 어렵게 느껴졌지만 효율적이라고 생각해서 2번째 방법을 선택했다! 코드를 보자! 1. 이미지/좌표 불러오기! -p5js에서 preload를 만들어준다 저기에 이제 뭐 mp3나 이런 거를 불러올 때 쓰는 기능 같다! spritedata= loadJSON('p5/horse/horse.json'); spritesheet = loadImage('p5/sheep.png'); 자바스크립트는 별게 다된다 ㅋㅋ 2. 좌표를 지정해 배열에 하나하나 하나 넣어준다!] -setu..