Creative Coding 독학 제228일 2024년11월10일(일)

2024년 11월 10일

오늘은 L-System 본격 코딩 공부 첫날입니다~~~^^* YEAH~~~^^*

첫 날이니만큼 가장 간단한 L-System을 코딩해 보기로 할까요~~^^*

가볍게~~^^* 즐겁게~~^^* 발랄하게~~^^* 첫 날을 시작해 봐요~~^^*

바로 변수 A와 B로만 구성되는 Algea 조류식물입니다!!!

시작은 “A”이고 “A”는 “AB”로 바뀌고~~^^* “B”는 “A”로 바뀌고~~^^*

알고리즘 공부를 해 놓은 뒤라서~~^^* 코딩 공부를 시작하는 마음이 한결 여유가 있어지는 것 같아요~~^^*

손으로 직접 그려 본 경험이 있으니까~^^* 문자로만 대해도 시각적 상상력이 원활하게 작동될 듯할 이 편안한 느낌~~^^*

var axiom = "A"; //시작은 "A"~~^^* 문자열 형태의 변수일 것 같습니다~^^*

var rule1 = {
 a: "A",
 b: "AB"
}
//"A"는 "AB"로 바뀌는 규칙1을 준비합니다~^^*

var rule2 = {
 a: "B",
 b: "A"
}
//"B"는 "A"로 바뀌는 규칙2를 준비합니다~^^*

오늘은 l-System이 잘 작동되는지 확인해 보기 위해서 문자 그대로 표현해 보도록 하겠습니다~~^^*

function setup(){
  
  noCanvas();
  
  createP(axiom);
  
}
//Canvas가 아니라 실행 확인창에 axiom 시작을 paragraph 문자단락으로 표현해 보겠습니다~^^*

axiom 시작이 문자단락으로 잘 표현되고 있나요~^^*

첫 시작은 참 소중하죠~^^* 확인창에 잘 표현된 “A”가 어찌나 반갑고 고마운지요~~^^*

이번엔~ 세대 변화를 표현해 보도록 하겠습니다~~^^*

var sentence = axiom;
//axiom 시작의 내용을 변수 sentence에 담습니다. 문자열 형태이겠네요^^* 

function generate() {

  var nextSentence = "";
  //다음 세대 문자열을 담을 변수입니다~^^*  

  for (let i = 0; i < sentence.length; i++) {
    
    var current = sentence.charAt(i);
    //문자열의 i번째 항목을 문자 형태로 따로 떼어 변수 current에 저장합니다.
    
    if ( current == rule1.a ) {
      nextSentence += rule1.b;
    } else if ( current == rule2.a) {
        nextSentence += rule2.b;
    } else {
        nextSentence += current;
    }
    //규칙 1에 해당하면 규칙 1의 다음 세대 형태를 더하고~^^*
    // A -> AB
    //규칙 2에 해당하면 규칙 2의 다음 세대 형태를 더하고~^^*
    // B -> A
    //해당하는 규칙이 없으면, 지금 형태 그대로 더하고~^^*
    //C -> C     
  }
  sentence = nextSentence; 
  //세대 전환~^^*

  createP(sentence);
  //세대 전환된 내용이 paragraph 단락 형태로 표현되겠네요~^^*
}

이제 마우스로 클릭하면 다음 세대를 호출할 수 있는 버튼을 만들어 볼까요~^^*

function setup(){
  
  noCanvas();
  
  createP(axiom);
 
  var button = createButton("generate");
  //"generate"라고 쓰여진 버튼을 만들어 변수 button에 저장합니다~^^*
  
  button.mousePressed(generate); 
  //이 버튼을 마우스로 누르면 함수 generate()가 호출 됩니다~~^^*

}

이제 전체 코드를 우리 함께 살펴 볼까요~^^* 오늘은 새로 배우는 p5.js 기능들이 코드 내용의 대부분을 이루고 있어서, 따로 강조색 표현은 하지 않을게요~^^* 천천히 여유를 가지고 우리 함께 살펴 봐요~~^^*

var axiom = "A"; //시작은 "A"~~^^* 문자열 형태의 변수일 것 같습니다~^^*
var sentence = axiom;
//axiom 시작의 내용을 변수 sentence에 담습니다. 문자열 형태이겠네요^^* 

var rule1 = {
 a: "A",
 b: "AB"
}
//"A"는 "AB"로 바뀌는 규칙1을 준비합니다~^^*

var rule2 = {
 a: "B",
 b: "A"
}
//"B"는 "A"로 바뀌는 규칙2를 준비합니다~^^*

function generate() {

  var nextSentence = "";
  //다음 세대 문자열을 담을 변수입니다~^^*  

  for (let i = 0; i < sentence.length; i++) {
    
    var current = sentence.charAt(i);
    //문자열의 i번째 항목을 문자 형태로 따로 떼어 변수 current에 저장합니다.
    
    if ( current == rule1.a ) {
      nextSentence += rule1.b;
    } else if ( current == rule2.a) {
        nextSentence += rule2.b;
    } else {
        nextSentence += current;
    }
    //규칙 1에 해당하면 규칙 1의 다음 세대 형태를 더하고~^^*
    // A -> AB
    //규칙 2에 해당하면 규칙 2의 다음 세대 형태를 더하고~^^*
    // B -> A
    //해당하는 규칙이 없으면, 지금 형태 그대로 더하고~^^*
    //C -> C     
  }
  sentence = nextSentence; 
  //세대 전환~^^*
  
   createP(sentence);
  //세대 전환된 내용이 paragraph 단락 형태로 표현되겠네요~^^*
} 


function setup(){
  
  noCanvas();
  
  createP(axiom);
  
  var button = createButton("generate");
  //"generate"라고 쓰여진 버튼을 만들어 변수 button에 저장합니다~^^*
  
  button.mousePressed(generate); 
  //이 버튼을 마우스로 누르면 함수 generate()가 호출 됩니다~~^^*
  
}

generate 버튼을 눌러 보셔요~~^^* 스크린을 오른쪽으로 넓히면 문자단락이 계속 이어져 보일거예요~~^^*

오늘은 우리 여기까지만 공부 할까요~~^^* 새롭게 등장한 p5.js 기능들이 많아서요~~^^*

새롭게 등장한 p5.js 기능들을 신선하게 여기며 저와 함께 재미있게 공부해 주셔서 감사합니다~~^^*

내일은 우리 편안하게 음악 함께 들을까요~~^^*

그리고 화요일엔, 이 알고리즘을 복습할 겸 개선 작업을 해보면 어떨까요~^^* 규칙을 다양하게 적용할 수 있는 유연한 시스템으로 우리 함께 개선해 보면 좋겠어요~~^^*

한 주 동안 L-System 알고리즘 이론공부의 길을 저와 함께 묵묵히 걸어주셔서 감사합니다~^^*

오늘 코딩 공부를 시작해 보니~^^* 일주일 동안 다져 놓은 알고리즘 공부가 코딩 공부 함선을 든든하게 띄워주는 바닷물의 부력 역할을 해주는 것 같아서 감사한 마음이 들었어요~^^*