Creative Coding 독학 제216일 2024년10월29일(화)

2024년 10월 29일

오늘은 Object Oriented 객체지향 Fractal 프랙탈 나무 코딩 공부 하는 날~~^^* YEAH~~^^*

나무 기둥을 세우는 것은 우리가 해내었는데요~~^^*

오늘은 나뭇가지를 만드는 것을 해보도록 할게요~~^^*

나뭇가지들을 저장할 배열 tree[ ]가 필요할 것 같구요~~^^* 나무 기둥도 나뭇가지로 표현할 수 있을 것 같아요~~^^*

var tree = [];

function setup() {
  createCanvas(400, 400);
  
  var a = createVector(width/2, height);
  var b = createVector(width/2, height - 100);
  
  var root = new Branch(a, b);
  tree[0] = root;
  
  //나무 기둥 root도 나뭇가지 모음 배열인 tree[]에 넣어 볼게요. 
  //root를 배열 tree[]의 맨 첫번째 구성요소인 tree[0]에 저장합니다~^^*
}

function draw() {
  background(51);
  
  for (var i = 0; i < tree.length; i++) {
  
    tree[i].show();
  
  }
  //object 객체 나뭇가지 모음 배열인 tree[]의 구성요소들을 차례로 보여줍니다~
  //현재로서는 맨 첫번째 구성요소인 tree[0] 나무 기둥만 보여 주겠네요~
}

나뭇가지 모음 배열 tree[]의 맨 첫번째 구성요소인 나무 기둥을 다시 한 번 살펴 볼까요~^^*

자, 이제 나무 기둥에서 뻗어나가는 나뭇가지를 만들어 볼 차례인 것 같아요~~^^*

(1) 나뭇가지가 뻗어나갈 방향을 나타내는 벡터가 필요할 것 같아요.

벡터 뺼셈을 사용해 볼까요~^^*

벡터 A를 벡터 B에서 빼면, 벡터 B에서 벡터 A로 향하는 새로운 벡터 C가 생겨날 것 같은데요!!

var dir = p5.Vector.sub(this.end, this.begin);
//나뭇가지 시작점에서 나뭇가지 끝점으로 향하는 방향을 가진 벡터를 dir에 저장합니다.

(2) 방향을 나타내는 벡터 dir를 회전시켜 볼게요~^^*

dir.rotate(PI/4);

(3) 회전된 방향으로 뻗어나간 새로운 나뭇가지 끝지점을 찾아야 할 것 같아요.

벡터 덧셈을 사용해 볼까요?

벡터 A에 벡터 B를 더하면, 벡터 A에서 벡터 B 방향으로 회전된 새로운 벡터 C가 생겨날 것 같습니다~~^^*

var newEnd = p5.Vector.add(this.end, dir);
//나뭇가지 끝점에서 dir 방향으로 향하는 새로운 벡터를 newEnd에 저장합니다.

(4) 기존의 나뭇가지 끝점에서 시작하여 새로운 나뭇가지 끝점에서 끝나는 새로운 나뭇가지를 만들면 되겠네요~^^* 그리고 이 나뭇가지를 오른쪽 나뭇가지로 설정해 봅시다~^^*

var right = new Branch (this.end, newEnd);

(5) 이 과정을 차근히 밟아서 오른쪽 나뭇가지를 결과물로 return하는 함수를 완성해 볼게요~~^^*

branch() {

  var dir = p5.Vector.sub(this.end, this.begin);
  //나뭇가지 시작점에서 나뭇가지 끝점으로 향하는 방향을 가진 벡터를 dir에 저장합니다. 

  dir.rotate(PI/4);
  //방향을 45도 회전합니다.

  var newEnd = p5.Vector.add(this.end, dir);
  //나뭇가지 끝점에서 dir 방향으로 향하는 새로운 벡터를 newEnd에 저장합니다.

  var right = new Branch (this.end, newEnd);
  //현재의 끝점과 새로운 끝점 사이에 새로운 나뭇가지를 만들어 right에 저장합니다. 

  return right;
  //생성된 나뭇가지 right를 return합니다.   
}

이제 우리~~^^* 전체 코드를 한 번 살펴 볼까요~^^*

<!DOCTYPE html>
<html lang="en">
  <head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
<!--   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
     <script src="branch.js"></script>
     <script src="sketch.js"></script>
   </body>
</html>

class Branch {
  constructor (begin, end) {
    this.begin = begin;
    this.end = end;
  }
  //나뭇가지를 만들겠습니다~~^^*

  show() {
    stroke(255);
    line(this.begin.x, this.begin.y, this.end.x, this.end.y);
  } 
  //생성된 나뭇가지를 보여주겠습니다~~^^*
  
  branch() {
     var dir = p5.Vector.sub(this.end, this.begin);
  //나뭇가지 시작점에서 나뭇가지 끝점으로 향하는 방향을 가진 벡터를 dir에 저장합니다. 

  dir.rotate(PI/4);
  //방향을 45도 회전합니다.

  var newEnd = p5.Vector.add(this.end, dir);
  //나뭇가지 끝점에서 dir 방향으로 향하는 새로운 벡터를 newEnd에 저장합니다.

  var right = new Branch (this.end, newEnd);
  //현재의 끝점과 새로운 끝점 사이에 새로운 나뭇가지를 만들어 right에 저장합니다. 

  return right;
  //생성된 나뭇가지 right를 return합니다.
  }
}

//메인 함수에서 시작지점과 끝지점을 parameter 매개변수로 넘겨받으며 호출될 것 같네요~~^^*
//Object 객체인 Class 나뭇가지입니다~~^^* 
//Class Branch 안의 함수 branch가 다시 Class Branch를 생성하기 때문에, recursion 재귀 효과가 발생하는 것 같습니다!
//재귀함수 recursive function의 기능을 Class Branch가 가지게 된 것 같아요!

var tree = [];


function setup() {
  createCanvas(400, 400);
  
  var a = createVector(width/2, height);
  var b = createVector(width/2, height - 100);
  
  var root = new Branch(a, b);
  tree[0] = root;
  
  //나무 기둥 root도 나뭇가지 모음 배열인 tree[]에 넣어 볼게요. 
  //root를 배열 tree[]의 맨 첫번째 구성요소인 tree[0]에 저장합니다~^^*
  
  var newBranch = root.branch();
  //나무 기둥 root의 끝점, 그리고 그곳에서 45도 회전하여 뻗은 새로운 끝점 사이에 생긴 새로운 나뭇가지를 newBranch에 저장합니다~^^* 
  tree[1] = newBranch;
  //와우!! 드디어 나무 기둥에서 나뭇가지 하나가 생겨났네요!!
  //나뭇가지 모음 배열 tree[]가 드디어 두번째 구성요소 tree[1]를 가지게 되었습니다~~^^*
}

function draw() {
  background(51);
  
  for (var i = 0; i < tree.length; i++) {
  
    tree[i].show();
  
  }
  //object 객체 나뭇가지 모음 배열인 tree[]의 구성요소들을 차례로 보여줍니다~
  //현재로서는 맨 첫번째 구성요소인 tree[0] 나무 기둥과 두번째 구성요소인 tree[1] 나뭇가지를 보여 주겠네요~
}

나무 기둥에서 뻗어 나온 단 하나의 나뭇가지! 소중한 나뭇가지! 저랑 함께 보러 가실까요~!

오늘 저와 함께 소중한 첫 나뭇가지를 만들어 주셔서 감사합니다~~^^*

오늘 저와 함께 벡터의 뺄셈과 덧셈도 복습해 주셔서 감사합니다~~^^*