Creative Coding 독학 제232일 2024년11월14일(목)

2024년 11월 14일

오늘은 드디어 L-System Fractal Tree (Plant)를 그림으로 그려 보겠습니다~^^*

어제 만들었던 문자 전개도 프로그램을 개선해서 그림을 그려 보겠습니다~~^^*

그림을 그리는 함수를 추가해야 될 것 같네요~~^^* 그림 그리는 거북이 납시오~~^^*

* 매번 같은 자리에서 출발할 수 있도록 좌표체계를 재설정하는 함수 resetMatrix()를 사용해 보겠습니다~^^*

* 선이 그려지면, 그 선의 끝점이 시작점이 될 수 있도록 상대좌표체계를 변환하기 위해 함수 translate()를 사용하겠습니다~^^*

var len = 100;
var angle;

function turtle() {
  background(52);

  resetMatrix(); 
  //함수 turtle()이 호출될 때마다 좌표체계를 원래대로 복원하겠습니다~^^*
  
  translate(width / 2, height);
  //나무기둥을 x축 가운데 y축 맨 아래에 그리기 위해 (200, 400)이 (0,0)이 되도록 좌표체계를 바꾸겠습니다~^^*
  
  stroke(255, 100);
  //나뭇가지들이 엄청 많아서 잘 보이게 하기 위해 불투명도를 낮추겠습니다~^^*
  
  angle = radians(25);
  //회전각은 25도로 설정하겠습니다~^^*
  
  for(var i = 0; i < sentence.length; i++) {
    var current = sentence.charAt(i);
    
    if(current == "F") {

      line(0,0,0,-len);
      //원점에서 수직으로 len 길이만큼 떨어진 지점까지 선으로 잇겠습니다~^^*
      
      translate(0, -len);
      //선의 끝점(0, -len)이 다음 가지의 시작점(0,0)이 될 수 있도록 좌표체계를 바꾸겠습니다~~^^*  

    } else if (current == "+") {
      
      rotate(angle);
      //왼쪽으로 25도 회전합니다~
    } else if (current == "-") {
      rotate(-angle);
      //오른쪽으로 25도 회전합니다~
    } else if (current == "[") {
      push();
      //현재 위치와 각도를 저장하고 push()작동합니다~
    } else if (current == "]") {
      pop();
      //pop()작동하고 저장되어 있던 기존의 위치와 각도로 돌아옵니다~
    }
  }
}

이제 함수 setup()에서 맨 처음의 나무 기둥을 그려보겠습니다.

*캔버스를 생성하겠습니다~^^*

*axiom이 생성되면 함수 turtle()을 호출하겠습니다~^^*

function setup(){
  
  createCanvas(400,400);
  background(52);
 
  createP(axiom);
  //나무 기둥을 생성합니다~
  
  turtle();
  //나무 기둥을 그립니다~
  
  var button = createButton("generate");
  button.mousePressed(generate); 
  
}

함수 generate()에서 다음 세대 나뭇가지들을 그려보겠습니다.

* [generate] 버튼이 눌려질 때 마다 나뭇가지 길이를 줄여서 나무 전체가 화면에 다 들어올 수 있도록 조정하겠습니다.

*다음 세대가 생성되면~ 함수 turtle()을 호출하여 그림으로 표현하겠습니다~^^*

function generate() {
  
  len *= 0.5; 
  //가지 길이를 점차 줄이겠습니다~
      .
      .
      .  
  sentence = nextSentence; 
  
  createP(sentence);
  //새로운 세대 나뭇가지를 생성합니다~
  
  turtle();
  //새로운 세대 나뭇가지를 그립니다~
}

네~^^* 자동 무한 반복 함수인 draw()를 사용하지 않고~~^^* 그림을 그려야 할 때 마다 함수 turtle()을 호출하는 시스템을 만들어 보았습니다~^^*

큰 흐름을 정리해 보면~~

(1) 맨처음 setup()에서 turtle()을 호출하여 첫 나무 기둥을 그리고~~^^*

(2) [generate] 버튼이 눌려질 때마다 generate()가 새 세대를 생성한 후 turtle()을 호출하여 나뭇가지들을 그리고~~^^*

(3) turtle()이 호출될 때마다 원래의 위치좌표로 Matrix가 reset되고~^^*

(4) 나무 기둥이 그려질 시작점과 나뭇가지의 시작점이 원점이 되도록 위치좌표가 translate됩니다~^^*

그럼 이제 우리 전체 코드를 함께 살펴 볼까요~^^* 주석은 생략하도록 할게요~^^*

var axiom = "F";
var sentence = axiom;

var rules = [];

var len = 100;
var angle;


rules[0] = {
 a: "F",
 b: "FF+[+F-F-F]-[-F+F+F]"
}

function turtle() {
  background(52);

  resetMatrix();
  translate(width / 2, height);
  stroke(255, 100);
  angle = radians(25);
  
  for(var i = 0; i < sentence.length; i++) {
    var current = sentence.charAt(i);
    
    if(current == "F") {

      line(0,0,0,-len);
      translate(0, -len);

    } else if (current == "+") {
      rotate(angle);
    } else if (current == "-") {
      rotate(-angle);
    } else if (current == "[") {
      push();
    } else if (current == "]") {
      pop();
    }
  }
}

function generate() {
  
  len *= 0.5;   

  var nextSentence = "";
  for (let i = 0; i < sentence.length; i++) {
    var current = sentence.charAt(i);    
    for ( let j = 0; j < rules.length; j++) {      
      var found = false;
      if ( current == rules[j].a ) {        
        found = true;       
        nextSentence += rules[j].b;       
        break;
      } 
    }
    
   if(!found) {
      nextSentence += current;     
   }
 }
  
  sentence = nextSentence; 
  createP(sentence);
  
  turtle();
}  


function setup(){
  
  createCanvas(400,400);
  background(52);
  createP(axiom);
  
  turtle();
  
  var button = createButton("generate");
  button.mousePressed(generate); 
  
}

[generate] 버튼을 누르며 나무의 성장과정을 지켜 볼까요~^^* 점점 커지는 나무를 나뭇가지 길이를 줄여 화폭에 잘 담아내고 있나요?

오늘 저와 함께 L-System Fractal Tree (Plant) 를 완성해 주셔서 감사합니다~^^*