p5.jsをwordpressに埋め込む方法

iframeを用いてブログ記事内にp5.jsのCanvasを表示する。

手順

1. sketchのファイルを作成する。
   • index.html, sketch.jsなど
2. FTPなどでサーバーにファイルをアップする。
3. iframe (Gutenbergの「カスタムHTMLブロック」など)でコードを記入

<div class="creative_coding">
  <iframe
    src="https://[ここにフォルダへのpath]/index.html"
    width="100%"
    height="400"
    frameborder="0"
    sandbox="allow-scripts allow-same-origin">
  </iframe>
</div>

※小さい円がマウスを追従するだけのサンプルコードです↓