sin는 주로 파도의 높이 표현, cos은 파도의 시작점을 표현하는 데에 주로 사용됨.

가장 중요한 건, 그리고자 하는 애니메이션 좌표를 가져오는 것! 즉, stageWidth, stageHeight 굉장히 중요

종민님 웨이브 클론!
이건 더더더더 공부해야겠다
어렵다! 근데 재밌다
코드는 또 봐야겠다

---

export class Point {
  constructor(x, y) {
    /*  웨이브를 그리는데 이용되는 점들은
            아래 위로 랜덤하게 offset 값을 가짐
        */
    this.x = x;
    this.y = y;
    this.fixedY = y; // 기본 Y 중심
    this.speed = 0.1;
    this.cur = 0;
    this.max = Math.random() * 100 + 150;
  }

  update() {
    this.cur += this.speed;

    this.y = this.fixedY + Math.sin(this.cur) * this.max;
  }
}

---

✨ 궁금증 해결

1. max 범위 지정

this.max = Math.random() * 100 + 150;


this.y = this.fixedY + Math.sin(this.cur) * this.max;

---

2. point의 간격

먼저, totalPoints를 넘겨줘서 몇개의 포인트를 생성할 것인지 각각 Wave 마다 정의해주기

간격 = 총 stageWidth에서 totalPoints 를 나눈값

this.pointGap = this.stageWidth / (this.totalPoints - 1);

간격만큼, 간격에 맞춰서 point를 화면에 그려주기

init 함수 재설정

기존 ver.

 // init() 함수를 실행시켜 Point 생성
    init() {
        // 생성된 point에는 위 resize 함수에서 정의한 화면중앙에 나타나도록
        this.point = new Point(this.centerX, this.centerY);
    }

재설정 ver.

init() {
    this.points = [];

    for(let i = 0; i < this.totalPoints; i++){
        const point = new Point(
            this.index + i,
            this.pointGap * i,
            this.centerY,
        );
        this.points[i] = point;
    }
}

업데이트된 point개수에 맞추어 draw함수도 업데이트

기존 ver.

// 아까 예시로 빨간 공 

draw(ctx) {
    ctx.beginPath();
    ctx.fillStyle = '#ff0000';

    this.point.update();

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

업데이트 ver.

draw(ctx) {
        ctx.beginPath();
        ctx.fillStyle = this.color; // 현재 wave color로

        let prevX = this.points[0].x;
        let prevY = this.points[0].y;

        ctx.moveTo(prevX, prevY);

        for (let i = 0; i < this.totalPoints; i++) {
            if (i < this.totalPoints - 1) {
                this.points[i].update();
            }

            const cx = (prevX + this.points[i].x) / 2;
            const cy = (prevY + this.points[i].y) / 2;

            ctx.lineTo(cx, cy);

            prevX = this.points[i].x;
            prevY = this.points[i].y;
        }

        ctx.lineTo(prevX, prevY); // 중간값
        ctx.lineTo(this.stageWidth, this.stageHeight);
        ctx.lineTo(this.points[0].x, this.stageHeight);
        ctx.fill();
        ctx.closePath();
    }

ctx.lineTo(cx, cy);


ctx.quadraticCurveTo(prevX, prevY, cx, cy);