Add an P5js element

[jneug]

I would like a native P5js element to easily embed a P5js canvas into a hyberbook.

This can be done with the embed element, but I assume this could be fairly easy to add and should be in the spirit of other elements like the online ide and mermaid.

[mikebarkmin]

I also think that a P5js editor would also be a worthwhile addition. This should behave similar to the onlineide-element (https://hyperbook.openpatch.org/elements/online-ide).

So maybe we need a p5js player and a p5js editor element.

[jneug]

It seems like P5js will move to https://openprocessing.org. Maybe it would make sense to support the new site as well (or maybe only the new one).

[mikebarkmin]

I did some experiments on how to implement this feature. p5js works normally in global mode and assumes that only one sketch is present. Thus, you can call createSketch and other functions directly like so:

function setup() {
    createCanvas(1720, 200);
    background(0);
  };
function draw() {
    fill(255, 0, 0);
    circle(mouseX, mouseY, 50);
  };
}

To show multiple sketches on a page, I have found two options:

1. Use p5js native multiple sketch mode, which would look like this:

function sketch2(p) {
  p.setup = function () {
    p.createCanvas(1720, 200);
    p.background(0);
  };
  p.draw = function () {
    p.fill(255, 0, 0);
    p.circle(p.mouseX, p.mouseY, 50);
  };
}

2. Use an iframe like in the p5js documentation, which uses this component https://github.com/processing/p5.js-website/blob/main/src/components/CodeEmbed/frame.tsx. This would allow to also use the global mode, but using multiple sketches at the some time.

I prefer the iframe, because it gives us all the flexibility, but keeps writing p5js file simple.

[mikebarkmin]

I created an initial version #897

[mikebarkmin]

The element is implemented. Check out the documentation: https://hyperbook.openpatch.org/elements/p5

Happy coding :)