Part2. Canvas 챕터 01 - 6. SGV 필터 입히기 강의 시작! 이번 강의에서는 SGV 필터를 활용하여 정의한 필터를 캔버스에 적용하는 과정을 다룬다. 이 강의에서 만들 효과는 강의 소개에서 보여줬던 파티클이 겹쳐져있을 떄 끈적끈적하게 붙어있는 느낌이 드는 효과를 만들 예정이다. 효과를 만들기 앞서 효과의 기본 원리 중 일부분을 알아보기 위해 위의 이미지를 활용했다. 값이 점점 높아지면 흐릿해지는 blur와 값이 점점 높아지면 색상의 대비값이 높아지는 Contrast를 함께 쓰면 흐릿해지면서도 뚜렷해지는 듯한 모습을 볼 수 있다. 필터 두개를 섞어 쓰게 되면 아래와 같은 효과를 얻을 수 있다고 한다. 효과를 넣기 위해서 간단한게 html 파일을 수정했다. ... ... 이러면 끈적끈적한 느낌..

Part2. Canvas 챕터 01 - 5. 파티클에 가속도 주기 강의 시작! 이전 강의에서 Particle 안에 update함수를 정의 하여 파티클에 애니메이션 효과를 넣어 줬다. 이 애니메이션은 일정한 속도로 내려오게 되는데 이 효과를 빠르게 혹은 점점 느리게 시간에 따라 변화하는 방법에 대해 알아보는 시간이 된다. 우선 update 함수에서 속도에 일정한 값을 더 해줘서 가속도를 추가하는 작업을 한다. ... class Particle { ... update() { this.vy += 1; this.y += this.vy; } } ... 이렇게 하면 점점 속도가 더 빨라져서 중력의 영향을 받는 느낌을 낼 수 있다. 좀더 자연스럽게 효과를 주기 위해서는 일정한 값을 더해주는 것이 아니라 일정한 값을 ..

Part2. Canvas 챕터 01 - 4. 파티클 애니메이션 시키기 강의 시작! 기존에 파티클 그리기까지 진행을 해서 그 이후에 파티클에 애니메이션 효과를 넣는 강의를 진행했다. 애니메이션 효과를 넣기 전에 우선 requestAnimationFrame이 실행되는 원리부터 설명을 들었다. requestAnimationFrame 함수는 사용하는 모니터의 성능에 따라 실행되는 횟수가 다른데 60hz의 주사율을 가진 모니터를 기준으로 설명을 했다. 60hz의 모니터에서는 1초에 약 60번 정도 실행이되고 이는 약 16ms마다 실행된다는 뜻이다. 현재시간 now - ( delta % interval ) now - then 1000/10 횟수 now then delta interval fps 0 1000 1000..