Canvas를 이용한 눈 내리는 듯 한 효과

아래 내용은 패스트 캠퍼스의

"초격차  패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas"를

수강하며 혼자 복습용으로 작성한 내용과 코드들 입니다.

따라서 수업 내용과 코드 자체는 약간 다를 수 있습니다.

 

 

수강 내용에서는 svg를 이용해 filter로 grooey효과까지 작성하였지만

복습용으로 만들면서 filter는 빼고 그냥 눈 내리는 효과처럼 위에서 아래로 작은 원들이 떨어지는 것으로 작업 하였다.

 

우선 canvas의 정보들을 담고 있는 canvasInfo로 오브젝트를 제작해 주었다

나는 원들의 색상을 다르게 하고 싶었어서 해당 컬러값들을 배열화 해줌

canvasInfo를 기반으로 내가 만들 캔버스 dom을 선택해서 getContext()를 2d로 설정해주었다

아직 공부가 조금 더 필요한 부분인데 모든 모니터에서 같은 시점에 같은 값으로 업데이트 할 수 있도록 fps값을 계산해서 사용하는 것을 배웠는데 이해가 갈듯 말듯,,, 알것 같은데 설명은 못하겠고...

하나의 파티클을 Class로 만들어 관리해준다

원형을 그릴때 getContext().arc()에서의 각도는 degree가 아닌 radian을 사용하기 때문에

360도를 그리고 싶은 경우 (PI / 180) * 360을 해주어야 한다 (PI / 180 => 1도)

그리고 색상을 다양하게 만들고 싶어 color값을 랜덤값으로 constructor에서 지정해주고

그 값을 가져다 draw()에서 색상을 입혀주었다.

이제 canvas의 size를 브라우저에 꽉차게 만들어 주었다

dpr을 설정 해 준 이유는 모니터의 선명도를 맞춰주기 위해 함께 추가해줌

 

total하고 particles를 init() 초기화 해주는 이유는

화면의 크기가 resize될 때 화면 크기에 맞춰 원의 갯수를 수정해 다시 그려주기 위해서 init()에 설정해주었다

마지막으로 그림을 다시 그리기 위한 animate()로

현재 시간과 흐른 시간을 비교하여 모든 모니터에서 동일한 시점에 동일한 변화가 일어날 수 있도록 해준 후

화면을 지우고 파티클들을 다시 그려서 움직이는 것 처럼 보이게 해주었다

 

102줄 부터의 내용은 파티클이 바닥으로 사라진 후 다시 맨 위로 올려보내주는 부분이다

 

 

해서 완성된 화면