파티클 만들기

index.html 파일에서 canvas를 생성해주고
index.js에 아래코드를 넣어준다.

//파티클 만들기
class Particle {
    constructor(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
    }
    draw() {
        // 원형 그리기
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI / 180 * 360)
        ctx.fillStyle = 'red'
        ctx.fill()
        ctx.closePath()
    }
}

const x = 100
const y = 100
const radius = 50
const particle = new Particle(x, y, radius)

particle.draw()

function animate() {
    window.requestAnimationFrame(animate)
    ctx.clearRect(0, 0, width, height)
    particle.draw();
}

animate()

1. Particle 클래스 선언:

• Particle 클래스는 파티클을 나타내는 객체를 만드는데 사용됩니다.
• constructor(x, y, radius) 메서드는 파티클의 초기 위치와 반지름을 받아 객체를 초기화합니다.
• draw() 메서드는 파티클을 그리는 역할을 합니다.

2. 파티클 그리기:

• draw() 메서드 내부에서 ctx.beginPath()로 캔버스 작업을 시작합니다.
• ctx.arc(this.x, this.y, this.radius, 0, Math.PI / 180 * 360)은 중심 좌표가 (this.x, this.y)이고 반지름이 this.radius인 원을 그리는 명령입니다.
• ctx.fillStyle = 'red'는 원의 내부를 빨간색으로 채우도록 설정합니다.
• ctx.fill()로 설정된 스타일로 원을 채웁니다.
• ctx.closePath()로 캔버스 작업을 종료합니다.

3. 파티클 생성:

• 상수 x, y, radius는 파티클의 초기 위치와 반지름을 정의합니다.
• const particle = new Particle(x, y, radius)는 Particle 클래스의 새로운 인스턴스를 생성하여 파티클을 나타내는 객체를 만듭니다.
• particle.draw()는 생성된 파티클을 화면에 그립니다.

4. 애니메이션 실행:

• animate() 함수는 requestAnimationFrame을 사용하여 애니메이션을 실행합니다.
• ctx.clearRect(0, 0, width, height)로 캔버스를 지우고,
• particle.draw()로 파티클을 다시 그려 화면을 업데이트합니다.

이렇게 하면 코드는 파티클을 만들고 캔버스에 애니메이션을 생성하는 데 사용됩니다.

아직 파티클이 되진 못하고 원형이 아래로 내려오는 애니메이션만 만들어집니다.