네~~^^* 어제 우리는 종료 조건을 명시하는 것의 중요성을 공부했어요~^^*
종료 조건이 만족되어, 드디어 자신을 호출하는 작업이 종료가 되면~~^^*
비로소 제일 마지막에 호출되었던 자신은 자신을 호출한 자신에게 자신의 작업의 결과물을 return해요~ 그러면 값을 return 받은 자신은 그 값을 가지고 작업을 하고 그 결과를 자신을 호출한 자신에게 return을 해요~~^^*
recursion의 과정을 화살표를 사용해서 정리해 보면~~^^*
자신 #1 - call ->
자신 #2 - call ->
자신 #3 - call ->
자신 #4
종료 조건 만족
자신 #4 - return ->
자신 #3 - return ->
자신 #2 - return ->
자신 #1 (1) 종료 조건이 반드시 있어야 하고~^^*
(2) 종료 조건이 만족될 때까지 자신을 call 하는 횟수가 Stack 저장공간의 한계를 넘지 않아야 하고~^^*
이 두 가지를 충족하면, 아주 재미있는 프랙탈을 컴퓨터가 만들어 주게 되겠네요^^*
recursion 재귀 함수의 이 두 가지 포인트를 잘 지키면서 자유롭게 재미있는 그림을 펼쳐 보도록 할까요~~^^*
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
drawCircle(200, 200, 300);
//원을 그리는 함수를 호출하여 원을 그려 보겠습니다~^^*
//함수 drawCircle을 호출하여, xy좌표(200, 200)을 중심으로 하고, xy축 지름이 300 pixel인 원을 그려 달라고 해보겠습니다.
}
function drawCircle(x, y, d) {
noFill();
stroke(255)
ellipse(x, y, d);
if (d > 2) {
drawCircle(x + d * 0.5, y, d * 0.5);
drawCircle(x - d * 0.5, y, d * 0.5);
}
//x좌표 오른쪽과 왼쪽에 동그라미를 그려보겠습니다~
//원이 오른쪽으로 왼쪽으로 계속 생기고, 그 크기는 작아지게 되겠네요~
}아주 단순하게 두 개의 원을 그리는 함수가 자신을 계속 호출하는데요. 어떤 그림이 펼쳐 질까요~~^^*
이번에는 세 개의 원이 삼각형 형태를 띄도록 해 볼게요~^^*
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
drawCircle(200, 200, 200);
//원을 그리는 함수를 호출하여 원을 그려 보겠습니다~^^*
//함수 drawCircle을 호출하여, xy좌표(200, 200)을 중심으로 하고, xy축 지름이 200 pixel인 원을 그려 달라고 해보겠습니다.
}
function drawCircle(x, y, d) {
noFill();
stroke(255)
ellipse(x, y, d);
if (d > 2) {
drawCircle(x + d * 0.5, y, d * 0.5);
drawCircle(x - d * 0.5, y, d * 0.5);
drawCircle(x, y + d * 0.5, d * 0.5);
}
//x좌표 오른쪽과 왼쪽에 동그라미를 그려보겠습니다~
//원이 오른쪽으로 왼쪽으로 계속 생기고, 그 크기는 작아지게 되겠네요~
}원이 삼각형 대형을 이루며 점점 작아지며 점점 왼쪽 오른쪽으로 움직이면 어떤 그림이 만들어 지는 것일까요? 궁금하시죠~~^^*
이번에는 오른쪽과 아래쪽으로만 원을 그려볼까요~^^*
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
drawCircle(200, 200, 200);
//원을 그리는 함수를 호출하여 원을 그려 보겠습니다~^^*
//함수 drawCircle을 호출하여, xy좌표(200, 200)을 중심으로 하고, xy축 지름이 300 pixel인 원을 그려 달라고 해보겠습니다.
}
function drawCircle(x, y, d) {
noFill();
stroke(255)
ellipse(x, y, d);
if (d > 2) {
drawCircle(x + d * 0.5, y, d * 0.5);
drawCircle(x, y + d * 0.5, d * 0.5);
}
//x좌표 아래쪽, 오른쪽에 동그라미를 그려보겠습니다~
//원이 오른쪽으로, 아래쪽으로 계속 생기고, 그 크기는 작아지게 되겠네요~
}뭔가 스케이트 보드를 타고 U자형 협곡의 오른쪽 면에 다다른 사람의 정지화면 같은 느낌이 들까요~^^*
이번엔 그 그림을 우리가 마우스로 줌인 줌아웃 해보도록 하겠습니다~^^*
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
drawCircle(200, 200, mouseX);
//원을 그리는 함수를 호출하여 원을 그려 보겠습니다~^^*
//함수 drawCircle을 호출하여, xy좌표(200, 200)을 중심으로 하고, xy축 지름이 mouseX인 원을 그려 달라고 해보겠습니다.
}
function drawCircle(x, y, d) {
noFill();
stroke(255)
ellipse(x, y, d);
if (d > 2) {
drawCircle(x + d * 0.5, y, d * 0.5);
drawCircle(x, y + d * 0.5, d * 0.5);
}
//x좌표 아래쪽, 오른쪽에 동그라미를 그려보겠습니다~
//원이 오른쪽으로, 아래쪽으로 계속 생기고, 그 크기는 마우스로 조절할 수 있어요~^^*
}마우스로 그림을 줌인~~줌아웃~~해보시겠어요~~^^* 아이 재밌어~~^^*
살짝만 달라져도 그림 전체의 느낌이 달라지는 것이 이 재귀함수로 그리는 그림의 묘미인 것 같아요~^^*
자신을 호출하는 것을 반복하는 것을 사람이 한다면, 정말 많이 헷갈릴 것 같은데요. 이렇게 컴퓨터가 헷갈려하지 않고 충실하게 반복해 주니 참 고마운데요~~^^*
컴퓨터의 탄생! 감사합니다~~^^*
어느새, 따뜻한 자켓이 감사한 계절이 왔어요~~^^*
한 여름 영영 안올 것 같은 겨울이 오고 있네요^^* 계절의 반복도 참 신기한 것 같아요! 4계절이 천천히 자기호출을 하며 기후를 이루고 있어요~^^* 새삼 신기한데요~^^*
멋진 삼각형 대열을 만들어 함께 움직이는 원들이 신기한 오늘이었습니다~^^* 오늘도 저와 함께 코드 공부 해주셔서 감사합니다~^^*
참 멋진 트라이앵글이죠~~^^*
내일 우리 또 만나서 프랙탈 공부를 이어 갈까요~^^*
네~!! 꿈은 이루어 집니다~!!
Silverback9 
댓글 남기기