[패스트캠프] 9일차 2.28

Part 2. 캔버스 Chapter 02 – 5 딕 클래스 구축 강의 시작!

지난 강의에서 우리는 폭죽이 터질 때 화염을 전파하는 입자를 만드는 방법을 살펴보았습니다.
이 시간 동안 파티클이 시작하자마자 폭발하는 대신 꼬리가 결국 화면에서 사라질 때 파티클이 폭발하는 효과를 만드는 방법을 배웁니다.

먼저 js 폴더에 Tail.js 파일을 만들고 CanvasOption이 내보내기 기본값으로 상속하는 Tail 클래스를 선언합니다.
그런 다음 x, vy 및 color를 인수로 사용하는 구문을 선언하고 멤버 버전을 할당하는 논리를 구현합니다.

업데이트 함수에서 y 값을 구현하여 vy 값을 더하고 그리기 함수에서 꼬리를 그리는 로직을 구현합니다.

아래는 Tail.js 코드입니다.

import CanvasOption from "./CanvasOption.js";

export default class Tail extends CanvasOption  {
    constructor(x, vy, color){
        super();
        this.x = x;
        this.y = this.canvasHeight;
        this.vy = vy;
        this.color = color;
    }

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

    draw() {
        this.ctx.fillStyle = this.color;
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, 1, 0, Math.PI * 2);
        this.ctx.fill();
        this.ctx.closePath();
    }
}

그리고 꼬리를 관리하기 위해 꼬리 배열을 파티클처럼 선언하고 createTail 함수를 선언하여 꼬리 생성 로직을 구현합니다.
이 크레이트테일 기능은 렌더링 기능의 프레임 기능에서 수행됩니다.
그냥 실행하면 매 프레임마다 꼬리가 생기기 때문에 Math.random 함수를 사용해서 0.03 이하의 숫자(강의에서는 0.03이지만 커스터마이징 가능)이면 실행하면 해당 꼬리 수가 생성됩니다.

그리고 Tail이 사라지는 동안 폭죽이 터지게 하려면 Tail의 vy 값을 확인하고 -1 미만이면 Tails에서 제거하고 createParticles를 실행합니다.
꼬리가 사라지면 폭죽이 터지는 것을 볼 수 있습니다.
다만, 기존 createParticles는 x, y의 임의의 값을 생성하기 때문에 꼬리의 x, y 값을 전달하여 빠진 꼬리 위치에서 폭죽이 터지도록 변경하면 폭죽 체크 효과를 변경할 수 있다.
올라가 폭발합니다.
그리고 Particle 클래스의 생성자는 color를 인자로 받아서 draw 함수에서 ctx fillStyle의 값을 rgba(${this.color), ${this.opacity)로 변경할 수 있다는 점을 추가한다.

아래는 수정된 index.js 코드의 일부입니다.

...
import Tail from "./js/Tail.js";
...

class Canvas extends CanvasOption {
    constructor() {
    	...
        this.tails = ()
        ...
    }
    ...
    createTail() {
        const x = randomNumBetween(this.canvasWidth * 0.2, this.canvasWidth * 0.8);
        const vy = this.canvasHeight * randomNumBetween(0.01, 0.015) * -1;
        const color="255, 255, 255";
        this.tails.push(new Tail(x, vy, color));
    }
	
    createParticles(x, y, color) {
        const PARTICLE_NUM = 400;
        for (let i = 0; i < PARTICLE_NUM; i++){
            const r = randomNumBetween(2, 100) * hypotenuse(innerWidth, innerHeight) * 0.0001;
            const angle = Math.PI / 180 * randomNumBetween(0, 360);
            const vx = r * Math.cos(angle);
            const vy = r * Math.sin(angle);
            const opacity = randomNumBetween(0.6, 0.9)
            this.particles.push(new Particle(x, y, vx, vy, opacity, color));
        }
    }

    render() {
        let now, delta;
        let then = Date.now();

        const frame = () => {
        	...
            if (Math.random() < 0.03) this.createTail();

            this.tails.forEach((tail, index) => {
                tail.update();
                tail.draw();

                if(tail.vy > -1){
                    this.tails.splice(index, 1);
                    this.createParticles(tail.x, tail.y, tail.color);
                }
            })
            ...
        }
    }

}
...

마지막으로 직선으로 올라가는 꼬리는 평평하기 때문에 우리가 상상하는 불꽃의 꼬리를 올리고 흔들도록 Tail 클래스를 수정하겠습니다.

꼬리가 좌우로 흔들리고 위로 올라가게 하려면 -1과 1 사이에서 좌우로 움직입니다.
이 일정한 움직임을 수행하기 위해 삼각 함수를 사용할 수 있습니다.
값이 -1과 1 사이에서 지속적으로 변하는 함수는 사인 또는 코사인 함수입니다.
이를 이용하여 x의 값을 변경하면 흔들렸을 때 꼬리가 올라가는 것을 볼 수 있습니다.

아래는 수정된 Tail 클래스 코드입니다.

...
import { randomNumBetween } from "./utils.js";

export default class Tail extends CanvasOption  {
    constructor(x, vy, color){
        ...
        this.angle = randomNumBetween(0, 2);
        ...
    }

    update() {
    	...
        this.angle += 0.3;
        this.x += Math.cos(this.angle) * this.vy * 0.2;
        this.opacity = -this.vy * 0.1;
    }

    draw() {
        this.ctx.fillStyle = `rgba(${this.color}, ${this.opacity})`;
        ...
    }
}

결과물을 보면 폭죽이 흔들린 뒤 마지막에 폭발하며 서서히 사라지는 효과를 볼 수 있다.

http://bit.ly/3Y34pE0

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