Using P5 in a webcomponent

Intro

This project demoes:

HowTo use p5.js in a webcomponent created by the Stencil webcomponent builder.

The basic start can be used in a usecase, where you want to package your P5 creation in an npm package and publish it to NPM.
This work is based on webpack-sample.

The next usecase is to let a consumer provide the P5 skecth instance to a canvas-hosting webcomponent.
This work is based on create-react-app-sample. It is not fully done. PR's are welcome.

How this project was build

npm init stencil
# you get a menu - choose component
# Name of proejct: stncl-p5-poc

# Add dependencies:
npm install p5 --save
npm install @types/p5 --save-dev

# Test run: Build, start a webserver and a browser:
npm start

# Kill webserver:
ctrl-c

Add P5 to your webcomponent:
Edit webcomponent \stncl-p5-poc\src\components\my-component\my-component.tsx

// import p5
import p5 from 'p5';

// Paste demo code from
// https://github.com/p5-types/p5.ts/blob/master/examples/webpack/src/index.ts
function s(sketch: p5) {
  const x = 100;
  const y = 100;

  sketch.setup = () => {
    sketch.createCanvas(
      200,
      200
    );
  };

  sketch.draw = () => {
    sketch.background(
      0
    );
    sketch.fill(
      255
    );
    sketch.rect(
      x,
      y,
      50,
      50
    );
  };
};

const myp5 = new p5(
  s
);

Now run the project once more.
Thats it!

Credits

Thanks to

Stencil
P5 samples by Zalastax

Refs

Getting Started with StencilJS

Social

The PoC was made at February code jam where also were present