Creative Coding 독학 제231일 2024년11월13일(수)

2024년 11월 13일

오늘은 L-System 나무를 그림으로 그리는 준비를 해 보겠습니다~~!! YEAH~~!!

지난 토요일 공부 내용 L-System Fractal Plant

지난 토요일 공부 내용 보충 L-System Fractal Plant

오늘은 조금 간단한 형태의 Fractal Tree를 문자 전개도로 그려 보도록 하겠습니다~~^^*

변수는 “F” 하나만 사용해 볼게요~^^*

상수는 “+”, “-“, “[“, “]”를 사용하고요~~^^*

<F>는 <앞으로 그린다>이고~

<+>는 <왼쪽으로 25도 회전한다>~

<->는 <오른쪽으로 25도 회전한다>~

<[>는 <현재 위치와 각도를 기억하고 push()을 작동한다>~

<]>는 <pop()을 작동한다>이고~

시작은 “F” 단 하나~~^^*

<F>는 다음 세대에서 < FF+[+F-F-F]-[-F+F+F] >로 변화하도록 해 볼게요~^^*

우리가 어제 만든 <규칙 적용> 코드를 살짝 고쳐서 사용하면 될 것 같아요~!!

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

var rules = [];
//다양한 규칙을 유연하게 담을 수 있는 배열 구조를 준비하겠습니다~^^*


rules[0] = {
 a: "F",
 b: "FF+[+F-F-F]-[-F+F+F]"
}
//"F"는 "FF+[+F-F-F]-[-F+F+F]"로 바뀌는 규칙[0]을 준비합니다~^^*

function generate() {

  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;
      //규칙 발견 상태를 나타내는 진리값 변수 found에 false를 저장합니다~
    
      if ( current == rules[j].a ) {
        
        found = true;
        //규칙이 발견되었으니, found에 true를 저장하겠습니다~
        
        nextSentence += rules[j].b;
        //규칙을 반영하여 nextSentence에 더하겠습니다~
        break;
      } 
    }
    
   if(!found) {
      nextSentence += current;     
   }
   //규칙이 발견되지 않은 경우, 규칙 적용 없이 원래 그대로의 current를 nextSentence에 더하겠습니다~ 
  }
  
  sentence = nextSentence; 
  createP(sentence);
}  


function setup(){
  
  noCanvas();
  createP(axiom);
  var button = createButton("generate");
  button.mousePressed(generate); 
  
}

L-System Fractal Plant의 문자 형태가 잘 전개되는 지 테스트를 해 볼까요~~^^*

오늘 Fractal Plant의 문자 전개도를 저와 함께 만들어 주셔서 감사합니다~^^*

내일은 우리~~^^* 선으로 그림을 그려 보도록 할까요~~^^*

손으로도 그려 보았고~ 문자 전개도로도 펼쳐 보았으니~^^* 프로그램으로 그림 그리는 것이 한층 쉽고 편안하게 느껴질 것 같아요~~^^*

내일이 무척 기다려 지는데요~~^^*