오늘은 나뭇가지가 뻗어나가는 방향을 자유롭게 조절해 보고~~^^* 또~~^^* 나뭇가지가 양쪽으로 뻗어나가는~~^^* 좀더 일반적인 나무를 그려보도록 하겠습니다~~^^*
먼저~~^^* 나뭇가지가 뻗어나가는 방향을 조절해 보도록 할게요~~^^*
p5.js에서 제공하는 slider 기능을 사용해 보려고 합니다~~^^*
핵심 작업 지시문들을 준비해 볼게요~^^*
var angle ;
var slider;
slider = createSlider(0, TWO_PI, PI/4, 0.01);
//회전각 크기 범위는 0에서 90도까지로 하고~^^*
//기본 시작값은 45도로 할게요~~^^*
//각 크기 변화 단위는 0.01로 해서 미세한 각 변화로 나뭇가지의 꺾임이 부드러울 수 있도록 할게요~^^*
angle = slider.value();
//슬라이더를 움직여서 결정되는 값을 변수 angle에 저장합니다.
rotate(angle);
//슬라이더를 움직여 정해진 회전각 크기대로 좌표체계를 회전하겠습니다~~^^*
//회전된 좌표체계에서 일직선을 그리면, 회전각만큼 꺾인 선이 그려진 것처럼 보이겠지요~~^^*그럼 우리 전체 코드를 살펴 볼까요~~^^*
var angle;
var slider;
function setup(){
createCanvas(400, 400);
slider = createSlider(0, TWO_PI, PI/4, 0.01);
}
function draw() {
background(51);
angle = slider.value();
var len = 100;
stroke(255);
translate(200, height);
branch(len);
}
function branch(len) {
line (0, 0, 0, - len);
translate(0, - len);
rotate(angle);
if(len > 4) {
branch(len * 0.7);
}
}
//메인 함수가 가지가 시작되는 위치를 중심으로 하는 상대좌표체계로 변화 시킨 후 branch함수를 호출하도록 하겠습니다~
//이제 branch함수는 위치좌표를 신경쓰지 않아도 되겠네요~~!!!
//branch 함수 안에서 다음 나뭇가지의 위치를 중심으로 하는 상대좌표 체계로 바꾼 후 나뭇가지 길이를 30% 감소해 나가며 길이 4가 될 때까지 자기호출을 계속해 보겠습니다.
//나뭇가지 길이가 4보다 작게 되어 자기호출이 멈춰지면, 결과값을 return하기 시작하면서 비로소 나뭇가지가 그려지겠네요~~^^*
//슬라이더를 움직이며 나뭇가지의 꺾임 정도를 조절할 수 있어요~~^^*슬라이더를 움직여서 나뭇가지의 꺽임 정도를 조절해 보셔요~~^^* 아이 재밌다~~^^*
이번에는 나뭇가지가 오른쪽으로 왼쪽으로 번갈아 꺾일 수 있도록 해보겠습니다~^^* 코드는 간단하니까요~~전체 코드로 바로 보실게요~~^^*
var angle;
var slider;
function setup(){
createCanvas(400, 400);
slider = createSlider(0, TWO_PI, PI/4, 0.01);
}
function draw() {
background(51);
angle = slider.value();
var len = 100;
stroke(255);
translate(200, height);
branch(len);
}
function branch(len) {
line (0, 0, 0, - len);
translate(0, - len);
if(len > 4) {
rotate(angle);
branch(len * 0.7);
rotate(-angle);
branch(len * 0.7);
}
}
//메인 함수가 가지가 시작되는 위치를 중심으로 하는 상대좌표체계로 변화 시킨 후 branch함수를 호출하도록 하겠습니다~
//이제 branch함수는 위치좌표를 신경쓰지 않아도 되겠네요~~!!!
//branch 함수 안에서 다음 나뭇가지의 위치를 중심으로 하는 상대좌표 체계로 바꾼 후 나뭇가지 길이를 30% 감소해 나가며 길이 4가 될 때까지 자기호출을 계속해 보겠습니다.
//나뭇가지 길이가 4보다 작게 되어 자기호출이 멈춰지면, 결과값을 return하기 시작하면서 비로소 나뭇가지가 그려지겠네요~~^^*
//슬라이더를 움직여 나뭇가지의 꺾임 정도를 조절할 수 있어요~^^*
//나뭇가지가 오른쪽 왼쪽 번갈아 꺽이면서 자라는데요? 이 나뭇가지 모양도 신비스럽고 예쁘기는 한데요….
나뭇가지가 뻗어 나간 곳, 그 끝점에서 다시 나뭇가지가 반대방향으로 뻗어 나가서, 결국 꼬불꼬불한 라면면발의 신비나무가 탄생한 것 같아요!
음…우리가 일상으로 만나는 나무들의 나뭇가지는 자신이 뻗어나온 시작점에 반대방향으로 뻗어나가는 또 하나의 나뭇가지가 있는 것이겠지요~~^^*
자신의 시작점에 되돌아 와서 다음 나뭇가지를 그리는 것….
어떻게 하면 좋을까요~~^^*
음…팝콘요??
팝팝….조팝나무요?? 이팝나무요??
아!!
그러네요!!
푸쉬 앤 팝!! 피쉬 앤 칩스!! 보다 우리에게 지금 더 필요한! 푸쉬 앤 팝!
정보를 저장했다가 내보내고, 그전 작업의 정보가 기록된 곳에서 다시 작업을 하는!!!
작업 A 종료 지점 -> 푸쉬 -> 작업 B -> 팝 -> 작업 A 종료 지점 -> 푸쉬 -> 작업 C -> 팝작업 A를 마친 후 작업 B와 작업 C가 각각 작업 A를 이어서 수행된 효과!!
나뭇가지 A의 끝지점에서 나뭇가지 B가 그려지고 다시 나뭇가지 A의 끝지점으로 돌아와 나뭇가지 C가 그려지는 효과!!
나뭇가지 A가 두 개의 나뭇가지 후예를 가지는 효과!!
push() 와 pop()을 사용한 전체 코드로 바로 가보실까요~~^^*
var angle;
var slider;
function setup(){
createCanvas(400, 400);
slider = createSlider(0, TWO_PI, PI/4, 0.01);
}
function draw() {
background(51);
angle = slider.value();
var len = 100;
stroke(255);
translate(200, height);
branch(len);
}
function branch(len) {
line (0, 0, 0, - len);
translate(0, - len);
if(len > 4) {
push();
rotate(angle);
branch(len * 0.7);
pop();
push();
rotate(-angle);
branch(len * 0.7);
pop();
}
}
//메인 함수가 가지가 시작되는 위치를 중심으로 하는 상대좌표체계로 변화 시킨 후 branch함수를 호출하도록 하겠습니다~
//이제 branch함수는 위치좌표를 신경쓰지 않아도 되겠네요~~!!!
//branch 함수 안에서 다음 나뭇가지의 위치를 중심으로 하는 상대좌표 체계로 바꾼 후 나뭇가지 길이를 30% 감소해 나가며 길이 4가 될 때까지 자기호출을 계속해 보겠습니다.
//나뭇가지 길이가 4보다 작게 되어 자기호출이 멈춰지면, 결과값을 return하기 시작하면서 비로소 나뭇가지가 그려지겠네요~~^^*
//슬라이더를 움직여 나뭇가지의 꺾임 정도를 조절할 수 있어요~^^*
//하나의 나뭇가지에서 오른쪽 왼쪽 두개의 나뭇가지가 생겨나요!!
//우리가 흔히 보는 나무의 모습이 탄생되었어요!!!오늘 저와 함께 프랙탈 나무를 쑥쑥 키워 주셔서 감사합니다~~^^*
내일은 또 어떤 프랙탈 도전이 우리를 기다리고 있을까요~~^^* 오른쪽 왼쪽 쑥쑥 폭넓게 펼쳐지는 우리의 프랙탈 나무처럼 우리의 잠재적 기량도 쑥쑥 폭넓게 펼쳐지고 있다고 우리 함께 믿어봐요~~^^*
시월은 나무가 쏙쏙 폭넓게 자라는 계절이었군요~~^^*
폭넓게 퍼지는 햇살처럼요~~^^* 폭넓게 꿈꾸는 어린이처럼요~~^^*
새로운 체험을 하고 다시 제자리로 돌아와 또다른 새로운 체험을 시작한다는 것~, 역량의 폭을 넓혀 나간다는 것~^^*
한 자리에 있지만 바람에 나뭇가지를 유연하게 흔들며, 점점 더 넓은 그늘을 우리에게 나눠주며 자라는 프랙탈 나무처럼~~^^*
오늘도 멋진 아침! 멋진 하루! 보내요, 우리~~^^*
내일 또! 만나요~~!
네~~!!! 꿈은 이루어 집니다~~!!!
Silverback9 
댓글 남기기