Creative Coding 독학 제214일 2024년10월27일(일)

2024년 10월 27일

오늘은 새로운 도전을 시작해 보겠습니다~~^^* YEAH~~^^*

나뭇가지를 하나의 독립된 Object 객체로 처리해 보겠습니다~~^^*

이것은 바로!!!

바로!!!

네!!! 그렇습니다!!!

Object Oriented 객체지향 Programming 프로그래밍!!! 와우!!!

어제 만들었던 코드를 살짝 바꾸어서, 나뭇가지를 객체로 만들어 보겠습니다~^^*

이번 프로그래밍 과정은 살짝 그 길이 복잡해요~~^^* 그래서~~^^*

한 발짝씩 천천히 나아가 볼게요~~^^*

오늘은~~^^*

Object Oriented 객체지향 Programming 프로그래밍을 이해해 보는 그 첫 단계!!

나무 기둥 하나를 세워 보도록 할게요~~^^*

나뭇가지 객체를 담을 파일을 하나 별도로 만들고, 인덱스 파일에도 추가하도록 할게요~^^*

class Branch {
  constructor (begin, end) {
    this.begin = begin;
    this.end = end;
  }
  //나뭇가지를 만들겠습니다~~^^*

  show() {
    stroke(255);
    line(this.begin.x, this.begin.y, this.end.x, this.end.y);
  } 
  //생성된 나뭇가지를 보여주겠습니다~~^^*
}

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

그럼 우리 메인 함수를 만들어 볼까요~~^^*

잊고 있었던 vector 벡터를 사용해 보겠습니다~^^*

네~~^^*

무언가를 배웠다가 잊어버렸다가 다시 배우면 그것을 이해하는 정도가 점점 깊어지는 것 같아요~~^^* [망각과 새로 배움]의 사이클의 힘~~^^*

(1) 나뭇가지 시작 지점과 끝 지점에 벡터 vector를 만들어 보겠습니다~~^^*

(2) 두 벡터를 argument 전달인자로 넘겨주면서 나뭇가지 객체를 생성하는 함수 Branch()를 호출해 나뭇가지 객체를 생성해 보겠습니다~~^^*

var root;

var a = createVector(width/2, height);
var b = createVector(width/2, height- 100);
root = new Branch(a, b);

(3) 나뭇가지를 그려 달라고 함수 show()를 호출하면 되겠죠~~^^*

root.show();

여기서 잠깐!!!

함수를 정의할 때와 함수를 호출할 때, 값을 넘겨 받고 값을 넘겨 주고 하는데요~~^^*

이때 그 값을 지칭하는 용어가 서로 달라지는 것 같아요~~^^*

함수를 정의할 때는, 넘겨 받을 값을 parameter 매개변수라고 부르고~~^^*

함수를 호출할 때는, 넘겨 줄 값을 argument 전달인자라고 부르고~~^^*

parameter 매개변수와 argument 전달인자의 차이를 정리 한 번 하고 가실게요~~^^*

자, 그럼 이제 우리 전체 코드를 함께 살펴 볼까요~~^^*

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

  </head>
  <body>
    <main>
    </main>
     http://branch.js
     http://sketch.js
   </body>
</html>

class Branch {
  constructor (begin, end) {
    this.begin = begin;
    this.end = end;
  }
  //나뭇가지를 만들겠습니다~~^^*

  show() {
    stroke(255);
    line(this.begin.x, this.begin.y, this.end.x, this.end.y);
  } 
  //생성된 나뭇가지를 보여주겠습니다~~^^*
}

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

var root;

function setup() {
  createCanvas(400, 400);
  
  var a = createVector(width/2, height);
  var b = createVector(width/2, height - 100);
  root = new Branch(a, b);
  
  //시작지점 벡터와 끝 지점 벡터를 arguement 전달인자로 넘겨 주며 Class 생성 함수를 호출하여 그 결과를 global 전역변수 root에 저장합니다. 
}

function draw() {
  background(51);
  
  root.show();
  
  //object 객체 나뭇가지인 root를 보여주는 함수를 호출합니다~
}

Object Oriented 객체지향 방식으로 나무기둥 하나를 세워 볼게요~~^^*

오늘 저와 함께~~ 잊고 있었던 Class와 벡터를 새롭게 다시 만나 주셔서 감사합니다~~^^* 망각과 다시 만남이 이해의 깊이를 더해주는 시간을 저와 함께 나누어 주셔서 감사합니다~~^^*