const canvas = document.getElementById('canvas'),
  context = canvas.getContext('2d');

function Oscillator() {
  const self = this;
  this.init = function() {
    self.angle = 0;
    self.frameCount = 0;
  };

  this.draw = function() {
    // 진폭을 픽셀 단위(길이)로 표현한다
    const amplitude = 100;
    // 주기는 프레임 단위(시간)으로 표현한다
    const period = 120;
    //코사인 함수는 2 * PI라디안 마다 반복된다(0,2*pI,4*PI,6*PI)일때마다 반복
    //주기(period)가 120이라면 frameCount가 120, 240, 360때 같은 결과
    //frameCount / periodsms aucqjs wlsehdgoTsmswl(0.5번은 절반, 1이면 1번 진동한 상태)
    const x = amplitude * Math.cos( (2*Math.PI) * ( self.frameCount / period));
    self.frameCount++;
     
    // 각속도의 개념을 활용해 변수를 증가시켜서 표현 할 수 있다.
    // 각속도가 클수록 더 빠르게 진동
    // 각속도가 2 * PI가 될때까지 더해지는 시간만큼이 주기 (주기 = 2*PI / 각속도)
    // const aVelocity = 0.05;
    // const x = amplitude * Math.cos(self.angle);
    // self.angle += aVelocity;
    
    context.beginPath();
    //화면 중간에 진동하는 오브젝트를 매 프레임 그려준다
    context.arc(x+(canvas.width/2), (canvas.height/2), 5, 0, Math.PI*2, false); 
    context.closePath();
    context.fill();

  };
};

const obj = new Oscillator();
obj.init();
// animation loop
function loop() {
  context.clearRect(0,0,canvas.width,canvas.height);
  obj.draw();
  requestAnimationFrame(loop);
}

loop();