Silverback9

오늘은 사인곡선 클래스 정의를 공부해 보도록 하겠습니다.

앞으로 여러 개의 다양한 모양의 사인 곡선을 서로 더하여 하나의 곡선으로 만드는 프로그램을 만들기 위한, 재료 손질 단계라고 할까요?

사인 곡선의 구성 요소는 세 가지가 있습니다~^^*

하나. Amplitude : y= 0에서 y = 최대값 사이의 거리라고 볼 수 있어요. pixel 단위입니다.

둘. Phase : 사인 곡선의 맨 앞부분이 위치하는 곳이라고 볼 수 있어요. radian 단위입니다.

셋. Period: 완전한 형태의 사인 곡선의 처음과 끝 사이 거리라고 볼 수 있어요. pixel 단위입니다.

사인곡 선의 x좌표와 y좌표 사이의 관계를 살펴보면~,

y = sin ( phase + ( ( 2파이 * x ) / period ) ) * amplitude

로 정리해 볼 수 있습니다.

아래 동영상을 복습삼아 처음부터 보셔도 좋을 듯 합니다. 그리고 7:30까지 보시면 사인곡선 클래스를 공부하실 수 이었요~^^*

노트로 한 번 정리해 보았는데요. 한 번 같이 보시죠~^^*

음…근데…phase가 0이 아닌 경우, 그래프를 그려보려고 나니, x의 위치가 좀 애매했어요…생각을 좀 해보았는데, 아직 좀 헷갈려서요. 요건, 완성되면 그때 올려 보도록 할게요^^*

일단 오늘 저는 [ 2파이 * x / period] 부분을 이해할 수 있게 된 것을 보람으로 삼기로 했어요…^^*

그럼 이제 사인 곡선 class를 만들어 볼까요?

class Wave {
  constructor(amp, period, phase){
    this.amplitude = amp;
    this.period = period;
    this.phase = phase;
  }
  
  calculate(x){
    return sin(this.phase + TWO_PIE * x / this.period) * this.amplitude;
  }
}

이제 함수 calculate() 안의 내용이 눈에 들어 오시죠~~^^*

내일은 이 클래스를 가지고, 다양한 사인 곡선을 만들고 함께 더하여 새로운 곡선을 만들어 볼게요~^^*

그리고, 저는 오늘, phase가 0이 아닌 경우, x와 y의 관계를 보여주는 그래프를 좀더 고민해 볼게요~^^*

phase가 0 아닐 때 y값을 시각적으로 이해해 보려니 아직 아리송하지만

노트에 열심히 그려보며 이해해 보도록 할게요! 스페인어를 한글로 받아 적으며 이해해낸 굳센 청소년들처럼!!

달콤하고 시원한 아이스크림 같은 휴식 잠시 가질 수 있는 오후 보내시기 바래요~^^*

오늘도 저와 함께 코딩 공부 해주셔서 감사합니다~~^^*

우리 내일 또 만나요! 또 함께 코딩 공부해요! 아이스크림 두 개를 준비해 놓을게요!

넵, 꿈은 이루어 집니다!