Rails7でp5.jsを使う方法

importmapに追記

$ bin/importmap pin p5
Pinning "p5" to https://ga.jspm.io/npm:p5@1.8.0/lib/p5.min.js

importmap.rb

+ pin "p5", to: "https://ga.jspm.io/npm:p5@1.8.0/lib/p5.min.js"

描画内容のjavascriptファイルを作成

app\javascript\custom\sketch.js

import p5 from "p5";

new p5(p => {
  p.setup = () => {
    p.createCanvas(p.windowWidth, 600, p.WEBGL);
  }

  p.draw = () => {
    p.background(255);

    for (let y = 0; y <= 1000; y += 500) {
      for (let x = 0; x <= 1000; x += 500) {
        p.noFill();
        p.stroke(255, 147, 206);
        p.rotateX(p.frameCount * 0.01);
        p.rotateY(p.frameCount * 0.01);
        p.box(200, 200, 200);
      }
    }
  }
});

参考：

https://zenn.dev/iloveomelette/scraps/4e033878f84b56
https://qiita.com/Damien/items/5f8d4691723b01f370b9