오늘은 나무 심는 날이예요~~^^*
프랙탈 나무가 씩씩하게 자라나는 시월은 푸르구나~~^^*예요~~^^*
나무는 하늘을 향해 자라는 데요~~^^*
그래서, p5.js 캔버스 화면의 위치좌표체계로 보면, y 좌표가 줄어드는 것이 될 거 같아요~^^* 컴퓨터 그래픽의 화면 좌표쳬계에서는, 위로 갈수록 y좌표값이 줄어드니까요~^^*
그러면 우리 하늘로 올곧게 올라가는 나무 기둥을 그려 볼까요~~^^*
캔버스 화면 가운데 맨아래 (200, height)에서 위로 100만큼 올곧게 올라갈게요~~^^*
function setup(){
createCanvas(400, 400);
}
function draw() {
background(51);
var len = 100;
stroke(255);
line (200, height, 200, height - len);
}
//화면의 높이가 height인데, y좌표는 값이 커질 수록 내려가는 것이니까, height가 맨 아래를 의미하게 되는 것이겠지요~~^^*이제 나무가 쑥쑥 자랄테니, 나무가지를 만드는 함수를 따로 만든 후 메인함수에서 자유롭게 호출하는 형태로 코드 구조를 바꾸어 볼게요~~^^*
function setup(){
createCanvas(400, 400);
}
function draw() {
background(51);
var len = 100;
stroke(255);
branch(len);
}
function branch(len) {
line (200, height, 200, height - len);
}
//메인 함수가 branch 함수를 호출하는 형태로 작업해 보겠습니다~~어때요~~^^* 나무 기둥이 똑같이 그려지나요~~^^*
이번에는, 다른 나뭇가지들이 계속 자라날 때를 대비해 보겠습니다~^^*
매번 나뭇가지들의 좌표위치를 지정한 branch#1(len ), branch#2(len), branch#3(len)…를 계속 따로 만들 수는 없겠지요~~^^*?
그래서~^^* 나뭇가지를 생성하려고 할 때마다 좌표체계를 상대좌표체계로 바꾼 후 branch (len) 함수를 호출하도록 해보겠습니다~~
나뭇가지가 생성될 시작위치를 중심(0,0)으로 하는 상대좌표체계로 바꾼 후 branch(len) 함수를 호출하면 어떨까요~~^^* 이렇게 말이죠~~^^*
function setup(){
createCanvas(400, 400);
}
function draw() {
background(51);
var len = 100;
stroke(255);
translate(200, height);
branch(len);
}
function branch(len) {
line (0, 0, 0, - len);
}
//메인 함수가 가지가 시작되는 위치를 중심으로 하는 상대좌표체계로 변화시킨 후 branch함수를 호출하도록 하겠습니다~
//이제 branch함수는 위치좌표를 신경쓰지 않아도 되겠네요~~!!!어때요~~^^* 이번에도 같은 모양의 나무 줄기가 땅에서 올라왔나요~~^^*
이제 우리 슬슬~~ 나무줄기에 나뭇가지가 생겨나도록 준비해 볼까요~~^^* 계속 나뭇가지가 생겨나도록 하려면~~^^*
그렇죠!!
recursion 재귀 함수!!!
함수 branch(len)가 자신을 호출하여 나뭇가지를 계속 그려나갈 수 있도록 해 볼게요~^^*
이때 우리가 꼭 기억해야 할 것은~~~~~???
네~~!!! 맞아요~~!!!
종료 조건 명시!!!!
그럼 우리~~^^* 나뭇가지 길이를 100부터 조금씩 줄여나가다가 4가 되면 종료하도록 해볼까요~~^^*
그리고 나무가지는 자신의 시작위치에서 살짝 방향을 꺽어서 자라는 것이니까~~ 회전각 4분의 1 파이 (45도) 를 주도록 해 볼게요~~^^*
function setup(){
createCanvas(400, 400);
}
function draw() {
background(51);
var len = 100;
stroke(255);
translate(200, height);
branch(len);
}
function branch(len) {
line (0, 0, 0, - len);
translate(0, - len);
rotate(PI/4);
if(len > 4) {
branch(len * 0.7);
}
}
//메인 함수가 가지가 시작되는 위치를 중심으로 하는 상대좌표체계로 변화 시킨 후 branch함수를 호출하도록 하겠습니다~
//이제 branch함수는 위치좌표를 신경쓰지 않아도 되겠네요~~!!!
//branch 함수 안에서 다음 나뭇가지의 위치를 중심으로 하는 상대좌표 체계로 바꾼 후 나뭇가지 길이를 30% 감소해 나가며 길이 4가 될 때까지 자기호출을 계속해 보겠습니다.
//나뭇가지 길이가 4보다 작게 되어 자기호출이 멈춰지면, 결과값을 return하기 시작하면서 비로소 나뭇가지가 그려지겠네요~~^^*와우!! 우리들의 첫 작품이예요~~!!! 와우 정말 나뭇가지가 자라나네요!!!
오늘 재귀함수가 만들어 지는 과정을 찬찬히 저와 함께 걸어 주셔서 감사합니다~~^^*
오늘 저와 함께 recursion 재귀 함수를 사용해서 가녀리지만 대견한 나무가지를 그려 주셔서 감사합니다~~^^*
우리 내일은~~ 나뭇가지가 뻗어나가는 방향도 조절해 보고~~나뭇가지가 양 옆으로 자라도록 만들어 보기도 할까요~~^^*
네~~!!!
맞아요!!!
시작은 미약하지만~~ 작은 도전들을 연이어 계속해나가다 보면 어느새 또 멋진 작품이 탄생될 거예요~~!!!
오늘은 작은 콩알 하나 심은 날이네요~~^^* 내일은 멋진 나무로 자라나 있을 거예요~~^^*
오늘도 멋진 아침! 멋진 하루! 보내시고요~~^^*
내일 우리 또 만나요~~^^*
네~~!!! 꿈은 이루어 집니다~~!!!
Silverback9 
댓글 남기기