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 사이에 원을 그려주는 로직을..

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