Silverback9

#야생으로

Creative Coding 독학 제220일 2024년11월02일(토)

음…

어제 제가 지하철을 타고 가며 생각을 해보니까요…

dir.mult(0.7);은 dir이 아무리 작더라도 결코 dir를 0으로 만들 수 없다는 생각이 들었어요....

왜냐하면...소수 0.7 곱셈, 즉, 분수 7/10 곱셈은 같은 대상체에 여러번 곱하더라도... 그 대상체를 0으로 만들 수도 없으니까요... (7/10)^n, 즉, (7/10)을 여러번 제곱하더라도...점점 작아지기는 하지만 그래서 0에 가까와지기는 하지만... 결코 0이 되거나 0보다 작아지지 않기 때문에.... 

거기에다 dir는 생성된 이전 나뭇가지의 길이를 받기 때문에, 호출될 때마다 dir의 값이 작아지지만 동일하지는 않기도 해서...

<dir의 크기가 0보다 크다 0과 같다 0보다 작다>...0을 종료 조건의 기준으로 삼을 수는 없을 것 같아요.  

그래서...dir의 크기가 1보다 작으면 종료하기 위해 함수 floor()를 사용해 보려고 했는데요...

메인 함수가 Class Branch를 인식하지 못하게 되네요...왜 그런지는 잘 모르겠어요...

아마...Class Branch 파일 안에서 dir의 길이를 가지고 종료조건을 만드는 과정이 문법적 오류가 있어서, Class Branch  자체가 작동되지 않아서 그런 것 같기도 해요...

P5린이의 종료조건 고민은 일단 여기까지로 할게요. 아침시간이 많이 흘렀거든요... 이 문제는  p5.js 공부 포럼에 질문을 올려보고 답변이 달리면 함께 나누는 것으로 할까요~~^^*

네..^^ 저도 그렇게 느껴요..^^ 행복한 고민이죠~~^^* 고민이 있다는 것은~~ 뭔가 해결해 보려는 자신의 의지가 반영되는 것이니까~~~ 이런 순간도~~~ 우리의 야생성이 발현되는 순간인 것 같아요~~~^^*

자 그럼 이제~~바람에 몸을 바르르 떠는 인간미 넘치는 나무를 만들어 보도록 할까요~~^^*

이번에는 우리, 쉽게 가보죠~~^^*

이미 만들어져 있는 내장 함수를 사용해서 쉽게~~^^* 간단하게~~^^*

이미 만들어져 있는 페트병을 사용해서 간단한 에어컨을 만들어~~인간미 넘치는 밥아저씨 영상처럼 편안한~~ 방안 공기를 즐길 수 있듯이~~^^*

우리에게 너무나도 친숙한~~^^*

바로 함수 random()입니다~~^^*

constructor (begin, end) {
    this.begin = begin;
    this.end = end;
    
    this.finished = false;
     
    this.jitter = function (){
       this.end.x += random(-1,1);
       this.end.y += randim(-1,1); 
    }
}
function draw() {
  background(51);
  
  for (var i = 0; i < tree.length; i++) {
    tree[i].show();
  
    tree[i].jitter();
    
  }
}

전체 코드를 함께 볼까요~~^^*

<!DOCTYPE html>
<html lang="en">
  <head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
<!--   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
     <script src="branch.js"></script>
     <script src="sketch.js"></script>
   </body>
</html>
class Branch {
  constructor (begin, end) {
    this.begin = begin;
    this.end = end;
    
    this.finished = false;
    
    this.jitter = function() {
      this.end.x += random(-1, 1);
      this.end.y += random(-1, 1);
    }
    
  }
  //바들바들 몸을 떠는 늦가을 나뭇가지를 만들겠습니다~~^^* 

  show() {
    stroke(255);
    line(this.begin.x, this.begin.y, this.end.x, this.end.y);
  } 
  //생성된 나뭇가지를 보여주겠습니다~~^^*
  
  
  
  branchR() {
    var dir = p5.Vector.sub(this.end, this.begin);
    //나뭇가지 시작점에서 나뭇가지 끝점으로 향하는 방향을 가진 벡터를 dir에 저장합니다. 

    dir.rotate(PI/4);
    //방향을 45도 회전합니다.
    
    dir.mult(0.7);
    

    var newEnd = p5.Vector.add(this.end, dir);
    //나뭇가지 끝점에서 dir 방향으로 향하는 새로운 벡터를 newEnd에 저장합니다.

    var right = new Branch (this.end, newEnd);
    //현재의 끝점과 새로운 끝점 사이에 새로운 나뭇가지를 만들어 right에 저장합니다. 

    return right;
    //생성된 나뭇가지 right를 return합니다.
  }
  
  branchL() {
    var dir = p5.Vector.sub(this.end, this.begin);
    //나뭇가지 시작점에서 나뭇가지 끝점으로 향하는 방향을 가진 벡터를 dir에 저장합니다. 

    dir.rotate(- PI/4);
    //방향을 - 45도 회전합니다.
    
    dir.mult(0.7);

    var newEnd = p5.Vector.add(this.end, dir);
    //나뭇가지 끝점에서 dir 방향으로 향하는 새로운 벡터를 newEnd에 저장합니다.

    var left = new Branch (this.end, newEnd);
    //현재의 끝점과 새로운 끝점 사이에 새로운 나뭇가지를 만들어 left에 저장합니다. 

    return left;
    //생성된 나뭇가지 left를 return합니다.
  }
}

//메인 함수에서 시작지점과 끝지점을 parameter 매개변수로 넘겨받으며 호출될 것 같네요~~^^*
//Object 객체인 Class 나뭇가지입니다~~^^* 

var tree = [];
var count = 0;

function setup() {
  createCanvas(400, 400);
  
  var a = createVector(width/2, height);
  var b = createVector(width/2, height - 100);
  
  var root = new Branch(a, b);
  tree[0] = root;
  
  //나무 기둥 root도 나뭇가지 모음 배열인 tree[]에 넣어 볼게요. 
  //root를 배열 tree[]의 맨 첫번째 구성요소인 tree[0]에 저장합니다~^^*
}

function mousePressed() {
  
  count++;
  print(count);
  if (count >= 12) {
    print("Hey, it's time to stop clicking. It's enough.")
  }
  
  for(i = tree.length - 1; i >= 0; i--) {
  
    if(!tree[i].finished  ){
      tree.push(tree[i].branchR());
      tree.push(tree[i].branchL());
    }
  tree[i].finished = true;  
     
  }  

  //마우스를 클릭하면~~^^* 나뭇가지가 자꾸 생겨나요~~^^*
  //이미 생성된 나뭇가지는 새로 만들지 않아요~~^^* 작업효율 up!
}

function draw() {
  background(51);
  
  
  for (var i = 0; i < tree.length; i++) {
  
    tree[i].show();
    tree[i].jitter();
    
  }
  
}
//바들바들 떠는 늦가을 나무가 12회 마우스 클릭까지는 안정적으로 잘 자라나요? 

마우스를 클릭하며 인간미 넘치는 늦가을 나무가 점점 가시나무로 자라나는 모습을 함께 보실까요~^^* 가지가 몇 개 없을 때는 참 운치있는 것 같아요…함수 jitter()도 작동시켜야 하다보니 컴퓨터가 12회 클릭까지는 기민하게 잘 작동되다가 그 이후로는 좀 느려지는 것 같아요. 안내멘트는 12회부터 나오도록 조정해 보았어요~~^^*

클릭을 여러 번 하니까 가지가 엄청 무성해 져서…빽빽한 가시 덤불 느낌이 나네요. 새 한 마리도 숨어들어 쉴 틈 없을 것 같은 느낌…

마음의 여백은 자신에게 그리고 서로에게 참 소중한 쉼의 공간이 되어 줄 것 같아요~~^^*

고향이 어디이든 지금 있는 곳이 어디이든~~^^*

광활한 야생의 낮을 마치고 마음의 여백 작은 정원으로 돌아오는 편안한 저녁 보내시기 바래요~^^*

오늘 저의 종료 조건에 대한 야생적 고민을 들어 주셔서 감사합니다~~^^*

오늘 저와 함께 익숙한 함수로 새로운 함수를 쉽게 만들어 인간미 있는 나무를 표현해 주셔서 감사합니다~~^^*

오늘도 점심 맛있게 드시고요! 멋진 하루 보내시고요!

내일 우리 또 만나요~~^^*

붉은 잎을 피워내 볼까요~~^^* 내일은요~~^^*

네~~!! 꿈은 이루어 집니다~~!!

댓글 남기기