오늘은 Object Oriented 객체지향 Fractal 프랙탈 나무의 효율성을 좀더 높여 보겠습니다~~^^*
우리가 마우스를 클릭하면 함수 mousePressed()가 이미 만들어진 나뭇가지들도 새로 다 만들어 내는 것을 개선해 보도록 하겠습니다~^^*
객체 정의를 할 때 진리값을 하나 부여해 보도록 할게요~^^*
constructor (begin, end) {
this.begin = begin;
this.end = end;
this.finished = false;
}
//나뭇가지를 만들겠습니다~~^^*
//나뭇가지가 만들어 지면, this.finished의 진리값을 true로 바꾸도록 해 볼게요~^^*그리고~ 함수 mousePressed()는 this.finished의 진리값이 false인 경우에만, 나뭇가지를 새롭게 생성해 보는 것이죠~~^^*
function mousePressed() {
for(i = tree.length - 1; i >= 0; i--) {
if(!tree[i].finished ){
tree.push(tree[i].branchR());
tree.push(tree[i].branchL());
}
tree[i].finished = true;
}
//마우스를 클릭하면~~^^* 나뭇가지가 자꾸 생겨나요~~^^*
//이미 생성된 나뭇가지는 새로 만들지 않아요~~^^* 작업효율 up!
}
음…자기호출의 종료 조건을 만들어 보려고 했는데요….이 나뭇가지가 벡터이다 보니… 회전하면…가지의 길이값이 0이 잘 되지 않는 것 같아요…시작점과 끝점이 완전히 동일한 순간에만 가지의 길이값이 0이 될테니까요…여러 방법을 나름 시도해 봤는데…아직 잘 모르겠어요…
시간이 많이 지났네요….
벡터의 오묘함을 다시 한번 생각해 봅니다….
대신, 수동종료를 시도해 보겠습니다…
제가 error 메시지가 나면서 프로그램이 종료되는 순간까지의 마우스를 클릭하는 횟수를 가늠해 보니 16번째 정도가 참…위험해 지는 것 같아요…p5.js의 실행 속도가 많이 느려지고…19번째까지 해보았는데…반응이 없어서 다운인가? 했더니…한참 뒤에 컴퓨터가 반응을 했어요…
그래서 14번쨰 클릭부터는 경고 메시지를 보내는 것으로 해보았습니다. 14번째 이상 클릭하는 user는 마음의 각오를 하시라고~~^^* 친절한 안내 멘트를~~^^*
그럼 전체 코드를 우리 함께 살펴 볼까요~~^^*
<!DOCTYPE html>
<html lang="en">
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js
<!-- https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js -->
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
http://branch.js
http://sketch.js
</body>
</html>
class Branch {
constructor (begin, end) {
this.begin = begin;
this.end = end;
this.finished = false;
}
//나뭇가지를 만들겠습니다~~^^*
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도 회전합니다.
dir.mult(0.7);
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도 회전합니다.
dir.mult(0.7);
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 = [];
var count = 0;
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 mousePressed() {
count++;
print(count);
if (count >= 14) {
print("Hey, it's time to stop clicking. It's enough.")
}
for(i = tree.length - 1; i >= 0; i--) {
if(!tree[i].finished ){
tree.push(tree[i].branchR());
tree.push(tree[i].branchL());
}
tree[i].finished = true;
}
//마우스를 클릭하면~~^^* 나뭇가지가 자꾸 생겨나요~~^^*
//이미 생성된 나뭇가지는 새로 만들지 않아요~~^^*작업효율 up!
}
function draw() {
background(51);
for (var i = 0; i < tree.length; i++) {
tree[i].show();
}
//object 객체 나뭇가지 모음 배열인 tree[]의 구성요소들을 차례로 보여줍니다~
}별 소득없이 시간을 보낸 것 같지만….그래도 신비벡터에 좀 많이 놀라기도 한 보람찬 시간이었습니다~~^^*
오늘 저와 함께 신비벡터의 세계를 헤매어 주셔서 감사합니다~~^^*
내일은 우리 가을 바람에 몸을 떠는 인간미 넘치는 나무도 함께 만들어 볼까요~~^^* 좀더 자연스럽게~~~^^*
가을 바람에 날아가는 한 잎의 노란 잎이 참 아름다운 아직 오전입니다~~^^*
오늘도 점심 맛있게 드시구요~~!! 멋진 하루 보내시고요~~!!
내일 우리 또 만나요~~^^*
네~~!! 꿈은 이루어 집니다~~!!
Silverback9 
댓글 남기기