【p5.js】 임의의 장소에 복수의 캔버스를 설치하는 방법

p5.js에서 여러 캔버스를 지정한 장소에 설치하는 방법을 소개합니다.

이미지 동영상은 다음과 같습니다.


상기는 p5.js로 작성한 4개의 캔버스(봄・여름・가을・겨울)를 지정 장소에 배치한 것입니다.

이런 식으로 p5.js에서 여러 장소에 캔버스를 설치하는 방법을 소개합니다!

상위 요소 만들기

canvas의 부모 요소를 미리 준비해 둡니다. 여기에서는 2개 준비해 둡니다.

<div id="container1"></div>
<div id="container2"></div>

배포 대상을 지정하여 인스턴스화

부모가 되는 id를 지정하고 인스턴스화하면 완성입니다!
샘플 예는 다음과 같다.

    <script>
      var sketch1 = function(p) {
        p.setup = function() {
          p.createCanvas(100, 100);
          p.background(0);
        };

        p.draw = function() {
          p.fill(200);
          p.stroke(0);
          p.rect(20, 20, 20, 20);
        };
      };

      var sketch2 = function(p) {
        p.setup = function() {
          p.createCanvas(200, 200);
          p.background(200);
        };

        p.draw = function() {
          p.fill(0);
          p.stroke(0);
          p.ellipse(50, 50, 50, 50);
        };
      };

      new p5(sketch1, "container1");
      new p5(sketch2, "container2");
    </script>

실행 결과


이렇게 하면 지정한 장소에 캔버스를 배치하고 p5.js에서 좋아하는 드로잉이 가능합니다!

참고 URL

공식(p5.js): Instance Container