Silverback9

오늘은 사각형을 회전시켜 보도록 할게요~^^*

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(6:50)할 수 있어요~^^*

함수 draw()는 무한 반복 함수라는 성질을 이용해서, 사각형을 회전시켜 보겠습니다~^^*

하나. 사각형의 회전 상태, 즉, 좌표체계의 회전 상태를 변수 angle에 담겠습니다.

둘. 각도(Degree)법과 호도(Radian)법의 전환을 위해 angleMode(DEGREES); 와 angleMode(RADIANS);를 사용하겠습니다.

셋. 지속적인 회전을 위해 변수 angle을 증가시키겠습니다.

그럼, 시작해 볼까요~^^*

하나. 각도(Degree)법을 사용해 보겠습니다.

let angle = 0;
//변수 angle은 사각형의 회전 상태, 즉, 좌표체계의 회전 상태를 표현합니다. 

function setup() {
  createCanvas(400, 400);
  
  angleMode(DEGREES);
  //각도(Degree)법에 맞추어 일하자고 컴퓨터에게 알려 줍니다. 
}

function draw() {
  background(146, 83, 161);
  noStroke();
  fill(246, 99, 164);  
  rectMode(CENTER);
  translate(200, 200); 
    
  rotate(angle);
  //좌표체계를 변수 angle 도 만큼 회전시킵니다.
  
  rect(0, 0, 128, 64);
  //캔버스 좌표체계가 시계방향으로 angle 도 만큼 회전된 상태에서 사각형이 그려지므로, 사각형이 화면의 수평선을 기준으로 볼 때 angle 도 만큼 기울어져 보이겠네요. 
  
  angle += 1;
  // 변수 angle의 현재 값에 1을 더하여 다시 변수 angle에 저장합니다.
  // 함수 draw()가 무한반복하기 때문에, 변수 angle은 지속적으로 1씩 커집니다. 
  // 좌표체계가 1 도씩 시계 방향으로 회전하게 될 것이고, 사각형도 좌표체계에 맞추어 그려지므로, 사각형이 1도 씩 시계 방향으로 회전하는 것처럼 보이게 되겠지요?
  
}  

이것을 클릭하여 sketch.js 파일의 코드를 살펴 보셔요. 삼각형을 눌러 프로그램을 실행시켜 사각형의 움직임을 관찰해 보셔요~^^* 회전…하나요?^^* 사각형을 눌러 프로그램 종료하시면 되어요~^^*

둘. 호도(Radian)법을 사용하여 1 라디안 씩 회전시켜 보겠습니다~^^*

let angle = 0;

function setup() {
  createCanvas(400, 400);
  
  angleMode(RADIANS);
  //호도(Radians)법에 맞추어 일하자고 컴퓨터에게 알려 줍니다. 
}

function draw() {
  background(146, 83, 161);
  noStroke();
  fill(246, 99, 164);  
  rectMode(CENTER);
  translate(200, 200); 
    
  rotate(angle);
  //좌표체계를 변수 angle 라디안 만큼 회전시킵니다.
  
  rect(0, 0, 128, 64);
  //캔버스 좌표체계가 시계방향으로 angle 라디안 만큼 회전된 상태에서 사각형이 그려지므로, 사각형이 화면의 수평선을 기준으로 볼 때 angle 라디안 만큼 기울어져 보이겠네요. 
  
  angle += 1;
  // 변수 angle의 현재 값에 1을 더하여 다시 변수 angle에 저장합니다.
  // 함수 draw()가 무한반복하기 때문에, 변수 angle은 지속적으로 1씩 커집니다. 
  // 좌표체계가 1 라디안 씩 시계 방향으로 회전하게 될 것이고, 사각형도 좌표체계에 맞추어 그려지므로, 사각형이 1 라디안 씩 시계 방향으로 회전하는 것처럼 보이게 되겠지요? 우리에게 친숙한 각도(Degree)법으로는 57.xxx 도 씩 홱홱 회전하는 것처럼 보이게 될까요? 
  
}  

이것을 클릭하여 sketch.js 파일의 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 사각형의 움직임을 관찰해 보실까요~^^* 1 라디안 씩 회전하는 모습은 어떠한가요? 넵, 종료는 사각형~^^*

셋. 호도(Radian)법을 사용하면서, angle을 [1/57.3 = 0.0175] 라디안 씩 증가시켜 보겠습니다. 각도(Degree)법으로 1.xxx 도 씩 회전하는 듯한 느낌이 나도록 만들어 봅시다~^^*

let angle = 0;

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

function draw() {
  background(146, 83, 161);
  noStroke();
  fill(246, 99, 164);  
  rectMode(CENTER);
  translate(200, 200); 
  rotate(angle);
  rect(0, 0, 128, 64);
  
  angle += 0.0175;
  // 변수 angle의 현재 값에 [1/57.3 = 0.0175]를 더하여 다시 변수 angle에 저장합니다.
  // 함수 draw()가 무한반복하기 때문에, 변수 angle은 지속적으로 [1/57.3 = 0.0175] 씩 커집니다. 
  // 좌표체계가 [1/57.3 = 0.0175] 라디안 씩 시계 방향으로 회전하게 될 것이고, 사각형도 좌표체계에 맞추어 그려지므로, 사각형이 [1/57.3 = 0.0175] 라디안 씩 시계 방향으로 회전하는 것처럼 보이게 되겠지요? 우리에게 친숙한 각도(Degree)법으로는 1.xxx 도 씩 부드럽게 회전하는 것처럼 보이게 될까요? 
  
}  

이것을 클릭하여 sketch.js 파일의 코드를 살펴보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 보실까요~^^* 사각형이 부드럽게 회전하는 것이 보이시나요~^^* 사각형은 종료 버튼~^^*

넵, 오늘 사각형을 회전시켜 보았습니다~ 우후~^^* 각운동(Angular Motion)을 공부하기 위한 워밍업을 저화 함께 잘 마무리 해주셔서 감사합니다~^^*

우리의 사각형처럼 팔을 벌리고 멋지게 회전을 몇 바퀴하고 오늘이라는 푸른 들판을 누벼 볼까요~^^*

https://youtu.be/yvQ4t-Nk128

오늘도 저와 함께 코~~딩 공부해 주셔서 감사합니다~~~~~^^* 내일도 우리 만나는 거예요~~~~^^* 내일은 각운동(Angular Motion)을 시작해 볼까요~~~^^* YEAH!!!!

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