Creative Coding 독학 제100일 2024년07월05일(금)

2024년 7월 5일

오늘은 상속 inheritance에 대한 프로그램을 공부해 보겠습니다~^^*

갑자기???

네~^^* 다음에 만들어 볼 Particle 프로그램은 상속 구조를 가지고 있어요~^^*

그래서, 그 준비로, “상속”을 파헤쳐 보겠습니다~^^*

상속, 그것이 알고 싶다!!!

음…부모님과 똑같이 닮았을 수도 있고 살짝 다를 수도 있는 우리인데요~^^*

부모님의 특성을 그대로 상속받고, 살짝 다른 부분은 상속 받은 내용에 새로 덧입혀서 우리의 특성이 형성된 것 같아요.

그 특성을 그대로 프로그램으로 표현해 보겠습니다~^^*

부모가 되는 클래스를 Super 또는 Parent라고 하구요~^^*

자녀가 되는 클래스를 Sub 또는 Child라고 부르기도 해요~^^*

자녀가 되는 클래스는,

하나. constuctor(){} 파트는 다 기술을 해주어야 합니다~^^*

둘. 그외 다른 함수들은 따로 기술하지 않아도 되어요~^^* 부모의 모든 함수들이 그대로 상속되어 작동되기 때문에요~^^*

셋. 만약 부모 클래스와 다르게 작동되는 함수가 있다면, 그 함수를 기술하면서 달라지는 내용을 담으면 되어요~^^*

그럼 우리 입자 Particle 클래스를 부모로 둔 색종이조각 Confetti 클래스를 만들어 볼까요~^^*

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 보실 수 있어요~

6:50까지는 기존에 배운 두 가지 방법으로 사각형 클래스를 만드는 과정이 나오구요~

6:50부터가 오늘 우리가 배울 상속 개념을 본격적으로 다루고 있어요~^^*

6:50까지는 편안하게 보시고~ 6:50부터는 귀 쫑긋 하시면 될 것 같아요~

그럼 부모인 Particle 클래스와 자녀인 Confetti 클래스의 코드 내용을 살펴 볼까요~^^*

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/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="particle.js"></script>
    <script src="confetti.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>

//부모 클래스 -> 자녀 클래스 -> 메인 프로그램 순서로 index파일에 연결하는 것에 주의해 보셔요~^^*

//부모 클래스인 Particle입니다.

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  update() {
    this.x += random(-5, 5);
    this.y += random(-5, 5);
  }
  //상하좌우 -5 ~ 5 사이의 위치 변화값을 가집니다.  

  show() {
    stroke(255);
    strokeWeight(24);
    point(this.x, this.y);
  }
  //흰색의 큰 점으로 표현됩니다. 원처럼 보이겠네요~^^*
}

//자녀 클래스인 Confetti입니다.
//constructor(){}는 반드시 기술합니다.
//update(){}, show(){} 등의 그외 함수는 내용 변화가 없다면 기술하지 않습니다.


class Confetti extends Particle {
  //Particㅣe에서 분파된 것이다라고 선언합니다. 
  
  constructor(x, y) {
    
    super(x, y);
    //부모 클래스의 constructor(x,y) {this.x = x; this.y = y;} 내용을 상속받습니다.
    
    this.bright = random(255);
    this.r = 10;
    //부모 클래스에는 없는 구성요소들을 새롭게 첨가합니다. 
    //색종이 조각의 밝기는 0 ~ 255 사이 값을 가집니다. 
    //색종이 조각의 한 변의 길이는 10 픽셀입니다.
    
  }
  
  
  update() {
    
    super.update();
    // 부모 클래스의 update(){ this.x += random(-5, 5);
    // this.y += random(-5, 5);} 내용을 상속 받습니다.
    
    this.r += random(-2, 2);
    // 자녀 클래스에만 있는 구성요소인 this.r에 대한 내용을 기술합니다 
    
    //색종이 조각은 상하좌우 -5 ~ 5 사이의 위치 변화값을 가집니다.
    //조각의 한 변은 -2 ~ 2 사이의 길이 변화값을 가집니다. 
  }

  show() {
    
    strokeWeight(1);
    stroke(255);
    fill(this.bright);
    square(this.x, this.y, this.r);
    
    //부모 클래스의 show(){}내용과 같은 부분이 없기 때문에, 완전히 새로운 내용으로 덮어 씁니다. 
  }
}

let p1, p2;
function setup() {
  createCanvas(400, 400);
  p1 = new Particle(200, 200);
  p2 = new Confetti(200, 200);
  //p1은 부모 클래스 Particle
  //P2는 자녀 클래스 Confetti입니다.
}

function draw() {
  background(50, 255, 100);
  p1.update();
  p1.show();
  p2.update();
  p2.show();
  //p1과 p2을 작동시키며 보여줍니다. 
}

//부모: 원 자녀: 색종이 조각 
//크기와 색상변화 없이 상하좌우 -5 ~ 5 사이 위치가 변하는 흰색 원
//크기와 색상이 변화하면서 상하좌우 -5 ~ 5 사이 위치가 변하는 색종이 조각
//이 잘 보이시나요~?^^*

부모인 흰색 입자와 자녀인 색종이 조각이 사이좋게 들판을 이리저리 이동하는 것이 잘 보이시나요~^^* 부모와 많이 닮았지만 상당히 다르기도 한 우리 모습과 비슷할까요~^^*