Silverback9

일요일 밤이 되었네요~^^* 네, 오늘 아침부터 움직이게 되어, 저녁에 코딩 공부를 하게 되었어요~^^*

오늘은 사인곡선을 원으로 변환하는 프로그램을 만들어 보겠습니다~^^*

아래 동영상 강의를 클릭하셔서 4:24까지 보시면 오늘 공부 끝~^^*

아래의 노트를 보시며 내용 정리를 하셔도 좋을 것 같아요~^^*

빗변 길이 1의 회전각 운동의 y 좌표 값은 sin(회전각 크기)이지요?^^*

회전각 크기를 가로축으로 하고 y 좌표값, 즉, sin(회전각 크기)를 세로축으로 하는 사인곡선을 그려보았습니다.

이제, sin(회전각 크기)를 반지름으로 갖는 원을 그려보겠습니다.

그러면, 물결모양의 사인곡선이 점점 커지다가 점점 작아지기를 반복하는 원의 형태로 바뀌어 지겠네요~^^*

회전각 크기 파이에서 2파이 사이 구간에서는 sin(회전각 크기) 값이 음수가 되어, 원의 반지름으로 사용할 수 가 없습니다.

그리고 원의 크기의 변화가 눈에 잘 보이도록, 반지름을 키우기 위해, 반지름의 값을 200배로 늘려 보겠습니다.

그래서 sin(회전각 크기) 값의 범위를 [-1 ~ 1]을 [0~200]로 변환하기 위해 함수 map()을 사용해 볼까요~^^*

let angle = 0; 

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

function draw() {
  background(0);
  translate(200, 200);
  fill(255, 255, 0);
  
  r = map(sin(angle), -1, 1, 0, 200);
  //반지름이 음수의 값을 가지지 않고, 눈에 변화가 잘 보이는 원을 만들기 위해, 반지름 값의 범위를 [-1 ~ 1]에서 [0 ~ 200]으로 변환하겠습니다. 
  
  circle(0, 0, r*2);
  
  angle +=  0.01;
}

이것을 클릭하여 sketch.js 파일을 열어 코드 내용을 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 부풀어 올랐다 줄어 들었다를 반복하는 평화로운 원을 지켜보시겠어요~^^* 마음이 기분좋게 이완되는 것 같아요~~~^^*

길이 1의 빗변의 회전각 운동에서 y축 좌표값을 추출하기 위해 sin(회전각 크기)를 계산하였고, 이 sin(회전각 크기) 값을 반지름으로 갖는 원을 그렸더니, 이렇게 평화로운 움직임이 탄생되었어요~

소리를 컴퓨터로 표현하여 테크노 음악 장르를 개척하고, 다시 이 테크노 음악 스타일을 악기로 재현하였더니, 이렇게 평화로운 음악이 탄생되었어요~^^*

형제가 없는 음악이 물질을 만나 이미지 작품을 만들어 내는 평화의 과정~^^*

오늘도 함께 코딩 공부 해주셔서 감사합니다~^^* 밤 늦게까지 수고 많으셨어요~^^*

평화로운 밤 속에서 피로를 씻어내고, 까쓸까쓸 기분좋은 새로운 활력을 입고, 편안히 주무셔요~ 코~^^*

내일은 우리 또 만나 음악을 함께 들어요~^^* 행복한 월요일이 될테니까요~^^*

네!!! 꿈은 이루어 집니다~~~!!!