Silverback9

오늘은 살짝살짝 구겨지거나 펴지는 도형의 크기와 상하좌우 비례를 마우스/손가락으로 조정하는 프로그램을 만들어 보겠습니다~^^*

도형의 테두리를 결정짓는 것은 회전각의 빗변이었지요? 이 빗변의 길이를 살짝살짝 늘이거나 줄이거나 하면서 회전을 하면, 테두리가 불규칙적인 도형이 만들어 질 것 같아요!! 우리 함께 실험해 볼까요~^^*? YEAH~~~!!!!

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

(1)도형의 크기가 변화하려면, 기본 빗변 길이에 어떤 값을 빼거나 늘이면 될 것 같아요. (2)도형의 테두리가 살짝살짝 구겨지려면, 빗변 길이에 어떤 범위의 무작위값을 빼거나 늘이면 될까요? (3)상하좌우 비례가 변화하려면, x축 길이값과 y축 길이값을 독립적으로 조정하면 어떨까요? (4)도형의 모양이 다양하려면, 회전각 크기를 다양하게 설정해 볼까요~^^* (5)도형의 테두리를 점으로도 표현해 보고, 선으로도 묘사해 보고 싶어요~^^* 참~~ 재~미겠~지요~~^^*

그래서!!!

1. x = (r + xOffset) * cos(angle);

2. y = (r + yOffset) * sin(angle);

3. x = (r + xOffset) * cos(angle) + random(최소값, 최대값);

4. y = (r + yOffset) * sin(angle) + random(최소값, 최대값); 

5. xOffset = map(mouseX, 0, width, 최소값, 최대값);

6. yOffset = map(mouseY, 0, height, 최소값, 최대값);

7. angle += 0.01  /  angle += PI/2  / angle  += 2*PI/3, etc

8. point(x, y);   /  vertex(x, y);

등을 사용해서 우리 이제 도형 만들기 해 볼까요~~~~? 출발~~~~^^*

하나. 노란 유채꽃밭 테두리를 가진 타원형을 만들어 봅시다!

// 마우스/손가락으로 타원형의 모양을 다양하게 변화시켜 봅시다!!
// 흔~들리는 봄~바람에~~유 채 꽃~펴요~~ 

let r = 0;
let increment = 0.01;

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

function draw() {
  background(0);
  
  let xWidth = map(mouseX, 0, width, -150, 150);
  let yWidth = map(mouseY, 0, height, -150, 150);
  
  translate(200,200);
  strokeWeight(7);
  stroke(255, 255, 0);
  noFill();
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= increment){
    let x = (r+xWidth)*cos(a) + random(-50, 50);
    let y = (r+yWidth)*sin(a) + random(-50, 50);
    point(x,y);
  }
  endShape(CLOSE);
}

이것을 클릭하여 sketch.js 파일을 열어 코드 내용을 살펴 보셔요~^^* 삼각형을 클릭하여 프로그램을 실행하고, 마우스/손가락으로 캔버스 사방을 자유롭게 노다니시며 도형의 형태 변화를 관찰해 보셔요~ 종료는 사각형~~^^*

// 마우스/손가락으로 타원형의 모양을 다양하게 변화시켜 봅시다!!
// 붉은 가지 덤불로 둘러싸인 비밀의 정원을 만들어 봅시다.  

let r = 0;
let increment = 0.01;

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

function draw() {
  background(0);
  
  let xWidth = map(mouseX, 0, width, -150, 150);
  let yWidth = map(mouseY, 0, height, -150, 150);
  
  translate(200,200);
  strokeWeight(1);
  stroke(255, 0, 0);
  noFill();
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= increment){
    let x = (r+xWidth)*cos(a) + random(-50, 50);
    let y = (r+yWidth)*sin(a) + random(-50, 50);
    vertex(x,y);
  }
  endShape(CLOSE); 
}

이것을 클릭하여 sketch.js 파일을 열어 코드 내용을 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시하셔요~ 마우스/손가락을 사방 자유롭게 움직이며 붉은 가시나무 덤불로 감싸인 비빌의 정원을 디자인해 볼까요~^^* 넵, 종료는 사각형~~^^*

//우리가 보면 꽁꽁 얼어붙는 댄서 도형을 만들어 봅시다!

let r = 0;
let increment = 0.4;

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

function draw() {
  background(0);
  
  let xWidth = map(mouseX, 0, width, -150, 150);
  let yWidth = map(mouseY, 0, height, -150, 150);
  
  translate(200,200);
  strokeWeight(7);
  stroke(255, 125, 100);
  fill(100, 125, 255);
  
  noLoop();
  //얼었다!!!
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= increment){
    let x = (r+xWidth)*cos(a) + random(-50, 50);
    let y = (r+yWidth)*sin(a) + random(-50, 50);
    vertex(x,y);
  }
  endShape(CLOSE);
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 도형 모양을 살펴 보셔요. 종료는 사각형~^^* 실행과 종료를 반복하며, 우리가 안볼 때 즐겁게 춤을 추다가 우리가 보면 꽁꽁 얼어붙는 수줍은 댄서도형을 관찰해 보셔요~~^^* 실행버튼을 누르는 우리의 마우스/손가락 위치에 따라 도형의 크기와 좌우비례가 결정되다 보니, 도형의 전체적 크기와 비례는 늘 똑같을 것 같아요. 그래서 더더욱 “동일인인 한 명의 댄서의 매번 다른 몸동작” 느낌이 날 것 같아요~ PC/스마트폰 모니터의 p5.js의 실행 버튼인 삼각형이 어디에 있느냐에 따라 체형이 다른 댄서로 바뀔 수도 있겠네요. 흠…

오늘 다양한 크기와 상하좌우 비례를 가진 도형을 우리가 마우스/손가락으로 조정하며 만들어 봤어요~ 전체적 형태의 느낌은 유지하면서도 리듬감있게 변화되는 비례와 크기. 마우스/손가락에 의해 생겨나는 리듬에 따라 춤을 추고 노래를 부르는 멋진 합창단원들의 집합체 같아요~

점심이 너무 맛있어서 살짝쿵 상체 댄스를 하다 자세를 바로잡곤하는 수줍은 댄서가 되어 볼까요~^^*

오늘도 저와 함께 코딩 공부해 주셔서 감사합니다~^^*

우리 내일 또 만나서 함께 공부하기로 해요~~~^^*

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