Creative Coding 독학 제066일 2024년06월01일(토)

2024년 6월 1일

오늘은 닫힌 도형 그리기 복습을 위한 응용 작품을 만들어 보겠습니다!!!

회전각 크기를 조절하여 원형부터 9각형까지 표현해 보겠습니다.

꼭지점을 연결한 도형과 점들의 집함체, 두 버전으로 만들어 볼게요~^^*

[삼각형: 2파이/3]

[사각형: 2파이/4 = 파이/2]

[오각형: 2파이/5]

[육각형: 2파이/6 = 파이/3]

[칠각형: 2파이/7]

[팔각형: 2파이/8 = 파이/4]

[구각형: 2파이/9]

을 회전각 증가량으로 설정해 보았습니다~.

꼭지점이 많아질 수록 형태를 쉽게 볼 수 있도록 모양의 구겨짐 정도를 줄여나갔습니다~.

마우스/손가락을 자유롭게 움직이며 도형의 형태 변화시킬 수 있습니다~~^^*.

//수정이 쉽도록 주요변수는 글로벌 변수로 프로그램 상단에 설정하고자 합니다. 

//회전각 빗변의 기본길이와 오프셋 최소/최대값을 글로벌 변수로 설정하겠습니다. 

let r = 0;

let Min = -50; let Max = 50;

//16개 물체의 중점과 모양 구겨지는 정도를 글로벌 변수로 설정하겠습니다. 

let aXcenter = 50;  let aYcenter = 50; let aRandom = 8;

let bXcenter = 150; let bYcenter = 50; let bRandom = 7;

let cXcenter = 250; let cYcenter = 50; let cRandom = 7; 

let dXcenter = 350; let dYcenter = 50; let dRandom = 6; 

let eXcenter = 50; let eYcenter = 150; let eRandom = 6;

let fXcenter = 150; let fYcenter = 150; let fRandom = 5;

let gXcenter = 250; let gYcenter = 150; let gRandom = 5;

let hXcenter = 350; let hYcenter = 150; let hRandom = 4; 

let iXcenter = 50; let iYcenter = 250;  let iRandom = 4;
 
let jXcenter = 150; let jYcenter = 250; let jRandom = 3; 

let kXcenter = 250; let kYcenter = 250; let kRandom = 3;

let lXcenter = 350; let lYcenter = 250; let lRandom = 2;

let mXcenter = 50; let mYcenter = 350;  let mRandom = 2;

let nXcenter = 150; let nYcenter = 350; let nRandom = 1;

let oXcenter = 250; let oYcenter = 350; let oRandom = 1;

let pXcenter = 350; let pYcenter = 350; let pRandom = 0; 


//회전각 크기를 조정하여 원형부터 9각형까지 만들어 보겠습니다.  

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

function draw() {
  background(10);

  let xWidth = map(mouseX, 0, width, Min, Max);
  let yWidth = map(mouseY, 0, height, Min, Max);
  
  
  push();
  translate(aXcenter,aYcenter);
  strokeWeight(1);
  stroke(255, 125, 100);
  fill(100, 125, 255);
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 0.01){
    let x = (r+xWidth)*cos(a) + random(-aRandom, aRandom);
    let y = (r+yWidth)*sin(a) + random(-aRandom, aRandom);
    vertex(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(bXcenter,bYcenter);
  strokeWeight(1);
  stroke(100, 125, 255);
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 0.01){
    let x = (r+xWidth)*cos(a) + random(-bRandom, bRandom);
    let y = (r+yWidth)*sin(a) + random(-bRandom, bRandom);
    point(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(cXcenter,cYcenter);
  strokeWeight(1);
  stroke(255, 125, 100);
  fill(100, 255, 125);
 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 2*PI/3){
    let x = (r+xWidth)*cos(a) + random(-cRandom, cRandom);
    let y = (r+yWidth)*sin(a) + random(-cRandom, cRandom);
    vertex(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(dXcenter,dYcenter);
  strokeWeight(10);
  //fill(125, 255, 100);
  stroke(100, 255, 125);
 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 2*PI/3){
    let x = (r+xWidth)*cos(a) + random(-dRandom, dRandom);
    let y = (r+yWidth)*sin(a) + random(-dRandom, dRandom);
    point(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(eXcenter,eYcenter);
  strokeWeight(3);
  fill(255, 255, 255);
  stroke(255, 0, 0);
 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= PI/2){
    let x = (r+xWidth)*cos(a) + random(-gRandom, gRandom);
    let y = (r+yWidth)*sin(a) + random(-gRandom, gRandom);
    vertex(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(fXcenter,fYcenter);
  strokeWeight(10);
  //fill(255, 255, 255);
  stroke(255, 255, 255);
 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= PI/2){
    let x = (r+xWidth)*cos(a) + random(-fRandom, fRandom);
    let y = (r+yWidth)*sin(a) + random(-fRandom, fRandom);
    point(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(gXcenter,gYcenter);
  strokeWeight(4);
  fill(255, 255, 100);
  stroke(100,100, 255);
 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 2*PI/5){
    let x = (r+xWidth)*cos(a) + random(-gRandom, gRandom);
    let y = (r+yWidth)*sin(a) + random(-gRandom, gRandom);
    vertex(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(hXcenter,hYcenter);
  strokeWeight(10);
  //fill(255, 255, 100);
  stroke(255,255, 100);
 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 2*PI/5){
    let x = (r+xWidth)*cos(a) + random(-hRandom, hRandom);
    let y = (r+yWidth)*sin(a) + random(-hRandom, hRandom);
    point(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(iXcenter,iYcenter);
  strokeWeight(3);
  fill(50, 100, 200);
  stroke(255,255, 100);
 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= PI/3){
    let x = (r+xWidth)*cos(a) + random(-iRandom, iRandom);
    let y = (r+yWidth)*sin(a) + random(-iRandom, iRandom);
    vertex(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(jXcenter,jYcenter);
  strokeWeight(10);
  stroke(50, 100, 200);

 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= PI/3){
    let x = (r+xWidth)*cos(a) + random(-jRandom, jRandom);
    let y = (r+yWidth)*sin(a) + random(-jRandom, jRandom);
    point(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(kXcenter,kYcenter);
  strokeWeight(3);
  stroke(50, 100, 200);
  noFill();

 
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 2*PI/7){
    let x = (r+xWidth)*cos(a) + random(-kRandom, kRandom);
    let y = (r+yWidth)*sin(a) + random(-kRandom, kRandom);
    vertex(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(lXcenter,lYcenter);
  strokeWeight(10);
  stroke(255, 100, 200);
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 2*PI/7){
    let x = (r+xWidth)*cos(a) + random(-lRandom, lRandom);
    let y = (r+yWidth)*sin(a) + random(-lRandom, lRandom);
    point(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(mXcenter,mYcenter);
  strokeWeight(4);
  stroke(255);
  fill(255, 100, 200);
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= PI/4){
    let x = (r+xWidth)*cos(a) + random(-mRandom, mRandom);
    let y = (r+yWidth)*sin(a) + random(-mRandom, mRandom);
    vertex(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(nXcenter,nYcenter);
  strokeWeight(10);
  stroke(255,0,0);
  
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= PI/4){
    let x = (r+xWidth)*cos(a) + random(-nRandom, nRandom);
    let y = (r+yWidth)*sin(a) + random(-nRandom, nRandom);
    point(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(oXcenter,oYcenter);
  strokeWeight(4);
  stroke(255, 125, 100);
  fill(100, 125, 255);
  
  //stroke(255,0,0);
  
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 2*PI/9){
    let x = (r+xWidth)*cos(a) + random(-oRandom, oRandom);
    let y = (r+yWidth)*sin(a) + random(-oRandom, oRandom);
    vertex(x,y);
  }
  endShape(CLOSE);
  pop();
  
  push();
  translate(pXcenter,pYcenter);
  strokeWeight(10);
  stroke(255, 125, 100);
  
  beginShape();
  for(let a = 0; a < TWO_PI; a+= 2*PI/9){
    let x = (r+xWidth)*cos(a) + random(-pRandom, pRandom);
    let y = (r+yWidth)*sin(a) + random(-pRandom, pRandom);
    point(x,y);
  }
  endShape(CLOSE);
  pop();
  
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행하고, 마우스/손가락을 움직여 도형의 크기와 상하좌우 비례와 도형의 방향을 조정해 보셔요~^^* 재미있지요~~~^^* 네, 종료는 사각형~~^^*

오늘은 이번 주에 배운 내용을 REMEBER하는 시간을 가져 보았어요~^^*

이번 주 공부 내용을 잘 REMEMBER하기로 해요~^^*

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

오늘 하루 즐거운 시간 보내시구요~^^*