[javascript] P5.js에서 오브젝트 지향 프로그래밍을 사용할 수 있나요?

04 Dec 2023

javascript

네, P5.js는 오브젝트 지향 프로그래밍을 사용할 수 있습니다. P5.js는 자바스크립트 기반의 프레임워크로서, 그래픽 및 인터랙티브한 웹 애플리케이션을 개발하는 데 사용됩니다.

P5.js에서 오브젝트 지향 프로그래밍을 사용하기 위해서는 클래스(class)와 생성자(constructor), 메서드(method) 등을 활용해야 합니다.

아래는 P5.js에서 오브젝트 지향 프로그래밍을 활용한 예시 코드입니다:

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

  display() {
    ellipse(this.x, this.y, this.radius * 2);
  }

  move() {
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

let circles = [];

function setup() {
  createCanvas(800, 600);
  
  for (let i = 0; i < 10; i++) {
    let x = random(width);
    let y = random(height);
    let radius = random(10, 50);
    let circle = new Circle(x, y, radius);
    circles.push(circle);
  }
}

function draw() {
  background(220);
  
  for (let circle of circles) {
    circle.move();
    circle.display();
  }
}

위의 코드에서 Circle 클래스는 x, y, radius 속성을 가지고 있으며 display() 메서드와 move() 메서드를 가지고 있습니다. setup() 함수에서는 Circle 객체를 생성하고 배열에 추가하고, draw() 함수에서는 생성된 Circle 객체들을 이용해 움직이는 원을 그리고 있습니다.

이와 같이 P5.js를 활용하여 오브젝트 지향적인 프로그래밍을 이용할 수 있으며, 이를 활용하여 복잡한 그래픽 애니메이션 및 상호작용을 구현할 수 있습니다.

P5.js의 자세한 사용법은 P5.js 공식 문서를 참조하시기 바랍니다.