Creative Coding 독학 제049일 2024년05월15일(수)

2024년 5월 15일

오늘은 각도(Degree)와 호도(Radian)를 서로 전환해 주는 함수인 angleMode()을 사용하여 직사각형의 방향 변화를 표현해 보도록 하겠습니다~^^*.

컴퓨터에서는 기본적으로 각도(Degree)법이 아니라 호도(Radian)법을 쓴다고 합니다~^^*. 그래서 반드시 angleMode(DEGREES); 를 통해, 기본세팅인 호도(Radian)법을 각도(Degree)법으로 바꾸어야 합니다~^^*.

아래 강의 영상을 클릭하시면 오늘 공부를 바로 시작(5:13)하실 수 있어요~^^* 6:50까지 보시면 오늘 공부 끝~^^*

먼저, 예쁜 직사각형을 그려보겠습니다~! 여름의 색깔, 핫!핑크 어떠셔요~^^* 우후~^^*

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

function draw() {
  
  background(146, 83, 161);
  //자주빛으로 배경을 칠합니다. 
  
  noStroke();
  //테두리 선은 없습니다. 
  
  fill(246, 99, 164);
  //핫!핑크 색으로 면을 채웁니다.
  
  rectMode(CENTER);
  //사각형의 x,y 좌표값이 사각형의 중심을 나타내도록 합니다. 
  
  rect(200, 200, 128, 64);
  // x, y 좌표값 (200,200)이 사각형의 중심이 됩니다. x축 양방향으로 뻗은 변의 길이는 128픽셀, y축 양방향으로 뻗은 변의 길이는 64픽셀입니다. 
}

이것을 눌러 sketch.js 파일의 코드를 살펴보셔요~^^* 삼각형을 눌러 핫!핑크 직사각형도 구경해 보시구요~^^* 종료는 넵, 사각형~^^*

이번엔 직사각형을 1 Radian 회전해 보겠습니다. 캔버스 좌표체계를 회전하고, 그에 맞추어 직사각형을 그리면, 직사각형이 회전한 것처럼 보이겠지요?


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

function draw() {
  background(146, 83, 161);
  noStroke();
  fill(246, 99, 164);  
  rectMode(CENTER);

  translate(200, 200);
  //캔버스의 좌표 체계를 x, y 좌표값(200,200)을 원점(0,0)으로 하는 상대좌표체계로 바꿉니다. 
 
  rotate(1);
  //좌표체계를 1만큼 회전합니다. 
  //컴퓨터는 호도(Radin)법이 기본입니다. (1) 1만큼 좌표체계를 회전하라는 말은, 1 Radian 만큼 좌표체계를 회전하라는 말이 되고, (2) 우리에게 익숙한 각도로 표현해 보면 약 57.xxx도 정도 회전하라는 말이 되고,(3) 컴퓨터 그래픽 좌표 체계는 시계 방향으로 회전하기 때문에, (4) 시계방향으로 1 Radian (57.xxx도) 회전하게 됩니다.
  
  rect(0, 0, 128, 64);
  //캔버스 좌표체계가 시계방향으로 1 Radian (57.xxx도) 회전된 상태에서 사각형이 그려지므로, 사각형이 화면의 수평선을 기준으로 볼 때 1 Radian (57.xxx도) 만큼 기울어져 보이겠네요. 
  
}

이것을 클릭하여 sketch.js 파일의 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 사각형의 방향 변화를 살펴보셔요. 사각형을 눌러 종료해 주시구요~^^*

이번에는 우리에게 익숙한 각도(Degree)법으로 직사각형을 90도 회전시켜 보겠습니다. 캔버스 좌표체계를 90도 회전하고 그에 맞추어 사각형을 그리면 되겠지요? 호도(Radian)법이 기본인 컴퓨터에게 사람이 익숙해 하는 각도(Degree)법에 맞추어 일을 시키기 위해서는? 그렇죠! angleMode()함수를 써 봅시다~^^*!!


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(90);
  //좌표체계를 시계방향 90도 만큼 회전합니다. 
  
  rect(0, 0, 128, 64);
  //캔버스 좌표체계가 시계방향으로 90도 회전된 상태에서 사각형이 그려지므로, 사각형이 화면의 수평선을 기준으로 볼 때 90도 만큼 기울어져 보이겠네요. 
  
}

이것을 클릭하여 sketch.js 파일의 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 사각형의 방향을 관찰해 보셔요. 90도 기울어져 있나요~^^*? 넵, 종료는 사각형~^^*

고급수학과 컴퓨터의 세계에서는 호도(Radian)법이 기본이 되기 때문에, 우리도 슬슬 호도(Radian)법에 익숙해 질 필요가 있을 것 같아요…^^*!!

앞으로 호도(Radian)에 친숙해 질 수 있도록, 각도(Degree)법과 호도(Radian)법 전환에 대해 한 번 더! 정리해 보겠습니다~^^*

하나. 호도법(Radian)법을 사용하는 이유를 다시 한 번 복습하구요~^^* 단위를 쓰지 않고 숫자로만 표현할 수 있다! 무차원!

둘. 호도(Radian)법에 대해 좀더 자세하게 살펴 볼까요~^^*?