거의 알고리즘 일기장

이번에는 눈효과에 이어 유성효과이다. 유성효과는 https://kunkunwoo.tistory.com/295 html canvas + ts로 눈효과 만들기 예전에 재밌게 했던 html canvas와 바닐라 js 를 이용해 효과들을 만든 기억이 떠올라 다시 만들어보았다. 워밍업으로 간단한 눈효과를 만들어보았다. 데모 세팅 vite, ts, pure css 사용 자세한 내용은 kunkunwoo.tistory.com 이 눈효과에서 조금만 바꾸면 된다. 1. 유성처럼 보이려면 일단 유성에는 꼬리가 있다. 2. 유성 대가리가 꼬리보다 밝다. (꼬리로 갈수록 서서히 색이 옅어지는 구조) 3. 안보이면 다시 재활용한다 (안보이면 -> init function 실행하여 새로나오는것처럼 구현, 음.. 약간 구현사항이 다..

예전에 재밌게 했던 html canvas와 바닐라 js 를 이용해 효과들을 만든 기억이 떠올라 다시 만들어보았다. 워밍업으로 간단한 눈효과를 만들어보았다. 처음 막상 하려고 하면 어떻게 하지 막막할수도 있지만, 구현사항은 간단하다! 눈 class를 만든다. 눈 클래스에서 협력할 기능은 다음과 같다. 1. requestAnimationFrame function에 실행할 draw function을 만든다.(눈그림을 그릴) (draw) 2.resize시에 동작할 function을 만든다. (resize가 되면 stageWidth, stageHeight가 바뀜으로) (init) 내부 function은 다음과 같다. 1. 그리기 전에 위치를 업데이트 해주어야 눈이 내리는것처럼 될것이다. 그러므로 위치 update..