🌊Javascript 로 파도 구현

✨인트로

💻벨로그 글과 유튜브 영상을 보고 파도 구현 클론코딩을 해보았다.
(클론코딩 링크와 소스 코드는 글 마지막에 첨부하였습니다.)

🤔내용

파도 구현의 흐름을 간략하게 설명하자면,
1. 점 하나를 만들어서 위아래로 움직인다.
2. 여러개의 점을 위아래로 움직인다.
3. 점과 점을 이어 선을 만든다.
4. 선을 곡선으로 만든다.
5. (추가)여러 파도를 겹쳐 디자인에 활용한다.

1단계. 움직이는 점 만들기

2단계. 여러개의 움직이는 점 만들기

3단계. 움직이는 점들을 이어주기

4단계. 움직이는 선을 부드럽게 만들기

5단계. (추가) 여러 개의 파도를 겹쳐보기

😎후기

오늘은 오랜만에 자바스크립트를 다뤘다.
별다른 이유없이 저 출렁이는 파도를 보고 나도 만들어 보고 싶었다...
역시 인터랙티브 디자인 기술은 신기하고도, 어렵고, 어느정도 예술의 영역에도 가깝다고 생각한다.
저 강의를 올려주신 개발자의 다른 영상들을 봤는데, 심쿵할 정도로 멋졌다...
취미로라도 클론코딩을 하면서, 웹 아트워크를 틈틈히 만들어봐야겠다.
요근래 계속 CS공부와 알고리즘만 보다가 힐링?되는 기분이였다...

📎링크

• HTML5 Canvas Tutorial : 움직이는 웨이브 만들기
• 오늘 작업물 Git Source Code