Part2. Canvas 챕터 02 - 6 스파크 작업과 기타 꾸미기 강의 시작! 지난 강의에서는 꼬리가 올라오면서 점차 사라지고 꼬리가 사라진 자리에서 폭죽이 터지는 효과를 구현하는 방법에 대해서 알아봤다. 이번 강의에서는 지난 시간에 미리 준비해놨던 색 변경과 기타 꾸미기 작업까지 구현하는 방법에 대해 알아보는 시간이다. 우선 js 폴더에 Spark.js 파일을 생성하고 CanvasOption을 상속받는 Spark calss를 선언한다. 그리고 그 안에 constructor와 update, draw 함수를 선언하고 constructor가 받는 인자로 x, y, opacity를 설정해준다. 그리고 draw에서 반지름 2인 원을 그려주도록 구현하고 fillStyle을 'gold'로 설정한다. 그리고 Sp..

Part2. Canvas 챕터 02 - 5 꼬리(Tail class) 만들기 강의 시작! 지난 강의에는 폭죽이 터졌을 때, 불꽃이 퍼져나는 파티클을 만드는 방법을 알아봤다. 이번 시간에는 파티클이 시작하자마자 터지는 것이 아니라 꼬리가 발사되어 화면 어느지점에서 꼬리가 사라지면 파티클이 터지는 효과를 만들는 방법을 알아본다. 우선 js폴터에 Tail.js 파일을 만들고 CanvasOption을 상속받는 Tail class를 export default로 선언한다. 그리고 x, vy, color를 인자로 받는 construct를 선언하고 멤버 편수들을 할당하는 로직을 구현한다. 그리고 update 함수에서 y의 값이 vy값을 더해주도록 구현하고 draw함수에서 꼬리를 그려주는 로직을 구현한다. 아래는 Tai..

Part2. Canvas 챕터 02 - 4 불꽃놀이 원 모양으로 랜덤 파티클 만들어보기 강의 시작! 이전 강의에서 만든 폭죽 파티클은 네모난 모양으로 퍼져나갔다. 이번 강의에서는 우리가 알고 있는 원모양으로 퍼져나가는 폭죽 파티클을 만드는 방법을 알아본다. 우선 네모난 방향으로 폭죽 파티클이 퍼져나는 이유를 알아보면, 파티클이 프레임마다 퍼져나가는 방향에 대해서 vx와 vy가 -5~5 사이의 값을 갖도록 구현을 했다. 이를 좌표평면에 그려보면 사각형 모양으로 그려지고 우리는 그 모양대로 폭죽 파티클이 퍼져나가는 것을 알 수 있다. 우리는 동그란 모양으로 퍼져나가길 원하기 때문에 좌표평면에서 원을 그렸을 때, 우리가 vx와 vy에 넣어줄 값을 어떻게 구할지 확인 할 수 있다. 여기서 필요한 것은 삼각함수이..

Part2. Canvas 챕터 02 - 3 파티클과 폭죽의 기본원리 강의 시작! 이번 시간에서는 particle을 반복사용하기 위해 particle을 클래스로 만들어 사용하고 폭죽의 기본 원리를 제작해보는 시간을 갖도록 한다.우선 js 폴더에 Particle.js 파일을 생성한 다음 그 안에 Particle class를 CanvasOption을 상속받도록 만든다. 그리고 기본적으로 사용할 함수들 constructor, update, draw를 정의하고 constructor가 x, y를 인자로 받도록 만들어준다.그리고 constructor에서 super를 호출하고 this.x, this.y로 x와 y를 초기화 해준다.draw 함수에는 ctx.beginPath와 closePath 사이에 원을 그려주는 로직을..