오늘은 시월의 마지막 날이예요~~^^*
왠지 운치있는 날이 될 것 같은데요~~^^*
오늘은 잠시 짬을 내어 낙엽을 꼭 밟아 보고 싶어지는 아침입니다~~^^*
나무들의 나뭇가지 모습도 좀더 애정을 가지고 바라보고 싶어지는 아침입니다~~^^*
오늘은 우리 마우스를 클릭할 때마다 양갈래로 나뭇가지가 새롭게 뻗어 나가도록 만들어 볼까 해요~~^^*
네~~^^*
그런 것 같아요~~^^*
함수 mousePressed( )를 준비해야 할 때인 것 같아요~~^^*
요렇게 말이죠~~^^*?
let tree = [];
tree[0] = root;
function mousePressed() {
tree[1] = tree[0].branchR;
tree[2] = tree[0].branchL;
}함수 mousePressed()가 추가된 메인 파일 sketch.js를 잠시 살펴볼까요~~^^*
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 mousePressed() {
tree[1] = tree[0].branchR();
tree[2] = tree[0].branchL();
//마우스를 클릭하면~~^^* 나무 기둥 tree[0]의 끝점에서, 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] 왼쪽 나뭇가지를 보여 주겠네요~
// 함수 mousePressed()는 마우스가 클릭될 때마다 스스로 알아서 작동하기 때문에, 메인 함수인 draw()안에서 따로 호출하지 않지요~~^^*
}이번에는~~^^* 마우스를 클릭할 때마다 양갈래 나뭇가지가 생겨나도록 만들어 보겠습니다~^^*
마우스를 클릭할 때마다 tree[ ]의 구성요소가 늘어나는데요~~^^* 이 모든 구성요소를 보여주면 될 것 같아요~~^^*
그렇다면~~^^*???
그렇죠~~!!
for 구문이 필요할 것 같아요~~^^*
function mousePressed() {
for (var i = 0; i < tree.length; i++){ ... }
}앗!
잠
시
만
요
.
.
.
음…..!!!
아닛, 이건!!!
위험감지!!! 삐용삐용~~~!!!
마우스를 클릭할 때마다 배열 tree[ ] 구성요소들이 새롭게 첨가가 되는데요~~
그러면…배열 tree[ ]의 길이가 계속 늘어나게 될 것 같은데요~~
그러면, tree.length의 값이 계속 커지게 될 것 같은데요~~
그러면, for 구문의 반복 조건이 계속 만족되어서~~
영원히 for 구문 안에 갇히게 될 것 같아요~~!!
아!! 우리 for 구문을 살짝쿵만 바꿀까요?
<tree.length – 1>을 시작지점으로~
i를 줄여나가면서 반복하다~
i가 0보다 작으면 끝~~^^*
function mousePressed() {
for (var i = tree.length - 1; i >= 0; i--){
tree.push((tree[i].branchR());
tree.push((tree[i].branchL());
}
//push 기능을 사용해서, 새로운 나뭇가지를 tree[]에 더해 볼게요~^^*
}영원히 끝나지 않을 뻔한 for 구문이~~^^*
이제 깔끔하게 끝날 것 같아요~~^^*
어머! 근데요!
마우스 클릭할 때마다 나뭇가지가 생성되면…화폭이 나뭇가지를 다 담지 못할 수 있을 것 같아요~~^^*
나뭇가지가 생성될 때마다 그 길이가 조금씩 줄어들도록 하면 좋겠죠~~^^*
dir.mult(0.7);이제 전체 코드를 함께 살펴 보겠습니다~~^^*
<!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도 회전합니다.
dir.mult(0.7);
//길이를 30%씩 줄여 보겠습니다~^^*
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);
//길이를 30%씩 줄여 보겠습니다~^^*
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]에 저장합니다~^^*
}
function mousePressed() {
for(i = tree.length - 1; i >= 0; i--) {
tree.push(tree[i].branchR());
tree.push(tree[i].branchL());
}
//마우스를 클릭하면~~^^* 나뭇가지가 자꾸 생겨나요~~^^*
}
function draw() {
background(51);
for (var i = 0; i < tree.length; i++) {
tree[i].show();
}
//object 객체 나뭇가지 모음 배열인 tree[]의 구성요소들을 차례로 보여줍니다~
}그리고 또…개선해야 할 부분은… 마우스가 클릭되면 나뭇가지를 추가하는데, 이미 이전에 추가된 나뭇가지도 새롭게 추가하게 되는 중복반복 현상도 생기는 것 같아요…
우리 내일은 이 문제를 함께 개선해 볼까요^^*
오늘 저와 함께~ for 구문의 반복이 종료 시점을 가질 수 있도록 반복 조건을 다듬어 주셔서 감사합니다~~^^*
내일 우리가 또 도전해 보아야 할 문제점을 발견해 주셔서 감사합니다~~^^*
나무 그리기 프로그램을 만들다 보니 나무에 대해 더 많은 것들이 궁금해 지는 것 같아요~^^*
시월의 마지막 날~~
나무를 바라보며 호기심 한 스푼 더 마음에 담아 돌아오는 행복한 산책 시간도 멋질 것 같아요~~^^*
오늘도 멋진 아침! 멋진 하루! 보내시고요~~!!
우리 내일 또 만나요~~~^^*
네~~!! 꿈은 이루어 집니다~~!!
Silverback9 
댓글 남기기