Include the same sketch multiple times on an HTML page

Topic

I found that the following verbose and kind of annoying syntax does what I want. I wish there's a way to write it without so much boilerplate:

<div style="display: flex; justify-content: center;">
  <div class="diamond-sketch" style="text-align: center;"></div>
  <div class="diamond-sketch" style="text-align: center;"></div>
  <div class="diamond-sketch" style="text-align: center;"></div>
</div>

<script>
const diamondSketch = (elem) => {
    return (p) => {
        p.setup = function() {
            p.frameRate(10);
            p.rectMode(p.CENTER);
            let canvas = p.createCanvas(100, 100);
            canvas.parent(elem);
            p.background(200);
        };
        p.draw = function() {
            let step = p.frameCount % 100;
            p.background(200);
            let r = (2 * Math.abs(step / 100 - 0.5)) - 0.5;
            p.applyMatrix(1, r, r, 1, 50, 50);
            p.rect(0, 0, 50, 50);
        };
    }
};

document.querySelectorAll('.diamond-sketch').forEach((elem) => {
    new p5(diamondSketch(elem), elem);
});
</script>

Use the provided HTML example as the reproduction case. Trace how p5 instances are created for multiple matching elements, then define and test a less repetitive supported API; done when the same sketch can be rendered multiple times without the repeated wrapper boilerplate.