아이니그마

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

이전까지는 단순한 하나의 베지어로 언덕을 그렸다!이번엔 한 화면에 규칙적인 언덕 여러 개를 만드려 보려 한다!과정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를 만들어서 +/-해줘서 제어점을 준다만들고 싶은 언덕을 대충 생각 해보..

이제 bezier클래스에 있는 좌표들을 따로 꺼내서 포인트라는 클래스를 만들어서 관리할 것이다 이유는 1. 유지보수 2. 다양한 좌표를 사용하기 위해 bezier클래스는 그리기+양이 걷기 위한 함수를 빼고는 걷어내는 거다! 과정 1. 포인트 클래스 생성 2.x, y좌표 생성하기 3.bezier에게 전달해주기 4.bezier 클래스 재정비 1. 클래스 생성&2. 좌표 생성 자 이렇게 x/y를 리턴해주는 함수를 만든다 지금 봐서는 엥 이 정도로 간단한데? 클래스를 굳이 만든다고 할 수 있지만 나중에 언덕 모양도 더 이쁘게 만들고 언덕 수도 늘어나고 언덕이 움직이기 시작하면 불지옥이 되기 때문에 미리 나눠서 작업을 시작한다! 3.bezier에게 전달 p5.js메인 에와서 클래스를 받을 변수 그리고 받을 배열을..

이제는 기울기를 만들 차례이다! 과정 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..

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

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..

잠깐 글 순서를 멈추고 급하게 찾은 기능인데 너무 신기해서 쓰려고 한다 야간 모드가 필요했다 밤이 되면 배경이 검은색이 돼서 글자가 식별이 어려워서 이것저것 찾아봤다. 그 와중에 corearoot.tistory.com/3 JavaScript와 CSS의 만남1 (객체의 색상 변경) [li태그를 추출하여 글자색을 변경함] function test2() { var li = document.getElementsByTagName('li'); for(var i = 0; i li[i].style.color = '#f00'; } } window.onload = test2; Introduction there are nu.. corearoot.tistory.com 진짜 깜짝 놀랐다.. 내가 상상만 했던 일이 되는 것이었다..

1번 부모 클래스 만들기 캐릭터가 thor든 iron man이든 모두 이들은 캐릭터라는 부모를 가진다 일단 체력 하나만으로 하겠다! 여담으로 나중에 장비들을 만들면 저 hp->armorhp/weaponhp 등 이렇게 나눠줘야 한다! skillone 즉 게임에서 예를 들어 z를 누르면 캐릭터마다 나가는 스킬이 다를 거다 그렇게 해주려면 c++기준 가상 함수가 필요하다! 가상 함수 부분인 skillone()은 비워놓는다! 그다음 thor를 보자! thor()라는 생성자를 만들어준다! 주의할 점 1.c++과 다르게 여기는 생성자 앞에 public을 붙여줘야 쓸 수 있다! 원리는 비슷하다 c++ public밑에 생성자를 써주는 것처럼! 2. 자바는 @override라고 사용할 함수에 붙여주면 된다 3.exten..

중학교 이후 처음인 거 같다 블로그에 글을 쓰게 될 줄은 그렇지만 내가 좋아하는 명언 두 개가 있다 1. 기억보단 기록을 2. 하루하루는 성실하게 인생은 되는 대로 난 예체능 계열에 있는 사람이라 하루의 소중함에 대해 너무나도 잘 알고 하루가 모여 어떤 결과를 만들어 내는지도 잘 보고 경험했다. 여기까지만 하고 시작해보겠다! 겅력은 5개월 3개월 c/c++ 웹 개발은 2달 정도 공부했다 6~9월 사이에 국비 학원에 가기 전에 꼭 흉내 내 보고 싶은 작업물이 있어서 (나만의 생각인 줄 알았으나 너무 똑같은 작업물이 유튜브에...)2달 동안 이 악물고 카피라도 해보자! 하고 하루 7~8시간씩 노력해봤다! 결과는 내 기준 대성공! (p5js가 없었다면... 아마 불가능했을 것이다...) 2달 동안 치열했던 코..