• P5.js
• 앙귤러와 P5.js 통합 방법
• 예시 코드

P5.js

P5.js는 웹 기반 자바스크립트 그래픽 라이브러리로, 시각적인 컴퓨팅과 창의적인 코딩을 위한 도구입니다. P5.js는 자바스크립트의 강력한 기능을 활용하여 캔버스에 그래픽을 그리고 애니메이션을 만들 수 있게 도와줍니다.

앙귤러와 P5.js 통합 방법

앙귤러 프레임워크에서 P5.js를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다.

1. P5.js 라이브러리를 프로젝트에 추가합니다. 먼저, npm install p5 명령어를 사용하여 P5.js 라이브러리를 프로젝트에 설치합니다.

2. P5.js를 사용할 컴포넌트를 생성합니다. 앙귤러의 컴포넌트를 사용하여 P5.js를 통합할 수 있습니다. 예를 들어, ng generate component P5Component 명령어를 사용하여 P5.js와 관련된 컴포넌트를 생성합니다.

3. P5.js 로직을 컴포넌트에 추가합니다. 생성된 P5 컴포넌트의 TypeScript 파일을 열고, P5.js를 초기화하고 그래픽을 그리는 로직을 작성합니다.

4. 앙귤러 애플리케이션에서 P5.js 컴포넌트를 사용합니다. 앙귤러 애플리케이션의 루트 컴포넌트의 템플릿 파일에서, P5 컴포넌트를 추가하여 사용할 수 있습니다.

예시 코드

다음은 앙귤러와 P5.js를 통합한 예시 코드입니다.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as p5 from 'p5';

@Component({
  selector: 'app-p5-component',
  template: `
    <div #container></div>
  `,
  styleUrls: ['./p5-component.component.css']
})
export class P5Component implements OnInit {
  @ViewChild('container') container: ElementRef;

  private p5Instance;

  ngOnInit() {
    this.createCanvas();
  }

  private createCanvas() {
    this.p5Instance = new p5((sketch) => {
      sketch.setup = () => {
        const canvas = sketch.createCanvas(400, 400);
        canvas.parent(this.container.nativeElement);
      };

      sketch.draw = () => {
        sketch.background(220);
        sketch.fill(255, 0, 0);
        sketch.ellipse(sketch.mouseX, sketch.mouseY, 50, 50);
      };
    });
  }
}

위의 코드는 앙귤러 애플리케이션에서 P5 컴포넌트를 생성하고, P5.js를 초기화하며 그래픽을 그리는 예시입니다. 위의 코드에서 createCanvas 메서드는 P5.js 캔버스를 생성하고 컨테이너 요소에 추가합니다. draw 함수는 매 프레임마다 호출되며, 배경색을 설정하고 마우스 위치에 원을 그립니다.

이와 같이 앙귤러와 P5.js를 통합하여 그래픽 애니메이션을 쉽게 구현할 수 있습니다.

참고 문서: P5.js Getting Started