오늘은~~^^*
Object Oriented 객체지향 Fractal 프랙탈 나무가 오른쪽 왼쪽 양갈래 나뭇가지로 뻗어나가도록 만들어 보겠습니다~^^*
나뭇가지를 만드는 함수 branch를 오른쪽 나뭇가지 만드는 경우와 왼쪽 나뭇가지 만드는 경우로 나누어 두 개의 함수로 만들어 볼게요~^^*
branchR() {
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합니다.
} branchL() {
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 left = new Branch (this.end, newEnd);
//현재의 끝점과 새로운 끝점 사이에 새로운 나뭇가지를 만들어 left에 저장합니다.
return left;
//생성된 나뭇가지 left를 return합니다.
}메인함수에서 branchR과 branchL을 호출하면 될 것 같아요!
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]에 저장합니다~^^*
tree[1] = root.branchR();
tree[2] = root.branchL();
//나무 기둥 root의 끝점에서, PI/4, -PI/4 회전하여 양갈래로 뻗어나가는 오른쪽 나뭇가지와 왼쪽 나뭇가지가 나뭇가지 모음 배열 tree[]의 두 번째와 세 번째 구성요소로 저장되네요~!!!
}자 그럼 우리 전체 코드를 함께 살펴 볼까요~~^^*
<!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);
}
//생성된 나뭇가지를 보여주겠습니다~~^^*
branchR() {
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합니다.
}
branchL() {
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 left = new Branch (this.end, newEnd);
//현재의 끝점과 새로운 끝점 사이에 새로운 나뭇가지를 만들어 left에 저장합니다.
return left;
//생성된 나뭇가지 left를 return합니다.
}
}
//메인 함수에서 시작지점과 끝지점을 parameter 매개변수로 넘겨받으며 호출될 것 같네요~~^^*
//Object 객체인 Class 나뭇가지입니다~~^^*
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]에 저장합니다~^^*
tree[1] = root.branchR();
tree[2] = root.branchL();
//나무 기둥 root의 끝점에서, PI/4, -PI/4 회전하여 양갈래로 뻗어나가는 오른쪽 나뭇가지와 왼쪽 나뭇가지가 나뭇가지 모음 배열 tree[]의 두 번째와 세 번째 구성요소로 저장되네요~!!!
}
function draw() {
background(51);
for (var i = 0; i < tree.length; i++) {
tree[i].show();
}
//object 객체 나뭇가지 모음 배열인 tree[]의 구성요소들을 차례로 보여줍니다~
//현재로서는 맨 첫번째 구성요소인 tree[0] 나무 기둥과 두번째 구성요소인 tree[1] 오른쪽 나뭇가지와 세 번째 구성요소인 tree[2] 왼쪽 나뭇가지를 보여 주겠네요~
}두 팔을 넓게 주욱 뻗고 아침 기지개를 켜는 나무를 만나서 우리도 스트래칭 함께 할까요~~^^*
오늘 저와 함께 오른쪽 왼쪽 양 팔이 나무 기둥 끝에서 서로 만날 수 있도록 해주셔서 감사합니다~~^^*
클래스 내장 함수 만들기와 클래스 내장 함수 사용하기에 좀더 익숙해지는 감사한 시간을 저와 함께 나누어 주셔서 감사합니다~~^^*
오늘 우리가 만든 이 멋진 두 양팔이 세상을 향해 주욱 뻗어나가면서 또 멋진 후예 나뭇가지들을 많이 많이 키워내면 좋겠어요~~^^*
이제 여러 개의 나뭇가지를 만드는 과정으로 훌쩍 점프해야 하기 때문에, 숨 고르는 시간을 가질 겸, 오늘은 우리 코딩 공부 짦게 여기까지만 할까요~~^^*
오늘도 멋진 아침! 멋진 하루! 보내시고요!
내일 우리 또 만나서 Object Oriented 객체지향 Fractal 프랙탈 나무 만들기 코딩 공부를 이어가 보면 좋겠어요~~~!!
네~!!! 꿈은 이루어 집니다~~!!!
Silverback9 
댓글 남기기