p5js로 인터렉티브 흉내내기

중학교 이후 처음인 거 같다
블로그에 글을 쓰게 될 줄은 그렇지만 내가 좋아하는 명언 두 개가 있다
1. 기억보단 기록을
2. 하루하루는 성실하게 인생은 되는 대로
난 예체능 계열에 있는 사람이라
하루의 소중함에 대해 너무나도 잘 알고
하루가 모여 어떤 결과를 만들어 내는지도 잘 보고
경험했다.
여기까지만 하고 시작해보겠다!

겅력은 5개월 3개월 c/c++ 웹 개발은 2달 정도 공부했다 6~9월 사이에 국비 학원에 가기 전에 꼭 흉내 내 보고 싶은 작업물이 있어서 (나만의 생각인 줄 알았으나 너무 똑같은 작업물이 유튜브에...)2달 동안 이 악물고 카피라도 해보자! 하고
하루 7~8시간씩 노력해봤다!
결과는 내 기준 대성공!
(p5js가 없었다면... 아마 불가능했을 것이다...)
2달 동안 치열했던 코드를 혹시 나 같은 코린이가 찾을 거 같아서 올릴 것이다!

필요 기능(백엔드)
1. 회원가입
2. 로그인
3. 소원 등록 및 변경 가능
4. 마이페이지
5. 회원등록변경 가능
6. 비트나미(mysql+아파치) 설치가 필요하다!
7. 포트 포워딩!

-주 지식은 생활코딩님+엄청난 구글링을 했다
다행히 mysql에 관한 건 정보처리기능사 공부하면서 이미 어느 정도 아는 상태여서 무난하게 넘어갔다!
https://www.youtube.com/watch?v=74WekWB4I2A&list=PLuHgQVnccGMAE4Sn_SYvMw5-qEADJcU-Xwww.youtube.com/watch?v=74WekWB4I2A&list=PLuHgQVnccGMAE4Sn_SYvMw5-qEADJcU-X

웹사이트 콘셉트(프런트 앤드)
1. 매일 나와 같은 행동을 반복한다
2. 목표한 개월이 되면 멈춘다
3. 캐릭터는 하루 6시 시작 24시 종료
4. 배경/개체 등은 하루 시간에 비례해 움직여야 한다
5. 홈페이지 속 내가 언덕 위를 걷는다 대신 언덕이 오는 속도와 별개로 진행되어야 한다(이 부분이 진짜 하이라이트였다..)
-구글 인터렉티브 디벨로퍼님이 가능하단 걸 보여주셨고(이해는 못함ㅋㅋ)+엄청난 삽질로 이해했다
https://www.youtube.com/user/cmiscm

여담으로 이영상은 웹 기획 후 이틀 만에 찾았다
처음엔 기뻤다! 와 가능하겠는데!?
결과는 가혹했다..
이틀 차인데 뭘 알겠나..

참고로 나 같은 코린이라면
구글 인터렉티브님 코드를 보고
복붙 할 생각은 안 하는 게 좋다 ㅋㅋㅋㅋㅋ
가져와봤자 통으로 저 프로젝트 전체를 가져오지 않으면 못쓴다 코린 이기준에선 ㅋㅋㅋ
왜 뭘 고쳐야 할지 이 코드가 뭘 의미하고
어떻게 쓰이는지 모른다 ㅋㅋㅋㅋㅋ
그리고 통으로 복붙 해봤자 공부가 1도 안된다
오히려 엄청난 현타만 온다...

사용언어
html/php/javascript/css/그리고 그저 빛 p5js...(라이브러리 엄청 중요하다는 걸 깨달았다)

배경색 개체들역시 시간에 따라 바뀐다!

간단하게 설명하자면
낮이어서 해+구름이 표시되는 중이다
1. 해
-오전 6시에 왼쪽 끝에서 떠서
약 3~4 즘 중천으로 가서
약 6~7시즘에 진다
1분마다 위치가 이동된다
2. 배경
-푸른~노을~옅은 흑백~흑백
1분 별로 자연스럽게 바뀌게 만들었다!
3. 캐릭터
-원래 홈페이지는 캐릭터가 있어야 하는데
제작하려면 많은 공부가 필요하고 외주는 돈이 들어서
우연히 본 구글 인터렉티브님 양을 빌려서 대신 넣어놨다
4.5시간마다 화면의 1/4을 가도록 만들었다!