Part2. Canvas 챕터 02 - 1. 불꽃놀이 챕터, 02 - 2. 보일러 플레이트 두가지 방법 강의 시작! 오늘 강의에서는 앞으로 진행할 강의의 뼈대를 만들고 그 기초 뼈대를 보일러플레이트 코드로 사용하는 작업을 알아보기로 한다. 보일러플레이트 코드란? 보일러플레이트는 1890년대에 광고나 컬럼과 같이 계속 사용되는 텍스트 인쇄판을 강철로 찍기 시작했는데, 이를 Boilerplate라고 불렀다고 한다. 여기에 착안하여 컴퓨터 프로그래밍에서 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 뜻한다고 한다. 우선 새로운 폴터를 만들고 그 안에 index.html 파일을 생성하고 visual studio code 의 자동완성 기능을 활용하여 html5 문서를 자동으로 생성..

Part2. Canvas 챕터 01 - 8. 캔버스 resize 다루기 강의 시작! 지난 시간에는 SVG필터를 dat.GUI를 활용하여 실시간으로 확인하는 방법을 알아봤다. 이번 시간에는 창의 크기에 따라서 Canvas의 크기를 갱신해주는 방법을 알아본다. 지금은 Canvas가 처음 초기화 값으로 생성이 되면 창의 크기가 아무리 변경이 되더라도 Canvas의 크기는 초기값 그대로 있어 Window의 크기가 새로 갱신될때마다 Canvas의 값도 같이 갱신되도록 수정하는 과정이 필요하다. 우선 스크립트가 시작되자마자 초기화 해주는 Canvas의 크기 관련 로직을 Init()이라는 함수를 선언하고 그 안으로 로직을 옮겨준다. 그리고 canvasWidth와 canvasHeight를 참조하여 사용하고 있는 par..

Part2. Canvas 챕터 01 - 7. dat.GUI 활용하기강의 시작! 지난 시간에는 SVG필터를 사용하여 시각적으로 다양하게 사용할 수 있는 방법을 알아봤다. 이번 시간에는 값을 직접 입력해서 효과의 변화를 확인하던 불편함을 dat.GUI를 활용하여 실시간으로 확인할 수 있는 방법을 알아본다. dat.GUI를 활용하기 위해서 CDN에서 라이브러리를 가져와야한다. google에서 dat-GUI cdn으로 검색하면 검색 최상단에 있는 링크로 들어가면 dat-gui cdn 패이지가 열린다. 이 패이지에서 최신 버전을 확인하고 최신버전의 min 형태의 라이브러리를 copy script tag버튼을 눌러 복사한다. 그리고 index.html의 head 태그 안에 붙여 넣는다. 이렇게 하면 dat.gui를..

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..