패스트캠퍼스 환급챌린지 15일차 미션 (2월 15일) : 초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas 강의 후기

오늘은 이어서 Part2 [Canvas]의 Chapter02 불꽃놀이 강의를 들었습니다.(01~03강)

 

그럼 오늘 강의에서 배운 내용들을 간략하게 작성해 볼게요!

 

🔎01. 보일러 플레이트 코드 추가

이번 프로젝트에서는 지난 프로젝트와 다르게 파일을 분리하는 것부터 시작했습니다. 코드가 복잡해짐에따라 한 파일에 작성하는 것은 아무래도 가독성에 무리가 있으니까요.

 

우선 init 함수를 만들어 캔버스에 dps 값을 적용하여 보다 선명한 화면을 만들어줍니다.

function init() {
    canvasWidth = innerWidth;
    canvasHeight = innerHeight;

    // 캔버스 고유 사이즈 지정
    canvas.width = canvasWidth * dpr;
    canvas.height = canvasHeight * dpr;
    ctx.scale(dpr, dpr); // 캔버스 안의 전체 컨텐츠가 확대됨
    // css로 캔버스 고유 사이즈를 강제로 css에 맞춰 변경
    canvas.style.width = canvasWidth + 'px'; // 확대가 된것을 강제로 사이즈 조절하여 window innerWidth, innerHeight에 맞춰 조절-> 선명한 화면 
    canvas.style.height = canvasHeight + 'px';
}

 

render 함수를 만들어서 fps와 상관없이 모든 화면에서 동일한 애니메이션을 볼 수 있도록 초기설정을 해줍니다.

function render() {
    requestAnimationFrame(render);
    now = Date.now()
    delta = now - then;

    if (delta < interval) return;
    // main code

    then = now - (delta%interval);
}

 

이전 포스트에서도 언급한 부분이지만, 예시로 조금 더 설명을 추가해보겠습니다.

아래는 canvas의 너비와 높이를 각각 400픽셀로 설정한 후, dpr, scale, 그리고 CSS 설정을 차례로 추가하는 과정입니다.

DPR이 1일때와 DPR이 2일때

dpr을 1에서 2로 늘릴 경우 캔버스의 크기가 2배로 커진 것을 확인하실 수 있습니다.

 

여기에서 canvas.scale(dpr, dpr)를 추가해주면 모든 컨텐츠 사이즈가 캔버스와 똑같이 확대가 됩니다.

 

 

그리고 마지막으로 캔버스에 스타일로 목표 사이즈를 조정해주게 되면 다시 DPR이 1일 때 모양으로 보이게 됩니다!

 

 

init과 render까지 추가하였으면 마지막으로 addEventListener로 윈도우 로드가 완료됐을 때와 리사이즈 됐을 때 실행할 콜백을 추가해줍니다.

window.addEventListener('load' , () => {
    init();
    render();
})

window.addEventListener('resize', () => {
    init();
})

 

참고로 강의에서는 이 보일러플레이트 코드를 클래스로 변경해서 사용했습니다.

class Canvas extends CanvasOption {
  constructor() {
    // 부모클래스에서 만든 변수, 메서드를 자식 메서드가 사용할 수 있음
    super();
  }

  init() {
    this.canvasWidth = innerWidth;
    this.canvasHeight = innerHeight;

    // 캔버스 고유 사이즈 지정
    this.canvas.width = this.canvasWidth * this.dpr;
    this.canvas.height = this.canvasHeight * this.dpr;
    this.ctx.scale(this.dpr, this.dpr); // 캔버스 안의 전체 컨텐츠가 확대됨

    // css로 캔버스 고유 사이즈를 강제로 css에 맞춰 변경
    this.canvas.style.width = this.canvasWidth + "px"; // 확대가 된것을 강제로 사이즈 조절하여 window innerWidth, innerHeight에 맞춰 조절-> 선명한 화면
    this.canvas.style.height = this.canvasHeight + "px";
  }
  ...
 }

 

 

🔎02. Particle Class 추가

아래처럼 파티클 클래스를 정의하고 canvas class로 돌아가서 constructor에 particles 배열을 추가해줍니다.

import CanvasOption from "./CanvasOption.js";

export default class Particle extends CanvasOption {
  constructor(x, y) {
    super();
    this.x = x;
    this.y = y;
  }

  update() {}

  draw() {
    // 호를 그리기 시작한다고 알림
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
    this.ctx.fill();
    this.ctx.closePath();
  }
}

 

그리고 createParticles 함수를 추가 후 아래처럼 작성하고

  createParticles() {
    const PARTICLE_NUM = 1;
    for (let i = 0; i < PARTICLE_NUM; i++) {
      const x = 300;
      const y = 300;

      this.particles.push(new Particle(x, y));
    }
  }

 

 

render 함수 내에 파티클 배열을 돌며 update와 draw 메서드를 반복하는 코드를 추가해주시면 

    this.particles.forEach((particle) => {
        particle.update();
        particle.draw();
      });

 

 

아래처럼 작은 점이 찍히는 것을 확인하실 수 있습니다.

 

 

 

파티클이 움직이는 것처럼 보일려면 Update함수에서 현재 x, y값에 속도를 붙여주시면 됩니다.

간단하게 this.y += 1을 추가해보면 캔버스를 초기화하는 옵션을 추가하지않아 기존 도형이 그대로 보여 일직선을 그리는 것처럼 보이게 됩니다.

  update() {
    this.y += 1;
  }

 

이를 해결하기 위해 canvas 클래스의 render함수에 clearRect 함수를 호출할 수도있지만, 강의에서는 배경색 역할을 겸하기 위해 공을 흰색으로, 배경을 검은색으로 매 프레임마다 색칠하는 방식으로 진행했습니다.

// render 함수에 추가된 배경색 칠하는 코드     
this.ctx.fillStyle = this.bgColor;
this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);

// particle draw 함수 코드
  draw() {
    this.ctx.fillStyle = "#ffffff";
    // 호를 그리기 시작한다고 알림
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
    this.ctx.fill();
    this.ctx.closePath();
  }

 

 

 

여기까지가 기본 코드이고, 이후 아래 코드들을 추가해주면 기본적인 불꽃놀이 애니메이션이 완성됩니다.

1. 각 파티클을 랜덤하게 배치하는 코드 추가

2. 공이 화면밖으로 나갔을 때 더 이상 렌더링되지않게 변경

3. 공이 사각형형태가 아닌, 원 형태로 퍼지게 변경

 

2번까지 적용 시 아래와 같은 애니메이션이 보이게 됩니다.

 

✨오늘의 학습 인증 샷

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://fastcampus.co.kr/event_online_challenge_2401_mission

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스

https://bit.ly/48sS29N