🅰Javascript: Kinetic TypoGraphy 구현

✨인트로

🤩유튜브로 구독하고 있는 구글 엔지니어께서 새벽에 새 영상을 업로드 하셨다... 보자마자 너무 멋있어서 이건 해봐야지! 하고 바로 시작 ㅎㅎ

🤔내용

먼저 구현할 결과물은 타이포그라피('A' 등 알파벳) 이것이 마우스의 움직임에 요동치고, 다시 원래의 형태로 돌아오는 모습이다.
WebGL, Pixi js를 이용하는데, 어려웠다... 역시 인터랙티브 디자인은 어렵다...

1단계. 글자 띄우기 (스크립트 태그로 구글폰트를 입힌다.)

2단계. WebGL, Pixi js를 붙이기...

이 과정에서 클론코딩임에도, 정말 많은 에러와 pixi js 이용법, WebGL에 대해 검색했다... 아직도 완전하게 이해를 하진 못했다...

😏3단계. 말은 간단하다... 알고리즘으로 마우스 위치에 따라 particle을 주어 animation을 만들었다... 중간에 오타 찾느라 고생도 하고, 유튜브 영상의 PC환경과 내 노트북의 사양이 달라 Parameter를 다르게 주어야 하는 경우도 있었다.

😁완성된 결과물...

🤔완성된 모습이 이게 뭔가 싶었다...
왜 이렇게 느린지 코드가 잘못됐는지 한참을 찾다가, 작업 관리자를 켜봤는데, 맙소사...

↑↑↑🤯CPU 사용량이 위처럼 100%에 달했다... 요즘 노트북들에 비해 좋은 CPU와 그래픽카드를 가지진 않았지만, 나름 게임들을 견뎌온 노트북인데 이번은 버티기 힘들었나보다 ㅎㅎ

↑↑↑😓html 파일을 돌리던 크롬을 끄자마자 CPU가 정상으로 돌아왔다...

😂후기

이번 영상은 보자마자 완전 멋있다고 생각하고 달려들었는데, 호되게 혼난 기분이 들었다.. ㅎ 노트북 사양도 사양이지만, 전에 클론코딩했던 영상들보다도 난이도가 꽤 있었다... 내 것으로 잘 소화하지 못한 느낌... 그래도 WebGL, PIXI js 등 신기한 코딩을 해서 나름 나쁘지만은 않았다... 15분쯤 되는 영상인데, 서너시간은 훌쩍 넘겨서 완성했다... 그나마 완성한 결과물도 노트북이 힘들어해 제대로 못봐서 아쉽다😌

마지막으로 유튜브 영상에서 딴 제대로 된 결과물 gif를 첨부하며 포스팅을 끝내야겠다.

😫이걸 내 노트북에서 봤어야하는데!

📎링크

• Javascript + WebGL Tutorial (PIXI.js) : Kinetic Typography #1
• 오늘 작업물 Git Source Code