Silverback9

오늘은 Class를 사용한 무작위 이동 프로그램을 공부하였습니다. 아래 동영상을 보시면 관련 내용부터 강의가 시작됩니다.

p5.js는 객체지향 프로그래밍을 지원합니다. 객체는 구성 요소와 하는 일 즉, data와 function을 Class 안에 함께 담은 것입니다. 객체를 따로 정의해 놓으면, 메인 프로그램의 작성도 간결해지고, 경우에 따라 Class 의 내용만을 수정하여 프로그램에 변화를 가져올 수도 있습니다.

Walker라는 Class 안에 vector 구성 데이터와 이동 방법 및 표현 방법을 따로 담아 놓습니다. 이 Class 안의 변수라는 것을 알리기 위해 “this.”을 구성 데이터 변수이름 앞에 붙이는 것에 주의합니다.

class Walker{
  constructor(x, y) {
    this.pos = createVector(x,y);
  }
  update(){
    this.pos.x = this.pos.x + random(-1, 1);
    this.pos.y = this.pos.y + random(-1, 1);
  }
  show(){
    stroke(255, 100);
    strokeWeight(2);
    point(this.pos.x, this.pos.y);
  }
}

메인 프로그램에서는 캔버스 정중앙을 시작점으로 하는 vector 데이터를 가진 Class Walker를 생성하여 변수 walker에 담습니다. Class Walker가 이미 내재적으로 가지고 있는 이동함수 update() 와 표현함수 show()를 부르기만 하면 되어, 메인 프로그램의 작성문은 매우 짧고 간단합니다.

function setup() {
  createCanvas(400, 400);
  walker = new Walker(200,200);
  background(0);
}

function draw() {
  walker.update();
  walker.show();
}

이것을 눌러 코드를 보시고 삼각형을 눌러 실행시켜 보시고 사각형을 눌러 프로그램을 종료해 보세요.

Class에 관한 기초적 이해를 다지시기 원하신다면, 기초과정의 강의를 한 번 보시는 것도 좋을 것 같습니다.

오늘 공부의 한 가지 아쉬운 점은 Class Walker를 정의하는 파일을 따로 만들어 본 프로그램에 함께 묶는 과정인 index.html 수정이 잘 안되었는지 메인 프로그램이 Walker를 인식하지 못하여, 동영상 강의와는 다르게 메인 프로그램에 Class Walker를 선두에 선언하여 완성하였다는 것입니다. 다음에는 Class 정의 내용을 다른 파일에 담아 본 프로그램에 묶는 것을 잘 해내고 싶습니다.

기초과정을 독학했을 때의 추억이 새록새록 살아나는 오늘이기도 합니다. p5.js The Nature of Code 독학도 완주하여 즐거운 추억으로 되돌아 볼 수 있으면 좋겠습니다. 꿈은 이루어 집니다!!