Silverback9

오늘은 나선형 회전운동을 표현하는 프로그램을 만들어 보겠습니다~^^*.

먼저, 극좌표계(Polar Coordinate System)와 데카르트 좌표계(Cartesian Coordinate System)대한 복습 간단히 한 번 하고 가실게요~^^*

p5.js는 입체 (x, y, z) 데카르트 좌표계(Cartesian Coordinate System)을 기반으로 합니다~^^*. 아직은 우리가 z축을 다루지 않고 평면 (x, y) 좌표계만 쓰고 있습니다~^^*

이제 본격적으로 오늘의 코딩 공부를 시작해 볼까요~~^^* YEAH!!!

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

어제 노트 정리의 그림처럼, 회전각이 커짐에 따라 빗변의 길이가 점점 짧아지면 나선형 회전운동을 하게 되겠지요? 자세한 내용은 코드 안의 주석을 참고하셔도 좋을 듯 합니다~^^*

 let r = 170;
 let angle = 0;
 // 처음 빗변길이 170픽셀 3시방향입니다. 

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

function draw() {
  
  translate(200,200);
  strokeWeight(5);
  stroke(255, 255, 0); //나랑 노랑~노랑~
  let x = r*cos(angle);
  let y = r*sin(angle);
  point(x, y); 
  
  angle -= 0.01;
  r -= 0.02;
  //회전각과 빗변 길이가 점점 작아지면서 수렴하는 나선형태로 반시계방향 회전운동을 합니다~
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행하여 산뜻한 노란색의 수렴나선이 만들어 지는 것을 관찰해 보셔요~^^* 종료는 사각형~~^^*

응용작품 도전! 하나. 불꽃을 일렁거리며 확산하는 나선을 만들어 볼까요~~?

let r = 10;
let angle = 0;
 // 처음에는 빗변길이 10픽셀 3시방향 입니다. 

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

function draw() {
  background(0, 7);
  translate(200,200);
  strokeWeight(5);
  stroke(255, 125, 0); //주황빛 불꽃!
  
  let x = r*cos(angle) + random(-1, 1);
  let y = r*sin(angle) + random(-1, 1);
  //사방 2픽셀 범위로 일렁이는 불꽃을 만들며 회전해  봅시다!  
  point(x, y); 
  
  angle += 0.02;
  r += 0.2;
  //빗변 길이가 점점 커지면서 확산하는 나선형태로 시계방향 회전운동을 합니다~
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시키고 일렁거리는 불꽃을 감상하셔요~ 사각형을 눌러 종료하시구요~~^^*

응용작품 도전! 둘. 정원대보름 불놀이 장관을 표현해 볼까요~^^*

//정월대보름 LED 불놀이를 하는 소년소녀 A,B,C,D,E,F,G,H,I,J,K의 회전시작각,줄 길이와 회전각속도와 논 위의 위치 좌표를 글로벌 변수로 설정하겠습니다. 수정이 용이하겠지요? 

let aAngle = 0; let aR = 70; aAvel = 0.06;
let aXcenter = 0; let aYcenter = 0;

let bAngle = 1; let bR = 40; bAvel = -0.08;
let bXcenter = 250; let bYcenter = 50;

let cAngle = 2; let cR = 45; cAvel = 0.07;
let cXcenter = 350; let cYcenter = 0;

let dAngle = 3; let dR = 35; dAvel = -0.08;
let dXcenter = 100; let dYcenter = 100;

let eAngle = 4; let eR = 60; eAvel = 0.07;
let eXcenter = 350; let eYcenter = 150;

let fAngle = 5; let fR = 40; fAvel = -0.08;
let fXcenter = 100; let fYcenter = 200;

let gAngle = 0; let gR = 40; gAvel = 0.08;
let gXcenter = 200; let gYcenter = 200;

let hAngle = 1; let hR = 40; hAvel = 0.09;
let hXcenter = 300; let hYcenter = 300;

let iAngle = 2; let iR = 45; iAvel = 0.09;
let iXcenter = 50; let iYcenter = 350;

let jAngle = 3; let jR = 50; jAvel = -0.07;
let jXcenter = 200; let jYcenter = 400;

let kAngle = 4; let kR = 70; kAvel = 0.05;
let kXcenter = 400; let kYcenter = 400;



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

function draw() {
  background(0, 8);
 
  push();
  translate(aXcenter,aYcenter);
  strokeWeight(7);
  stroke(255, 0, 0); 
  let aX = aR*cos(aAngle);
  let aY = aR*sin(aAngle);
  point(aX, aY);  
  aAngle += aAvel;
  
  aR += random(-1,1);
  //회전반경을 살짝살짝 변화시켜 불꽃의 일렁거림을 표현해 봅시다!!
  pop();
  
  push();
  translate(bXcenter,bYcenter);
  strokeWeight(7);
  stroke(255, 100, 0); 
  let bX = bR*cos(bAngle);
  let bY = bR*sin(bAngle);
  point(bX, bY); 
  bAngle += bAvel;
  bR += random(-1,1);
  pop();
  
  push();
  translate(cXcenter,cYcenter);
  strokeWeight(7);
  stroke(255, 125, 0); 
  let cX = cR*cos(cAngle);
  let cY = cR*sin(cAngle);
  point(cX, cY);  
  cAngle += cAvel;
  cR += random(-1,1);
  pop();
  
  push();
  translate(dXcenter,dYcenter);
  strokeWeight(7);
  stroke(255, 200, 0); 
  let dX = dR*cos(dAngle);
  let dY = dR*sin(dAngle);
  point(dX, dY); 
  dAngle += dAvel;
  dR += random(-1,1);
  pop();
  
  push();
  translate(eXcenter,eYcenter);
  strokeWeight(7);
  stroke(255, 255, 0); 
  let eX = eR*cos(eAngle);
  let eY = eR*sin(eAngle);
  point(eX, eY);  
  eAngle += eAvel;
  eR += random(-1,1);
  pop();
  
  push();
  translate(fXcenter,fYcenter);
  strokeWeight(7);
  stroke(255, 0, 0); 
  let fX = fR*cos(fAngle);
  let fY = fR*sin(fAngle);
  point(fX, fY); 
  fAngle += fAvel;
  fR += random(-1,1);
  pop();
  
  push();
  translate(gXcenter,gYcenter);
  strokeWeight(7);
  stroke(255, 70, 0); 
  let gX = gR*cos(gAngle);
  let gY = gR*sin(gAngle);
  point(gX, gY);  
  gAngle += gAvel;
  gR += random(-1,1);
  pop();
  
  push();
  translate(hXcenter,hYcenter);
  strokeWeight(7);
  stroke(255, 150, 0); 
  let hX = hR*cos(hAngle);
  let hY = hR*sin(hAngle);
  point(hX, hY); 
  hAngle += hAvel;
  hR += random(-1,1);
  pop();
 
  push();
  translate(iXcenter,iYcenter);
  strokeWeight(7);
  stroke(255, 100, 0); 
  let iX = iR*cos(iAngle);
  let iY = iR*sin(iAngle);
  point(iX, iY);  
  iAngle += iAvel;
  iR += random(-1,1);
  pop();
  
  push();
  translate(jXcenter,jYcenter);
  strokeWeight(7);
  stroke(255, 0, 0); 
  let jX = jR*cos(jAngle);
  let jY = jR*sin(jAngle);
  point(jX, jY);
  jAngle += jAvel;
  jR += random(-1,1);
  pop();
  
  push();
  translate(kXcenter,kYcenter);
  strokeWeight(7);
  stroke(255, 255, 0); 
  let kX = kR*cos(kAngle);
  let kY = kR*sin(kAngle);
  point(kX, kY); 
  kAngle += kAvel;
  kR += random(-1,1);
  pop();
 
}

이것을 클릭하여 sketch.js 파일을 열어 코드 내용을 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행하여, 정월대보름 소년소녀들의 불놀이 모습을 먼발치에서 지켜볼까요~^^* 종료는 사각형~~^^*

LED 불빛이 씽씽 돌아가는 정월대보름 어떤 소원을 비셨나요~^^* 그 소원이 잘 이루어 지는 올해 되시기 바래요~~^^* 황소처럼 씩씩하고 끈기있게!! 오늘도 걸어가 볼까요~^^*

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

내일 우리 또 만나서 코딩공부 함께 해요~~~^^*

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