Silverback9

오늘은 사인곡선의 Frequency를 표현하는 프로그램을 만들어 보겠습니다~~^^*.

Frequency 즉 빈도 또는 회수는 어떤 것이 단위 시간 동안 몇 번 반복되는가를 나타낼 텐데요.

보통 애니메이션은 1초에 60 장의 프레임을 가지고 있어서, 어떤 운동의 전체 동작을 60단계로 나누어 프레임 별로 담으면, 1초에 그 전체 동작을 한 번 완전하게 볼 수 있게 될까요?

아래 동영상 강의를 클릭하시면 오늘 공부내용을 바로 시작(4:23)하실 수 있어요. 8:15까지 보시면 오늘 공부 끝~~^^*

사인 곡선은 0 ~ 2파이 구간이 하나의 완전한 사인곡선 모습을 보여줍니다~~^^*.

구간의 폭( 2파이 )를 60단계로 나누어, 1초 동안 제1단계 ~ 제60단계를 차례로 다 보여주면, 1초 동안 하나의 완전한 사인곡선의 모습을 표현하게 됩니다~~.

어제 우리는 sin(회전각) 값(-1 ~ 1)을 반지름(0 ~ 200) 으로 가지는 원을 만들어 보았는데요~~^^*

회전각을 2파이/60 단위로 증가시키며,

반지름 = sin(회전각);

원그리기(반지름);

을 반복하면,

1초 마다 커졌다가 작아지기 1번을 반복하는 원을 볼 수 있게 되겠지요?

네, 오늘은 (1)단위 빗변의 회전각 운동에 대한 (2)사인곡선에 대한 (3)원의 (4)전체 변화 사이클을 (5)1초/60프레임에 담아 보여주는 프로그램을 만들어 보겠습니다~~^^*.

let angle = 0; 
 

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  translate(200, 200);
  fill(255, 125, 0);
 
  r = map(sin(angle), -1, 1, 0, 200);
  
  //반지름이 음수의 값을 가지지 않고, 눈에 변화가 잘 보이는 원을 만들기 위해, 반지름 값의 범위를 [-1 ~ 1]에서 [0 ~ 200]으로 변환하겠습니다. 
  
  circle(0, 0, r*2);
  //사인(회전각)을 반지름으로 가진 원을 그림니다.
  
  let increment = TWO_PI / 60;
  //사인곡선의 완전한 형태를 볼 수 있는 2파이 구간을 60으로 나누겠습니다.
  //사인곡선을 반복적 변화를 원의 반복적 변화를 통해 표현합니다.
  //함수 draw()가 60번 반복하면, 변화 사이클이 한 번 완성됩니다.
  //함수 draw()는 일 초에 약 60번 반복합니다.
  //우리는 1초 간격으로 사인곡선의 한 번의 변화 사이클을, 원의 변화 사이클을 통해 간접적으로, 느껴볼 수 있습니다.  
  
  angle +=  increment;
  console.log(frameRate(), angle);
 
}

콘솔 창을 통해 Frame Rate와 회전각 크기를 확인하실 수 있습니다~.

이 프로그램의 Frame Rate는 정확하게 60은 아닌 경우가 많습니다. 그리고 회전각의 크기가 계속 커집니다.

그런데…프로그램을 실행시키면, 시간이 지날 수록 원의 변화가 느려지는 것 같습니다. 변화 사이클이 처음에는 1초 간격을 얼추 유지하는데…점점 그 간격이 커지는 것 같습니다…. 한 번 테스트 해 보시죠…원인은 무엇일까요?…음….

음악은 한 박자도 나누고 나누고 나누어 절도와 흥겨움과 슬픔과 아름다움과 박력을 연결하여 표현합니다. 이것을 다시 몸으로 표현하는 멋진 과정인 춤. 음악도 춤도 그리고 다른 어떤 분야들도 모두 장인정신으로 연마하여 표현해내는 것 같아요.

넵! 계속 코딩 공부 해나가겠습니다! 장인정신을 기르겠습니다! 왜 느려지는 지 계속 고민해 보겠습니다!

오늘도 함께 코딩 공부해 주셔서 감사합니다~^^* 점심 맛있게 드시구요~~^^*

내일 우리 또 만나서 함께 코딩 공부 해요~~~^^*

넵, 꿈은 이루어 집니다!!!