Silverback9

오늘은 도형을 우리 스스로 만들어 볼게요~^^* 네~~!! 그렇습니다~~!! 도형만들기 함수를 사용하지 않고, 우리 스스로 도형을 만들어 보는 거예요~~!! 직접 만든 쌀가루 반죽으로 이상하고 다양한 모양의 송편을 빚으며 즐거워하던, 추석 전 날, 요린이 시절로 돌아가 보는거예요~~!! 와우!!

도형을 만든다는 것은 어떤 모양을 만든다는 뜻이겠지요? 모양은 영어로? 그렇죠! shape!

그래서!!!

beginShape()____endShape(CLOSE) 구조를 사용하여 닫힌 도형을 만들어 볼까요~^^*

2파이가 회전각 크기로 깔끔하게 나누어 지지 않을 경우, 도착점이 시작점에 닿지 못할 때가 있을 것 같아요. 그럴때, “CLOSE” 가 상황을 조정하여 확실히 닫힌 도형을 만들어 줄 것 같네요~^^*

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

먼저, 노란 테두리의 검은 원을 우리가 직접 만들어 봅시다~^^*

let r = 150;

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

function draw() {
  background(0);
  translate(200,200);
  strokeWeight(10);
  stroke(255, 255, 0);
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 0.01 ){
    //회전각 크기를 0.01씩 증가시켜 2파이가 될 때까지 
    let x = r*cos(a);
    let y = r*sin(a);
    point(x,y);
  }
  endShape(CLOSE);
  //닫힌 도형을 만듭니다~^^*
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행하여 (빛번짐이 없는 특이한) 일식을 관찰해 보셔요~~~신비롭지요~~^^*? 네, 사각형을 눌러 프로그램 종료하시구요~^^*

음…근데요….회전각 크기가 클 수록 2파이 회전하는 동안 우리가 찍을 수 있는 점의 갯수가 줄어드는 것이 되나요….?

회전각 크기에 따라 점의 갯수가 달라지는 원리~^^* 이것을 이용하여, 다양한 도형을 만들 수 있겠는데요~~^^*

음…..마우스의 위치좌표를 회전각 크기와 연결하면~~~^^* 그리고~~~음…점을 꼭지점으로 사용하여 서로를 이어주면~~~^^*

네!! 이번에는 마우스의 위치에 따라 꼭지점 갯수가 달라지면서 형태가 다양하게 변하는 도형을 만들어 볼게요~^^* 함수 map()과 vertex()를 사용해 볼게요~

let r = 150;

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

function draw() {
  background(0);
  translate(200,200);
  strokeWeight(10);
  stroke(255, 255, 0);
  noFill();
  
  let increment = map(mouseX, 0, width, PI, 0.01);

  //마우스가 캔버스 왼편에 있으면 회전각 증가값이 최대 파이만큼 커지고, 마우스가 캔버스 오른편에 있으면 회전각 증가값이 최소 0.01까지 작아집니다. 

  // 회전각 증가값이 0이 되지 않도록 주의해 봅시다~^^* 
  // 왜냐하면, 회전각 증가값이 0가 되면,아무리 덧셈을 반복해도 회전각크기가 커지지 않아요. 0에 0을 계속 더하면 계속 0이예요. 그러면 회전각 크기가 2파이에 다다를 일이 결코 없게 되겠지요. 
  // 그러면, for 반복구조가 반복조건(2파이보다 작기)를 만족하기 때문에 계속 반복될거예요. 영원히!!! 
  // 다시 말해, 종결조건(2파이보다 크거나 같기)을 충족하지 못해서 끝낼 수가 없는 거예요. 결코!!! 
 // 그래서, 회전각 증가값이 0이 되는 어떤 순간을 만나면, 우리의 친애하는 컴퓨터는 for 반복구조 안에 갇혀 영원히 캣휠을 돌려야 해요!!! 어머 그럼 큰일이예요!!! 

 //근데요....제 프로그램에서는, 마우스가 캔버스 왼편 밖을 나가는 것은 괜찮은데 마우스가 캔버스 오른편 밖을 나가면 다운이 되어요....
//음...그래서...일단....마우스나 손가락이 캔버스 화면 오른쪽 바깥으로 나가지 않도록 주의해 보기로 해요~^^;;, 우리~~^^*

  beginShape();
  for(let a = 0; a < TWO_PI; a+= increment ){
    let x = r*cos(a);
    let y = r*sin(a);
    vertex(x,y);
    //(x,y)좌표를 꼭지점으로 사용합니다. 
  }
  endShape(CLOSE);
  
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시키고 마우스/손가락을 좌우로 움직이며 도형의 모양 변화를 관찰해 보셔요. 캔버스 오른쪽 바깥으로 마우스/손가락이 나가지 않도록 주의해 주시구요^^;; 네~ 종료는 사각형~~^^*

도형을 우리 스스로 만들어 내다니!!! 도형의 모양을 다양하게 변화시켜 내다니!!!

괄목할만한 성장을 오늘도 우리가 해내었네요!!!

예전엔 몰랐던 우리의 모습을 새롭게 꿈꾸고 늘 키워나가는 우리의 일생~~~^^* 그 중 가장 소중한 날은? 바로 오늘! 오늘도 함께 코딩 공부해 주셔서 감사합니다~^^* Let’s Lava Each Other 2day, 2~^^*

내일도 재미있는 도형을 우리 손으로 직접 함께 만들어 봐요~~^^* YEAH~~~^^*

네, 꿈은 이루어 집니다~~^^*