위, 아래로 움직이는 원 만들기

	const canvas = document.querySelector("#testCanvas");
    const ctx = canvas.getContext("2d");
    //캔버스 크기 설정
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    //캔버스 위치 설정
    let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;

    //위치 설정
    class Point {
        constructor(x = 0, y = 0, index = 0) {
            this.x = x;
            this.y = y;
            this.originY = y;
            this.speed = 0.05; 
            this.index = index;
            this.position = this.index;
            this.maxHeight = 100;
        }

        update() {
            this.position += this.speed;
            this.y = this.originY + Math.sin(this.position) * this.maxHeight;
        }
    }

    // 원 설정
    class Circle {
        constructor(x = 0, y = 0, color = "#f4a261", size = 20, index = 0) {
            this.x = x;
            this.y = y;
            this.color = color;
            this.size = size;
            this.point = new Point(this.x, this.y, index);
        }

        //원 설정
        draw(ctx) {
            ctx.beginPath();
            ctx.fillStyle = this.color;

            this.point.update();

            ctx.arc(this.point.x, this.point.y, this.size, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        }
    }

    class CircleGroup {
        constructor() {
            this.points = [];
            this.circles = [];
            this.totalCircles = 10;
            this.circleGap = canvas.width / (this.totalCircles + 1);

            for (let i = 0; i < this.totalCircles; i++) {
                //원 인스턴스 생성
                const circle = new Circle(
                    this.circleGap * (i + 1),
                    centerY,
                    "#f4a261",
                    20,
                    i
                );
                this.circles[i] = circle;
                this.points[i] = circle.point;
            }
        }

        draw(ctx) {
            for (let i = 0; i < this.totalCircles; i++) {
                const circle = this.circles[i];
                circle.draw(ctx);
            }
        }
    }

    //사이즈 설정
    const onResize = (e) => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        centerX = canvas.width / 2;
        centerY = canvas.height / 2;
    };
    window.addEventListener("resize", onResize);

    //원 인스턴스 생성
    const circleGroup = new CircleGroup();

    // 애니메이션 설정
    const animate = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        circleGroup.draw(ctx);
        requestAnimationFrame(animate);
    };

    animate();